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 等)没有任何问题。
我在 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 等)没有任何问题。