Question

每次将SPA的新版本部署到具有Cloudfront分布的S3存储桶时，我们都必须手动强制浏览器清除缓存并重新加载。

index.html的无缓存设置如下

<meta http-equiv='cache-control' content='no-cache'>
<meta http-equiv='expires' content='0'>
<meta http-equiv='pragma' content='no-cache'>

并且Cloudfront设置为“使用原始缓存头”

Answer 1

更好的解决方案是让Cloudfront处理缓存并在部署后使其无效：

$ aws cloudfront create-invalidation --distribution-id YOUR_CF_DISTRIBUTION_ID --paths "/*"
$ aws cloudfront create-invalidation --distribution-id YOUR_WWW_CF_DISTRIBUTION_ID --paths "/*"

invalidate-the-cloudfront-cache

Answer 2

由于Cloudfront使用S3对象元数据，所以我建议您通过亚马逊的界面/ cli进行操作，而不是像这样做一样在html文件中进行设置。

您可以通过导航到S3中的存储桶，然后单击“ index.html”文件的“属性”部分和

来手动完成此操作

将“缓存控制”键设置为“最大年龄：0，必须重新验证”

我建议使用“ max-age：0，必须重新验证”，而不是“ no-cache”，因为我发现浏览器有时不尊重no-cache标头。但是，这是一个非常个人的看法，因此，如果您知道无缓存的用途，那么也可以继续通过aws对象元数据设置来做到这一点。

我还建议通过此命令将react app部署到S3之后使用aws-cli来自动执行该过程。以下命令将index.html替换为自身，包括cache-control标头：

aws s3 cp s3://BUCKET_NAME/index.html s3://BUCKET_NAME/index.html --cache-control \"max-age=0, must-revalidate\" --metadata-directive REPLACE --acl public-read

Answer 3

还要检查在“缓存”行为中正确配置的TTL。如果“最小TTL”配置为其他值，则为0，则优先。 https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/Expiration.html

如果您根本不想为此特定index.html在CloudFront上缓存，请尝试为index.html进行Cache-control：no-store。

浏览器缓存未在Cloudfront上加载新版本的ReactJS Single Page App

3 个答案: