多个 SPA 的 S3 和 CloudFront 网站托管根据 url 路径重定向到不同的 index.html

Question

我有一个用于多个单页应用程序的 S3 存储桶，并为此存储桶启用了静态网站托管。 Bucket有以下文件夹和文件（firstApp & secondApp是文件夹，对应不同的SPA）：

firstApp
    index.html
    *.js & *.css files
secondApp
    index.html
    *.js & *.css files

我还在 S3 存储桶前面设置了 CloudFront，默认根对象设置为 index.html。 现在 cloud-front-url/firstApp/ 显示来自 firstApp SPA 的 index.html，cloud-front-url/secondApp 显示来自 secondApp 的 index.html。

我需要将所有不正确的请求重定向到基于 url 路径的特定应用程序的不同 index.html，例如如果有人请求 cloud-front-url/firstApp/non-existing-path - 它应该从 firstApp 重定向到 index.html 和 secondApp 的类似行为。

我知道如何设置 CloudFront 以将所有 404 错误重定向到单个 index.html:

select distribution > Error Pages > Create custom error response:
* Http error code: 404
* Error Caching Minimum TTL (seconds) : 0
* Customize response: Yes
* Response Page Path : /firstApp/index.html
* HTTP Response Code: 200

CloudFront 是否可以根据请求的路径将 404 错误重定向到不同的 index.html（重定向到 firstApp 或 secondApp 文件夹中的 index.html）？

Answer 1

在 S3 上托管静态网站时，不可能有不同的 404 页面。一般来说，一个桶有一个404错误页面。

您可以在两个单独的存储桶中托管您的两个应用程序。每个都有自己的 404 错误页面。

然后，在 CloudFront 中，使用指向每个单独存储桶的多个行为。这样，/firstApp/ 转到 bucket1，/secondApp/ 转到 bucket2。