amazon-s3 - 如何配置 CloudFront 以在更新时从 S3 更新 SPA?

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

具体来说 - 缓存控制标头显示的 max-age 为 0,所以我认为这应该告诉 Chrome 不要缓存东西,并且总是出去检查新版本。

CloudFront 设置为使用原始标头,因此它应该从 S3 中提取这些标头。

我错过了什么?如何让 Chrome/CloudFront/S3 始终检查应用程序的最新版本?

回答1

由于 CloudFront 上的缓存标头很好,并且禁用 registerServiceWorker() 可以解决您的缓存问题,我们可以将责任归咎于 service worker 保持陈旧的内容。

registerServiceWorker() 可能来自 react-scripts < 4.0.0,它不允许您在不弹出或使用解决方法的情况下配置 service worker。如果您无法升级,您可能只想取消注册或删除 service worker。

如果升级到 react-scripts >= 4.0.0,则可以https://github.com/cra-template/pwa/blob/fc9613279681a06606f90514926b8078db629ec6/packages/cra-template-pwa/template/src/service-worker.js 以使用 https://developer.chrome.com/docs/workbox/modules/workbox-strategies/#network-first-network-falling-back-to-cache。升级后,service worker 的预缓存和等待状态可能仍然过于激进,不符合您的喜好,在这种情况下,您应该https://github.com/facebook/create-react-app/issues?q=label%3A%22issue%3A%20question%20%3E%20PWA%22

https://create-react-app.dev/docs/making-a-progressive-web-app/ 中了解有关渐进式 Web 应用程序的更多信息

https://developer.chrome.com/docs/workbox/troubleshooting-and-logging/

相似文章

html - 如何使 Divs 随窗口大小缩放

我正在尝试使所有内容都随窗口大小缩放。当窗口变小时,我希望一切都变小。我知道我现在正在使用px。我曾尝试使用%但它不起作用。这是我在尝试许多选项之前的原始代码。#content,html,body{h...

最新文章