为什么在 S3/Cloudfront 上刷新我的 Angular 6 项目会导致错误？答案

【问题标题】：Why is refreshing my Angular 6 project on S3/Cloudfront causing errors?为什么在 S3/Cloudfront 上刷新我的 Angular 6 项目会导致错误？
【发布时间】：2019-06-14 10:00:07
【问题描述】：

我的 Angular 6 项目在 Cloudfront 的 S3 存储桶上托管时遇到问题。每次我刷新时，项目似乎都丢失了，我被重定向到一个页面，上面写着：这可能是什么原因造成的？当我在本地服务器上刷新时，我只是注销并重定向到登录页面。我认为这可能是我的 S3 存储桶设置有问题，所以我上传到我知道配置正确的项目（我有一个 Angular 5 项目，没有刷新问题）。但是，同样的事情发生了，所以它似乎在我的项目中。

这可能是我编译文件的方式吗？我正在使用'ng build'

任何帮助表示赞赏！非常感谢。

【问题讨论】：

标签： xml angular amazon-s3 amazon-cloudfront

【解决方案1】：

这取决于您的 AWS S3 项目结构。我假设您已授予对文件的公共访问权限（访问控制列表）以及正确的存储桶策略，并且您已将构建放在根目录中。

确保在存储桶属性（静态站点托管）中为错误文档字段添加了 index.html。

还要确保在您的云端分发中添加错误页面，为指向您的 index.html 的代码 403 和 404 创建 2 个自定义错误响应并返回响应代码 200。

编辑：这是一个参考链接 https://hackernoon.com/hosting-static-react-websites-on-aws-s3-cloudfront-with-ssl-924e5c134455

【讨论】：

【解决方案2】：

有两种可能：

(1) 如果您在 AWS S3 上的 Angular 是客户端渲染的，那么每次您刷新网站时，您的浏览器都会向 AWS CloudFront 发送请求以从 AWS S3 获取文件。

例如。重新加载 https://yourdomain.com/contact 实际上会向 AWS S3 存储桶 > 'contact' 目录 > index.html 发送请求，该请求不存在，因为您正在查看的页面纯粹是在客户端生成的。

解决方案：CloudFront 分配 > 错误页面 > 创建自定义错误响应 > 为错误 400、403、404 创建自定义响应。

例如，错误 400 的自定义错误响应：

HTTP Error Code: 400 Bad Request
Error Caching Minimum TTL: 300 
Customize Error Response: Yes
Response Page Path: /index.html
HTTP Response Code: 200 OK

(2) 如果您的 Angular 是服务器端渲染的，那么您必须使用 AWS S3 端点作为“源路径名称”，而不是使用 AWS 下拉列表中的自动完成功能。更多详情可以参考：Prerender Angular and Host It on AWS S3

【讨论】：

【解决方案3】：

我只是在静态网站托管中将 index.html 设置为错误文档，它对我有用。

【讨论】：

【解决方案4】：

在您的 s3 存储桶中，构建的文件需要具有“公共”访问权限

如果您刚刚更改了权限，则可能需要几分钟才能跨 s3 可用区复制更改，并且云端缓存会读取新权限

【讨论】：