如何将我的 Angular 应用程序部署到 S3 响应路由 URL

Question

我有 Angular 应用程序，它使用路由，构建并部署到 S3 存储桶。如果我转到应用程序 URL 的根目录，它就可以正常工作。例如www.my-app.com.s3.foo.bar.amazonaws.com/

它在应用程序内运行良好。例如，如果我跟踪指向 ['/home'] 的路由器链接，它会转到www.my-app.com.s3.foo.bar.amazonaws.com/home等等。

但是，如果我直接访问，例如，www.my-app.com.s3.foo.bar.amazonaws.com/home我会收到 S3 错误，指出资源不存在。这是事实 - S3 存储桶中没有与 /home 对应的文件。

如何确保 URL 请求通过应用程序而不是 S3 路由？

更新：看起来 CloudFront 可能会这样做。我在 CloudFront 中配置什么？

Answer 1

您可以将 CloudFront 配置为通过返回 SPA 的相应根页面来从 S3 角度处理“未找到”页面。

• 创建您的 CloudFront 分配。
• 转到分发配置中的错误页面选项卡并添加新的错误页面。
• 从 CloudFront 角度来看，您正在处理的错误是 404 未找到错误，因此请在 HTTP 错误代码字段中输入 404。
• 选择自定义响应并输入应用程序的根 html 页面的位置（在 S3 存储桶中），例如 /index.html。
• 从浏览器的角度来看，这是有效的请求和响应，因此在 HTTP 响应代码字段中输入 200。