AWS S3 静态软管：路由规则不适用于云端答案

【问题标题】：AWS S3 Static hosing: Routing rules doesn't work with cloudfrontAWS S3 静态软管：路由规则不适用于云端
【发布时间】：2019-04-04 03:01:53
【问题描述】：

我正在为我的 VueJs SPA 应用程序使用 AWS S3 静态 Web 托管。我在 S3 中设置了路由规则，当我使用 S3 静态托管 url 访问它时它工作得很好。但是，我还配置了 CloudFront 以将其与我的自定义域一起使用。由于需要通过 index.html 路由单页应用程序，因此我在云端设置了自定义错误页面，以将 404 错误重定向到 index.html。所以现在我在 S3 中设置的路由规则不再有效。

让 S3 路由规则与 SPA 的 CloudFront 自定义错误页面设置一起使用的最佳方法是什么？

【问题讨论】：

你没有。您只需将 CloudFront 中的 404 和 403 设置为使用 200 转到 index.html，以便所有路由都发送到那里并由您处理。忽略 S3 路由。
如果它在存储桶端点上运行良好，为什么需要在 CloudFront 中启用自定义错误覆盖黑客？另外，请确认您没有specify the bucket endpoint incorrectly。

标签： amazon-s3 vue.js single-page-application amazon-cloudfront

【解决方案1】：

我想我有点晚了，但还是要来了，

显然，如果您使用 S3 REST_API 端点 (example-bucket.s3.amazonaws.com) 作为 CloudFront 分配的来源，您显然不能这样做，您必须使用 S3 提供的 S3 网站 URL 作为来源（例如- bucket.s3-website-[区域].amazonaws.com）。此外，对象必须是公共的，您不能将存储桶锁定到按源策略分配。

所以，

对象必须是公开的。
必须打开 S3 存储桶网站选项。
分发来源必须来自 S3 网站 url，而不是其余 api 端点。

编辑：

我弄错了，实际上，您也可以使用 REST_API 端点来做到这一点，您只需在 CloudFront 分配中创建一个自定义错误响应，可能只针对 404 和 403 错误代码，将“自定义错误响应”选项设置为“yes”，响应页面路径设置为“/index.html”，HTTP响应代码设置为“ 200”。如果您使用控制台，您可以在您的发行版和错误页面选项卡中找到该选项。

【讨论】：

这也适用于 Blazor Webassembly 应用程序。从 openidconnect 提供商重定向回云端 url 时，我遇到了类似的情况。从 s3 获得通用访问被拒绝，因为它正在寻找完整的 url 作为路径，而不是让 SPA 将其解析为路由。一旦我按照此处所述添加了规则，它就会将回调转发到 SPA 进行解析，并且一切正常。