我在S3 + Cloudfront上托管一个静态网站。要重新部署,我会上传静态文件。
aws s3 sync static
并使用以下方法使cloudfront缓存失效:
aws cloudfront create-invalidation
在我更新这些资源后,推荐的强制浏览器获取这些新资源的方式是什么?问题在于浏览器正在缓存这些资源,用户正在获取旧(无效)版本的脚本、图像和样式。
我在S3 + Cloudfront上托管一个静态网站。要重新部署,我会上传静态文件。
aws s3 sync static
并使用以下方法使cloudfront缓存失效:
aws cloudfront create-invalidation
在我更新这些资源后,推荐的强制浏览器获取这些新资源的方式是什么?问题在于浏览器正在缓存这些资源,用户正在获取旧(无效)版本的脚本、图像和样式。
通常,您可以采取多个步骤来确保您的AWS CloudFront和S3设置在新部署时进行缓存破坏。
使用新文件名
<!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存储桶混乱,除非您将旧文件移动到其他存储桶中或将其删除。
使用元标记
<!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>
在这个例子中,它指示浏览器不要缓存。但是,您可以设置适当的值。
如果浏览器已经保存了缓存值,你就无法强制远程浏览器更新,除非进行手动干预。
你需要添加
并且使CloudFront不缓存查询字符串参数。script.something.js?buildid=someuniquereference
script.something.js?buildid=someuniquereference
中,someuniquereference 会随着每次构建而改变,当您构建新的资产时,这将强制浏览器从 cloudfront 重新加载资产,并且由于您已经创建了无效化,cloudfront 将提供新内容。 - Shubham Bansal