S3 + Cloudfront 上的浏览​​器缓存清除

Browser Cache Busting on S3 + Cloudfront

我在 S3 + Cloudfront 上托管一个静态网站。要重新部署,我使用

上传静态文件
aws s3 sync static

并使用

使云端缓存失效
aws cloudfront create-invalidation

强制浏览器在我更新后获取这些新资产的推荐方法是什么?问题在于浏览器正在缓存这些资产,而用户的脚本、图像和样式版本越来越旧(无效)。

如果浏览器已经保存缓存值,则不能强制浏览器远程,除非手动干预。

您需要附加

script.something.js?buildid=someuniquereference

并使 cloudfront 不缓存查询字符串参数。

您还可以包含 filename.hash.js 或 filename.hash.html 并使用 index.html / 默认文档,通过缓存控制减少缓存时间 headers。

这样,如果您进行任何更改,您可以更改该数字,缓存也会在客户端上被破坏。

但是一旦发送缓存 headers,就无法远程清理浏览器上的客户端缓存。

希望对您有所帮助。

通常,您可以执行多个步骤来确保您的 AWS CloudFront 和 S3 设置在新部署时缓存失效。

  • 确保使 index.html 的缓存无效(如果已缓存)
  • 您可以为静态资产设置查询参数或新文件名,例如 JavaScript、CSS 等

使用新文件名

<!doctype html>
<html lang="en">
  <head>
     <link href="styles.h2d1f722.css" rel="stylesheet" />
  </head>
  <body>
     <script type="text/javascript" src="scripts.cbe3c974.js"></script>
  </body>
</html>

您可以使用前端构建工具(例如 Webpack、Gulp 等)生成新文件名

使用查询参数

<!doctype html>
<html lang="en">
  <head>
     <link href="styles.css?hash=h2d1f722" rel="stylesheet" />
  </head>
  <body>
     <script type="text/javascript" src="scripts.js?hash=cbe3c974"></script>
  </body>
</html>

设置查询参数时,请确保已在 CloudFront 中启用它(否则将返回文件的缓存响应)。

注意:比较这两种方法,各有优缺点。具有相同的文件名,您可以使用 S3 本机版本控制对文件进行版本控制,同时具有新名称,这样做没有多大意义,因为新部署会为文件添加新名称。还有新文件名,除非您删除旧文件或将旧文件移动到另一个存储桶,否则会使 S3 存储桶变得混乱。

  • 确保您在 index.html(Cache-Control、Expires 和 Pragma Headers)中具有适当的元标记值。

使用元标记

<!doctype html>
<html lang="en">
  <head>
     <meta http-equiv="cache-control" content="max-age=0" />
     <meta http-equiv="cache-control" content="no-cache" />
     <meta http-equiv="expires" content="0" />
     <meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" />
     <meta http-equiv="pragma" content="no-cache" />
     <link href="styles.css?hash=h2d1f722" rel="stylesheet" />
  </head>
  <body>
     <script type="text/javascript" src="scripts.js?hash=cbe3c974"></script>
  </body>
</html>

在这个例子中,它指示不在浏览器中缓存。但是,您可以为这些设置适当的值。

  • 对静态资产实施版本控制方案,这样即使向最终用户提供旧版本的 index.html(从浏览器缓存),网页仍会加载旧资产(JS , CSS 等)没有任何问题。