Amazon web services 一个域，两个不同的Vue站点，由Cloudfront/S3提供服务

我面临一个问题，我有两个独立的

Vue

项目正在部署（编译）到两个独立的S3存储桶中，这两个存储桶分别称为

ContentSite

和

DashboardSite

。

ContentSite

的内容位于具有

index.html

的存储桶的根。

Dashboard

S3存储桶的所有内容都位于

Dashboard

子目录中。比如

DashboardSite/dashboard/index.html

我还有一个Cloudfront发行版，它具有以下行为：

Default（*）

--

ContenSite S3 Bucket

/dashboard/*

--

仪表板站点S3 Bucket

问题在于，当我尝试导航到刚刚获得

key not found

的站点时，我的Vue项目出现了问题

---

当我浏览

/

时，如何配置Cloudfront发行版来提供

ContentSite S3 Bucket

中的内容，然后配置

dashboard/*

中的任何内容来提供

dashboard Site S3 Bucket

中的内容，并使我的Vue路由仍然工作？

您可以使用Lambda@Edge函数重写URL。这是一个很好的参考起点。您可能需要对其进行一些更改以满足您的需要，但想法是相同的。您只需要修改传入的请求，以便它将其发送到S3存储桶中的正确文件

这是一个简单的重写示例，它将大部分流量发送到

index.html

。它适用于SPA应用程序。css文件、图像、JavaScript文件等都按原样传递。考虑到可能需要调整相对路径，您可能还需要调整这些路径

exports.handler=async（事件、上下文）=>{
const request=event.Records[0].cf.request；
如果（新的RegExp（/^[^.]+$\（？！（css ^ gif | ico | jpg | js | png | txt | svg | woff | ttf | map | json）$）（[^.]+$）/.test（request.uri）{
request.uri='/index.html'；
}
返回请求；
};

嘿，谢谢你的回答！我试过了Lambda@Edge但没有成功。你会怎么写呢？我添加了一个简单的重写规则的例子。嘿，杰森，你会把这个放在原始请求还是原始响应上？这会放在原始请求上。您正在更改从S3存储桶请求的内容。