首页 文章

AWS Cloudfront部署S3缓存错误

提问于
浏览 次
0

我在部署到S3后尝试向AWS Cloudfront提供create-react-app站点 .

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

如果您重新加载浏览器，应用程序正确加载 .

service-worker.js缓存和cloudfront缓存之间可能会发生冲突 . 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

Cloudfront设置为Use Origin Cache Headers（将使用文件Cache-Control标头）

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

amazon-web-services amazon-s3 amazon-cloudfront create-react-app cache-control

2 回答

  • 0

    它正在发生，因为这些东西已在CloudFront CDN缓存，请尝试使它们无效请按照下列步骤操作：https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/Invalidation.html

    在做了等待一段时间之后，你会看到它开始阅读新文件，如果在执行此操作时出现任何问题，请告诉我 . 谢谢

    回复于
  • 0

    如果问题是CloudFront缓存或浏览器缓存，那么您的问题并不完全清楚 . 你写的是在重新加载页面时应用程序正确加载，所以我怀疑对象的缓存而不是CloudFront .

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

    但是，根构建文件夹中的文件没有唯一的名称，例如index.html在构建之间不会更改（对于服务工作文件也是如此） .

    我们做的是以下内容：

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

    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 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

    回复于

相关问题