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