AWS Cloudfront 部署 S3 缓存错误

Question

我正在尝试在部署到 S3 后为 AWS Cloudfront 提供一个 create-react-app 站点。

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

如果您重新加载浏览器，则应用正在正确加载。

service-worker.js 缓存和云端缓存可能会发生冲突。 server-worker 没有得到新上传的 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

云端设置为使用原始缓存标头（将使用文件缓存控制标头）

预期行为： 使用上述步骤进行新部署后，当我们第一次尝试访问应用程序时，应该会获取新的 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 文件也是如此）。

我们的工作如下：

1. 使用长的 max-age 缓存控制同步静态文件夹

   aws s3 sync build/static/ s3://$S3_BUCKET/static/ --cache-control "max-age=604800"

2. 使用短缓存控制同步根文件夹

   aws s3 sync build/static/ s3://$S3_BUCKET/static/ --cache-control "max-age=600"

3. （可选）使根资源无效

   aws cloudfront create-invalidation --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