反应 aws s3 加载块 X 失败答案

【问题标题】：React aws s3 Loading chunk X failed反应 aws s3 加载块 X 失败
【发布时间】：2022-02-28 22:05:59
【问题描述】：

我在 aws s3 上上传了一个 react 应用，这是我用来部署它的命令

npm i
npm run build
aws s3 sync build s3://bucket/path --acl=public-read --delete
aws cloudfront create-invalidation --distribution-id XXX --paths "/*"

然后我有很多错误，比如

Loading chunk X failed

或

Loading CSS chunk X failed

我以为是部署后的缓存问题，现在打赌我一周没部署，错误率没有降低。

例如，错误是Loading CSS chunk 6 failed. (/static/css/6.32a7316b.chunk.css) 然后当我转到https://my-website.com/static/css/6.32a7316b.chunk.css 时，文件加载没有问题

我阅读了很多帖子但找不到任何解决方案，有些人在谈论 CORS 配置但不应该成为问题，因为文件来自同一个域

可能需要定义一些缓存规则，但我真的不知道是哪一个以及在哪里。

我也在客户端和S3之间使用Cloudflare 不知道有没有影响

【问题讨论】：

哪个命令给你错误？您可以在每个命令之后再添加 2-3 行吗？我希望它是s3 sync 命令？你能在s3://bucket/{this-here-please}之后添加相对路径吗？
您是否在浏览器中收到此消息？如果是这种情况，您可能会收到“过时”的版本，具体取决于您的云端缓存配置。您可以尝试使用自定义参数加载相同的资产，例如?x=1查看资源是否加载正确？
你提到了 CloudFlare 和 CloudFront，你都用了吗？
我在哨兵中收到消息，是的，Cloudflare 和 CloudFront 都是。我在上次部署和最新上传的文件几周后收到错误，而不是已删除的文件

标签： reactjs amazon-web-services amazon-s3 webpack caching

【解决方案1】：

发生此错误是因为某些用户正在获取服务器上不再存在的文件版本。

当您使用create-invalidation Cloudfront 方法并使输出目录无效时，具有缓存文件的用户将尝试加载不存在的文件，您会看到这种错误发生。

停止出现这些错误的一种方法是跟踪应用版本（使用 AJAX 并从 db 或动态配置文件中读取），当应用检测到较新版本时，向用户发送消息并要求他们重新加载页面正如你在这个答案中看到的那样here。

另外，检查webpack.config.js 文件中的output.publicPath 选项，也许更改/ 或/dist 的默认值可以解决您的问题。

【讨论】：

已经通过至少 5 次重新构建 React 应用程序上传文件，只需要使缓存无效，使用 /* 设置验证，瞧。