Amazon S3静态网络托管缓存



我正在为我的静态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对象到达标题字段
  1. 登录AWS管理控制台并打开Amazon S3控制台在https://console.aws.amazon.com/s3。
  2. 在Amazon S3控制台中,在Buckets Pane中,单击包含文件的存储桶的名称。
  3. 在对象列表中,选择要添加标头字段的第一个对象。
  4. 单击操作,然后单击属性
  5. 在右窗格中,展开元数据
  6. 单击添加更多元数据
  7. 键列表中,单击 CACHE-CONTROL 到期,如适用。
  8. value 字段中,输入适用的值:
  9. 对于缓存控制字段,输入:max-age=number of seconds that you want objects to stay in a CloudFront edge cache
  10. 对于到期字段,以HTML格式输入日期和时间。
  11. 单击保存

如果要在其他对象中添加标头字段,请单击下一个对象的名称,然后重复步骤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?

最新更新