Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Amazon s3 static web hosting caching

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?

like image 603
Mattan Bitner Avatar asked Mar 01 '17 12:03

Mattan Bitner


People also ask

Does AWS S3 have cache?

AWS Elemental MediaStore is a caching and content distribution system specifically built for video workflows and media delivery from Amazon S3. MediaStore provides end-to-end storage APIs specifically for video, and is recommended for performance- sensitive video workloads.

Can Amazon S3 run a static website?

After you create a bucket, you can enable static website hosting for your bucket. You can create a new bucket or use an existing bucket. Sign in to the AWS Management Console and open the Amazon S3 console at https://console.aws.amazon.com/s3/ .

Can you host dynamic websites on S3 what about Static websites?

For hosting a dynamic website on AWS, you need to use EC2 product. S3 is only used for storage and static website hosting. Other than EC2, you can also use Lightsail, which is basically a VPS. For hosting on EC2, you will need to launch an empty and install LAMP or any PHP based stack you have on the server.

Which AWS service or tool reduces latency for static websites running on AWS?

Lambda@Edge is a feature of Amazon CloudFront that lets you run code closer to your users, which reduces latency, improve performance, and allows you to programmatically modify the requests or responses that CloudFront handles.


2 Answers

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.

like image 87
D. Woods Avatar answered Oct 07 '22 08:10

D. Woods


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 "/*" 
like image 37
Sean W Avatar answered Oct 07 '22 07:10

Sean W