Question

在部署到S3之后，我试图为AWS Cloudfront提供一个create-react-app网站。

在部署到S3之后，index.html仍在尝试获取旧的main.xxxxx.js。默认的service-worker.js用于在浏览器中缓存网站。

如果重新加载浏览器，则表明应用程序已正确加载。

service-worker.js缓存和Cloudfront缓存之间可能发生冲突。服务器工作人员没有获得新上传的main.xxx.js，而是旧文件，而在我们使现有文件无效之后，cloudfront有了新的main.xxxxx.js

再现：

npm run build.

aws s3 sync ./build s3://$S3_BUCKET/frontend --delete --acl 'public-read'

aws cloudfront create-invalidation --distribution-id $CLOUDFRONT_ID --paths '/*'

aws s3 cp ./build/service-worker.js s3://$S3_BUCKET/frontend/service-worker.js --cache-control max-age=0

cloudfront设置为“使用原始缓存头”（将使用文件缓存控制头）

预期的行为：在按照上述步骤进行新部署之后，当我们尝试首次尝试访问应用程序时，这应该获得新的main.xxxx.js文件并加载更新的内容

Answer 1

之所以发生这种情况，是因为这些内容也已缓存在CloudFront CDN中，请尝试使它们无效。请执行以下步骤：https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/Invalidation.html

在等待一段时间后，您会看到它开始读取新文件，如果这样做有任何问题，请让我。谢谢

Answer 2

您的问题尚不清楚，究竟是CloudFront缓存还是浏览器缓存。您写道，重新加载页面时，应用程序正确加载，因此我怀疑对象的缓存不是CloudFront。

无论如何，create-react-app会构建易于缓存的工件。静态文件夹中的任何文件都可以具有长期缓存设置，因为它们具有唯一的名称，即，内容更改时文件名也会更改。

但是，根构建文件夹中的文件没有唯一的名称，例如index.html在两个版本之间不会更改（与Service Worker文件相同）。

我们要做的是以下事情：

使用最长的最大缓存控制来同步静态文件夹

aws s3 sync build / static / s3：// $ S3_BUCKET / static / --cache-control“ max-age = 604800”
通过短缓存控制同步根文件夹

aws s3 sync build / static / s3：// $ S3_BUCKET / static / --cache-control“ max-age = 600”
（可选）使根资源无效

aws cloudfront创建无效--distribution-id $ DIST_ID --paths /index.html /service-worker.js /asset-manifest.json

为此，您必须将CloudFront设置为使用原始缓存设置，并确保最小TTL小于或等于索引/清单缓存设置。

在此处阅读有关源缓存设置和CF缓存设置的更多详细信息 https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/Expiration.html

AWS Cloudfront部署S3缓存错误

2 个答案: