Amazon s3 static web hosting caching

Question

I'm using Amazon S3 webhosting for my static html,js,css (etc..) files. After replacing my index.html file, I still get the old version when consuming via the browser. I would like to set a default ttl to the bucket (and not to specific objects in it). I found this link: http://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/distribution-web-values-specify.html#DownloadDistValuesDefaultTTL

but can't find the "Object Caching" setting in the dashboard. can someone point out where it is?

Answer 1

Here's an Amazon S3 link that answers your question. According to Amazon, you can't set the cache control header for the entire bucket unless you use a third party tool (that page links to a few). One tool I ran across describes how to set the cache directives for objects submitted using a PUT request (or in bulk using their tool). See BucketExplorer for more info.

Here is a cut-paste of Amazon's instructions (since S.O. doesn't like to rely on external links that might change or disappear):

To add a Cache-Control or Expires header field to Amazon S3 objects using the Amazon S3 console

1. Sign in to the AWS Management Console and open the Amazon S3 console at https://console.aws.amazon.com/s3.
2. In the Amazon S3 console, in the buckets pane, click the name of the bucket that contains the files.
3. In the list of objects, select the first object to which you want to add a header field.
4. Click Actions and click Properties.
5. In the right pane, expand Metadata.
6. Click Add More Metadata.
7. In the Key list, click Cache-Control or Expires, as applicable.
8. In the Value field, enter the applicable value:
9. For a Cache-Control field, enter: max-age=number of seconds that you want objects to stay in a CloudFront edge cache
10. For an Expires field, enter a date and time in HTML format.
11. Click Save.

If you want to add a header field to additional objects, click the name of the next object, and repeat steps 5 through 9.

Answer 2

2022 AWS CLI V2 Method

The simplest way to achieve this is to use AWS CLI (S3). This can also be automated entirely for free using a tool like GitHub actions.

A static site should not have the cache-control set to a long-lived value on HTML files because the users will not see the updated version until the browser cache expires or manually busts their cache.

---

Due to AWS CLI restrictions, you have to do the following to set the cache for the whole bucket.

---

Generic Example

Upload the content and --delete old S3 content, and set cache-control on all content.

aws s3 sync [YOUR_LOCAL_SOURCE_CODE_PATH] s3://[BUCKET_NAME] --delete --cache-control max-age=31536000

Recursively remove cache-control headers from all HTML files and set the file back to type 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

---

Notes

• TO_BUCKET_NAME is almost always the same as BUCKET_NAME
• If you modify an HTML file's metadata in AWS S3, you must also set the content-type, or it will automatically be set to a generic type causing the browser to download the file instead of rendering it in the browser.

---

Example

// 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 "/*"

Answer 3

If you use AWS CLI you can add --cache-control or --metadata directive per synced object

Here are my npm scripts:

 "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"
  },

Answer 4

Yes. In case you are using the CloudFront Distribution - you just need to check your invalidation and why your object invalidation didn't work properly. What is TTL value.

Do you use CDN?