单个 AWS S3 存储桶上的多个角度 SPA?

Question

我有一些SPA，这是每个客户端的一些标准仪表板，他们偶尔会使用它。所以我把它们移到 Amazon S3 存储桶。我在某种程度上取得了一些成功。我托管了一个应用程序，将 CNAME 添加到存储桶路径，我在那里。

我面临着一些挑战

1( 默认情况下没有 SSL - 在 HTTP 上提供服务

2( S3 无法处理角度路由 - 咦？

因此，我继续使用 CloudFront 为我的应用程序提供 SSL。 是的！ SSL成功了，但路由方面没有改进。

因此，我添加了Lambda@Edge支持将这些 404 错误转换为我的应用程序索引页面，以处理这些重新路由，但再次没有成功。

所以我的问题分为两部分

1( 我们是否可以在具有 SSL 和路由处理功能的单个 AWS 存储桶中使用多个 SPA？如果是，我错过了什么？

2( 迁移到 AWS S3 来托管我的 SPA 甚至是一个好主意吗？如果没有，那么我将将它们托管到单个 EC2 实例中。

仅供参考：我当前通过应用服务将这些应用托管在 Azure 中的单个资源组中。

Answer 1

所以我添加了Lambda@Edge支持将这些 404 错误转换为我的应用程序 索引页来处理这些重新路由，但再次没有成功。

而不是重定向，获取相关的 S3 索引.html并附加到 Edge@Lambda 中的 response.body。

'use strict';
exports.handler = (event, context, callback) => {
const response = event.Records[0].cf.response;
/**
* This function updates the response status to 200 and generates static
* body content to return to the viewer in the following scenario:
* 1. The function is triggered in an origin response
* 2. The response status from the origin server is an error status code (4xx or 5xx)
*/
if (response.status >= 400 && response.status <= 599) {
response.status = 200;
response.statusDescription = 'OK';
//  Fetch the particular index.html relevant to the SPA from S3 (Based on the request path) and update the response.body
response.body = 'Body from index.html from S3';
}
// You might need to move the below callback after S3 file fetch success callback.
callback(null, response);
};

参考：更新错误状态示例

注意：重定向的问题在于 SPA 需要知道具有 Angular 路由的完整路径，以便加载路由。但是重定向会将其替换为索引.html (没有相对路径(