我正在为我的静态HTML,JS,CSS(等)文件使用Amazon S3 WebHosting。替换我的index.html文件后,通过浏览器消费时,我仍然可以获得旧版本。我想将默认的ttl 设置为bucket (而不是在其中)。我找到了此链接:http://docs.aws.amazon.com/amazoncloudfront/latest/developerguide/distribution-web-values-specify.html#downloaddistvaluesdeftttl
,但找不到仪表板中的"对象缓存"设置。有人可以指出它在哪里吗?
这是一个亚马逊S3链接,可以回答您的问题。根据亚马逊的说法,除非您使用第三方工具(该页面链接到几个),否则无法为整个存储桶设置高速缓存控制标头。我遇到的一种工具描述了如何为使用PUT
请求提交的对象设置缓存指令(或使用其工具批量)。有关更多信息,请参见BucketExplorer。
这是亚马逊说明的剪裁(因为S.O.不喜欢依靠可能会改变或消失的外部链接):
使用Amazon S3 Console
,将标题字段添加到Amazon S3对象到达标题字段- 登录AWS管理控制台并打开Amazon S3控制台在https://console.aws.amazon.com/s3。
- 在Amazon S3控制台中,在Buckets Pane中,单击包含文件的存储桶的名称。
- 在对象列表中,选择要添加标头字段的第一个对象。
- 单击操作,然后单击属性。
- 在右窗格中,展开元数据。
- 单击添加更多元数据。
- 在键列表中,单击 CACHE-CONTROL 或到期,如适用。
- 在 value 字段中,输入适用的值:
- 对于缓存控制字段,输入:
max-age=number of seconds that you want objects to stay in a CloudFront edge cache
- 对于到期字段,以HTML格式输入日期和时间。
- 单击保存。
如果要在其他对象中添加标头字段,请单击下一个对象的名称,然后重复步骤5至9。
2022 AWS CLI V2方法
实现此目的的最简单方法是使用AWS CLI(S3)。这也可以使用github Action等工具完全免费自动化。
静态站点不应将cache-control
设置为HTML
文件上的长期值,因为在浏览器高速缓存到期或手动破坏其缓存之前,用户不会看到更新的版本。
由于AWS CLI
限制,您必须执行以下操作以设置整个存储桶的缓存。
通用示例
上传内容和--delete
旧的S3内容,并在所有内容上设置cache-control
。
aws s3 sync [YOUR_LOCAL_SOURCE_CODE_PATH] s3://[BUCKET_NAME] --delete --cache-control max-age=31536000
递归从所有HTML
文件中删除cache-control
标头,然后将文件设置为类型HTML.
aws s3 cp s3://[BUCKET_NAME] s3://[TO_BUCKET_NAME] --recursive --exclude "*" --include "*.html" --metadata-directive REPLACE --cache-control max-age:no-cache --content-type text/html
注释
- to_bucket_name几乎总是与buck_name 相同
- 如果在AWS S3中修改了
HTML
文件的元数据,则还必须设置content-type
,否则将自动设置为通用类型,从而导致浏览器下载文件而不是在浏览器中渲染它。/em>
示例
// delete old files and upload files from the local directory to the s3 bucket, and set the cache-control header on every file.
aws s3 sync ./out s3://www.test.com --delete --cache-control max-age=31536000
// copy all files and remove cache control header from only HTML files and set back to html content type
aws s3 cp s3://www.test.com s3://www.test.com --recursive --exclude "*" --include "*.html" --metadata-directive REPLACE --cache-control max-age:no-cache --content-type text/html
// bonus - if using CloudFront - small site can invalidate all cache (/*)
aws cloudfront create-invalidation --distribution-id=123ABCDEFG --paths "/*"
如果使用AWS CLI,则可以添加--cache-control
或--metadata directive
每个同步对象
这是我的NPM脚本:
"scripts": {
"prod": "NODE_ENV=production webpack --config ./webpack.config.prod.js",
"sync": "aws s3 sync public/ s3://[BUCKET_NAME] --delete --cache-control max-age=31536000",
"invalidate": "aws cloudfront create-invalidation --distribution-id [DISTRIBUTION_ID] --paths "/*"",
"deploy": "npm run prod && npm run sync && npm run invalidate"
},
是。如果您使用的是CloudFront Distribution-您只需要检查无效,以及为什么您的对象无效无法正常工作。什么是TTL值。
您是否使用CDN?