Wil*_*ill 3 caching amazon-s3 browser-cache amazon-cloudfront
我在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>
在此示例中，它指示不要在浏览器上缓存。但是，您可以为这些设置适当的值。
| 归档时间： |
|
| 查看次数： |
5107 次 |
| 最近记录： |