浏览器缓存未在Cloudfront上加载新版本的ReactJS单页面应用程序

Question

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

index.html的no-cache设置如下

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

Cloudfront设置为Use Origin Cache Headers

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对象元数据，我建议通过amazon的interface / cli进行，而不是像你一样在html文件中设置它。

您可以通过在S3中导航到您的存储桶手动执行此操作，然后单击“index.html”文件的属性部分和

将“Cache-control”键设置为“max-age：0，must-revalidate”

我建议“max-age：0，must-revalidate”而不是“no-cache”，因为我发现浏览器有时不尊重no-cache标头。但是这是一个非常个人化的观点，所以如果你知道你在使用no-cache做了什么，你也可以通过aws对象元数据设置继续这样做。

我还建议在通过此命令将react应用程序部署到S3后使用aws-cli来自动执行该过程。下面的命令将index.html替换为自身，包括缓存控制头：

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。如果将Min TTL配置为其他值，则为0，则优先。 https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/Expiration.html

如果你不想在CloudFront上为这个特定的index.html缓存，请尝试使用Cache-control：index.html的no-store。