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

Question

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 1

Although the accepted answer is correct if you are using s3cmd, I was using the AWS CLI, so what I did was the following 2 commands:

First, to actually deploy the code:

aws s3 sync ./ s3://bucket-name-here/ --delete

Then, to create an invalidation on CloudFront:

aws cloudfront create-invalidation --distribution-id <distribution-id> --paths /index.html