我使用S3托管一个javascript应用程序，将使用HTML5 pushStates。问题是，如果用户书签了任何url，它将不会解析为任何东西。我需要的是能够接受所有url请求，并在我的S3桶中提供根index.html，而不仅仅是进行完全重定向。然后我的javascript应用程序可以解析URL并提供适当的页面。
有没有办法告诉S3为所有URL请求服务index.html，而不是做重定向?这类似于通过提供一个index.html来设置apache来处理所有传入的请求，如本例中的https://stackoverflow.com/a/10647521/1762614。我真的希望避免仅仅为了处理这些路由而运行web服务器。从S3执行所有操作非常有吸引力。
当前回答
对于这个问题，我有4种解决方案。前三个问题已经在答案中提到了，最后一个是我的贡献。
Set the error document to index.html. Problem: the response body will be correct, but the status code will be 404, which hurts SEO. Set the redirection rules. Problem: URL polluted with #! and page flashes when loaded. Configure CloudFront. Problem: all pages will return 404 from origin, so you need to chose if you won't cache anything (TTL 0 as suggested) or if you will cache and have issues when updating the site. Prerender all pages. Problem: additional work to prerender pages, specially when the pages changes frequently. For example, a news website.
我的建议是使用选项4。如果预先呈现所有页面，预期页面将不会出现404错误。页面将正常加载，框架将作为一个SPA进行控制和正常工作。还可以设置错误文档以显示通用的error.html页面和重定向规则，将404错误重定向到404.html页面(不带hashbang)。
关于403禁忌错误，我不让它们发生。在我的应用程序中，我认为主机桶中的所有文件都是公共的，我用具有读权限的everyone选项设置了这一点。如果您的站点有私有页面，让用户看到HTML布局应该不是问题。您需要保护的是数据，这是在后端完成的。
此外，如果你有私有资产，比如用户照片，你可以将它们保存在另一个bucket中。因为私有资产需要与数据同样的关注，并且不能与用于托管应用程序的资产文件进行比较。
其他回答
对于这个问题，我有4种解决方案。前三个问题已经在答案中提到了，最后一个是我的贡献。
Set the error document to index.html. Problem: the response body will be correct, but the status code will be 404, which hurts SEO. Set the redirection rules. Problem: URL polluted with #! and page flashes when loaded. Configure CloudFront. Problem: all pages will return 404 from origin, so you need to chose if you won't cache anything (TTL 0 as suggested) or if you will cache and have issues when updating the site. Prerender all pages. Problem: additional work to prerender pages, specially when the pages changes frequently. For example, a news website.
我的建议是使用选项4。如果预先呈现所有页面，预期页面将不会出现404错误。页面将正常加载，框架将作为一个SPA进行控制和正常工作。还可以设置错误文档以显示通用的error.html页面和重定向规则，将404错误重定向到404.html页面(不带hashbang)。
关于403禁忌错误，我不让它们发生。在我的应用程序中，我认为主机桶中的所有文件都是公共的，我用具有读权限的everyone选项设置了这一点。如果您的站点有私有页面，让用户看到HTML布局应该不是问题。您需要保护的是数据，这是在后端完成的。
此外，如果你有私有资产，比如用户照片，你可以将它们保存在另一个bucket中。因为私有资产需要与数据同样的关注，并且不能与用于托管应用程序的资产文件进行比较。
让Angular 2+应用程序通过Amazon S3和直接url工作的最简单的解决方案是在S3桶配置中指定Index .html作为Index和Error文档。
在2022年，Lambda函数是
函数处理程序(事件){ Var request = event.request; Var uri = request.uri; if (uri.endsWith("/")) { 请求。Uri += "index.html" } else if (!uri.includes(".")){ 请求。Uri += "/index.html" ｝ 返回请求; ｝
这里没有提到的解决方案是使用CloudFront函数在查看器请求时将请求URI重写为index.html:
function handler(event) {
var request = event.request;
request.uri = '/index.html';
return request;
}
如果你在这里寻找与React路由器和AWS Amplify控制台一起工作的解决方案，你已经知道你不能直接使用CloudFront重定向规则，因为Amplify控制台不会为应用程序公开CloudFront Distribution。
然而，解决方案非常简单-你只需要在Amplify控制台中添加一个重定向/重写规则，就像这样:
查看以下链接获取更多信息(以及截图中的复制友好规则):
https://docs.aws.amazon.com/amplify/latest/userguide/redirects.html#redirects-for-single-page-web-apps-spa https://github.com/aws-amplify/amplify-console/issues/83
