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

Question

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

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

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

我需要index.html根据URL路径将所有不正确的请求重定向到针对特定应用程序的不同请求，例如，如果有人请求cloud-front-url/firstApp/non-existing-path，则应将其index.html从firstApp 重定向至对第二应用程序的类似行为。

我知道如何设置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是否可以index.html根据请求的路径将404错误重定向到其他错误（重定向到index.htmlfirstApp或secondApp文件夹中）？

Answer 1

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

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

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