时间戳

首页 > 解决方案 > 一个域，两个不同的 Vue 站点，由 Cloudfront / S3 提供服务

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

问题描述

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

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

Default (*)---ContenSite S3 Bucket

/dashboard/*---DashboardSite S3 Bucket

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

如何配置我的 Cloudfront 发行版以ContentSite S3 Bucket在我浏览时提供内容/，然后从dashboard/*提供内容DashboardSite S3 Bucket和让我的 Vue 路由仍然有效？

标签： amazon-web-servicesvue.jsamazon-s3amazon-cloudfront

解决方案

您可以使用 Lambda@Edge 函数来重写 URL。使用 Lambda@Edge 在 Amazon S3 支持的 Amazon CloudFront Origins 中实施默认目录索引是一个很好的参考起点。您可能需要对其进行一些更改以满足您的需求，但想法是相同的。您只需修改传入的请求，以便将其发送到 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;
};

推荐阅读