Nirav Gandhi Nirav Gandhi - 25 days ago 14
HTML Question

How do you invalidate cache of index.html for a static site hosted on S3 with cloudfront?

So I have hosted my angular app on s3 with a cloudfront dist. I do file revision-ing (using grunt filerev) to make sure that I never get stale content. But, how should I version the index.html file. Its required because all other files are referenced inside index.html.

I have configured my bucket to be used as a static site. So it just picks up the index.html when I reference the bucket in url.

Cloudfront says that you should set min TTL to 0, so it would always hit origin to serve the content. But, I don't need this since I am doing file revisioning of all my files (except index.html). I can take advantage of cdn caching for these files.

They also say that in order to invalidate a single object, set the max-age headers to 0. I tried adding following to my index.html

<meta http-equiv="Cache-Control" content="public, must-revalidate, proxy-revalidate, max-age=0"/>


But this does not reflect once you upload on s3. Do I need to explicitly set headers on s3 using s3cmd or dashboard? And do I need to do this every time when index.html changes and I upload it?

I am aware that I could invalidate a single file using cmd but its a repeating process and It would be great if it can take care of itself just by deploying on s3.

Answer

Answering my own question. I deploy my site to s3 using s3cmd tool and there is an option you could provide to invalidate cloudfront cache of all the files changed (diff between your dist folder and s3 bucket). This invalidates cache of all the files changed including index file. It usually takes around 15-20 mins to reflect the new changes on production.

Here is the command

s3cmd sync --acl-public --reduced-redundancy --delete-removed --cf-invalidate [your-distribution-folder]/* s3://[your-s3-bucket]

Hope this helps.

Comments