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

Question

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

我面临一些挑战

1) 默认没有 SSL - 使用 HTTP 服务

2) S3 无法处理 Angular 路由 - 嗯？

所以我继续使用 CloudFront，它为我的应用程序提供 SSL。是的！ SSL 事情成功，但路由事情没有改善。

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

所以我的问题分为两部分

1) 我们可以在单个 AWS 存储桶中使用多个 SPA 并进行 SSL 和路由处理吗？如果是，我错过了什么？

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

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

Answer 1

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

获取相关的 S3 index.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);
};

参考：Update Error Status Example

注意：重定向的问题在于 SPA 需要知道 Angular 路由的完整路径才能加载路由。但重定向会将其替换为 index.html（没有相对路径）