angular - 如何让我的 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 错误，指出该资源不存在.这是真的 -/home 对应的 S3 存储桶中没有文件。

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

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

Answer 1

您可以将 CloudFront 配置为从 S3 Angular 处理“未找到”页面，方法是返回 SPA 的相应根页面。

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