我在S3上有一个React Spa应用。我将仅使用CloudFront仅用于获得带有自定义域的SSL证书 - 老实说，我真的不在乎CloudFront的缓存功能，尽管我认为这是一个不错的振作。
一切正常，除非我对S3存储桶进行更新，否则该页面仍在Chrome中缓存。如果我清除Chrome中的应用程序内存，它将出现并获得最新版本。
我正在通过创建生产构建，然后将所有内容上传到S3并发出CF无效来部署该应用程序：
echo "Pushing to S3."
aws s3 sync --acl public-read ./ s3://${DEPLOY_BUCKET} --metadata-directive REPLACE --cache-control 'max-age=0,public,s-maxage=2'
echo "Invalidating CloudFront cache."
aws cloudfront create-invalidation --distribution-id ${DEPLOY_DISTRIBUTION} --paths '/' '/index.html' '/login' '/*'
对CloudFront的请求似乎将合理的标头返回给我：
accept-ranges: bytes
cache-control: max-age=0,public,s-maxage=2
content-length: 716
content-type: text/html
date: Wed, 18 May 2022 17:15:36 GMT
etag: "660fb0d86eb442f658af12ead96b2c83"
last-modified: Wed, 18 May 2022 16:55:25 GMT
server: AmazonS3
via: 1.1 ....cloudfront.net (CloudFront)
x-amz-cf-id: eLXohvep_...==
x-amz-cf-pop: BOS50-C1
x-amz-version-id: 8V0DR...
x-cache: Miss from cloudfront
具体 - CACHE-CORTROL标题显示最大值为0 ，所以我认为应该告诉Chrome不要缓存事物，并始终出去检查新版本。
CloudFront设置了使用原始标头，因此应该从S3中拉出。
我想念什么？如何使Chrome/CloudFront/S3始终检查该应用程序的最新版本？
I have a React SPA application on S3. I'm fronting that with CloudFront solely to get an SSL certificate with a custom domain - I honestly don't really care about the caching functionality of CloudFront for this, although I suppose it's a nice perk.
Everything works fine, except when I do an update to the S3 bucket, the page remains cached in Chrome. If I clear the application memory in Chrome, it goes out and gets the most recent version.
I'm deploying the app by creating a production build, and then uploading everything to S3 and issuing a CF invalidation:
echo "Pushing to S3."
aws s3 sync --acl public-read ./ s3://${DEPLOY_BUCKET} --metadata-directive REPLACE --cache-control 'max-age=0,public,s-maxage=2'
echo "Invalidating CloudFront cache."
aws cloudfront create-invalidation --distribution-id ${DEPLOY_DISTRIBUTION} --paths '/' '/index.html' '/login' '/*'
The request to CloudFront seems to return reasonable headers to me:
accept-ranges: bytes
cache-control: max-age=0,public,s-maxage=2
content-length: 716
content-type: text/html
date: Wed, 18 May 2022 17:15:36 GMT
etag: "660fb0d86eb442f658af12ead96b2c83"
last-modified: Wed, 18 May 2022 16:55:25 GMT
server: AmazonS3
via: 1.1 ....cloudfront.net (CloudFront)
x-amz-cf-id: eLXohvep_...==
x-amz-cf-pop: BOS50-C1
x-amz-version-id: 8V0DR...
x-cache: Miss from cloudfront
Specifically - the cache-control header shows a max-age of 0, so I thought that should tell Chrome to not cache things and always go out and check for a new version.
CloudFront is setup to use the origin headers, so it should be pulling those from S3.
What am I missing? How do I get Chrome/CloudFront/S3 to always check for the latest version of the application?
发布评论
评论（1）
由于CloudFront上的高速缓存标头很好，并且禁用
RegisterServiceWorker（）解决了您的缓存问题，因此我们可以指责服务工作者保留陈旧内容。registerserviceworker（）可能来自react-scripts＆lt; 4.0.0，它不允许您在不弹出或使用解决方法的情况下配置服务工作者。如果您无法升级，则可能只想解开或删除服务工作者。如果您升级到
react-scripts＆gt; = 4.0.0，则可以从pwa创建create react app app template 修改工作箱配置用于使用networkfirstWorkbox。升级后，服务工作者的待遇和等待状态可能仍然太激进了，在这种情况下，您应该查看是否有人遇到了同一PWA问题。< >
了解有关如何解决Wooksox wooksox 的更多信息
Since the cache headers on CloudFront are fine, and disabling
registerServiceWorker()fixes your caching issues, we can point blame to the service worker keeping stale content.registerServiceWorker()is likely fromreact-scripts < 4.0.0, which doesn't allow you to configure the service worker without ejecting or using a workaround. If you cannot upgrade, you may simply just want to unregister or remove the service worker.If you upgrade to
react-scripts >= 4.0.0, you can modify the workbox config from the PWA Create React App template to use theNetworkFirstWorkbox strategy. After upgrading, the precache and the waiting state of the service worker may still be too aggressive for your liking, in which case you should see if someone ran into the same PWA issue.Learn more about progressive web apps in Create React App
Learn more about how to troubleshoot Workbox