如何让我的 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 角度处理“未找到”页面，方法是返回您的 SPA 的相应根页面。

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