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

Question

我遇到了一个问题，我有两个单独的 Vue 项目正在部署（编译）到两个单独的 S3 存储桶，称为 ContentSite 和 DashboardSite。 ContentSite 的内容位于带有 index.html 的存储桶的根目录中。 Dashboard S3 存储桶的所有内容都在 dashboard 子目录中。所以喜欢DashboardSite/dashboard/index.html。

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

Default (*) --- ContenSite S3 Bucket

/dashboard/* --- DashboardSite S3 Bucket

当我尝试导航到我刚刚收到key not found 的网站时，问题出在我的 Vue 项目上。

当我浏览 / 时，如何配置我的 Cloudfront 分发以提供来自 ContentSite S3 Bucket 的内容，然后从 dashboard/* 提供来自 DashboardSite S3 Bucket 的内容并且让我的 Vue 路由仍然有效？

Answer 1

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

这是一个简单的重写示例，它将大部分流量发送到index.html。它适用于 SPA 应用程序。 css 文件、图像、JavaScript 文件等内容按原样传递。您可能还需要调整这些，因为可能需要调整相对路径。

exports.handler = async (event, context) => {
  const request = event.Records[0].cf.request;

  if (new RegExp(/^[^.]+$|\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|ttf|map|json)$)([^.]+$)/).test(request.uri)) {
    request.uri = '/index.html';
  }

  return request;
};