Menu
I'm hosting a static website in S3 and using Cloudfront to cache files. I've essentially got 3 files with the following headers:
My html file uses query string parameters that get updated every time I update my css or js files. I've configured s3 to pass these parameters through and I've verified that it works to invalidate cached resources. My index.html file looks something like this:
<html> <head> ... <link rel="stylesheet" href="app.css?v=14113e2c764"> </head> <body> ... <script src="app.js?v=14113e2c764"></script> </body> </html> It seems to work great as I push updates all day, but when I come in the next morning and push my next change, The index.html file is out of date. Instead of having the correct ?v= parameter, it has the old one! The only way to fix it is to invalidate the html file manually. Then everything works for the rest of the day. The next day I have the same problem again.
What's going on here?
638
If your CloudFront distribution isn't caching based on the custom values that you set on cache behaviors, then check the origin. Verify whether the origin has any conflicting caching headers.
Short description. By default, CloudFront caches a response from Amazon S3 for 24 hours (Default TTL of 86,400 seconds). If your request lands at an edge location that served the Amazon S3 response within 24 hours, then CloudFront uses the cached response. This happens even if you updated the content in Amazon S3.
You can add a Cache-Control header to your CloudFront instance without the use of functions. Go to Policies -> Response Headers and click on "Create response header policy" under custom policies.
Invalidation usually takes about 10-15 minutes, depending on the size of the request. You can check invalidation status using Invalidation Batches Monitor.
Verify that the CloudFront distribution's Minimum TTL is set to 0. If it's set to any other value, CloudFront won't respect the no-cache header and will still cache the file for the Minimum TTL. More details about the caching directives can be found here:
http://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/Expiration.html
If this doesn't help, try to debug the actual HTTP request for index.html and post the response headers here so we can have a look at them.
Also, instead of using no-cache for the index.html file, you can try using
public, must-revalidate, proxy-revalidate, max-age=0
This will allow CloudFront to store the file on the edge location, but it will force it to revalidate it with the origin with each request. If the file hasn't changed, CloudFront will not need to transfer the file's entire content from the origin. This can speed up the response time, especially for larger files.
64
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
