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

Question

So, I hosted an angular app on s3 with a cloud drive. I am doing a file update (using grunt filerev) to make sure that I never get outdated content. But how should I change the index.html file. Its necessary because all other files reference index.html.

I configured my bucket to use as a static site. So it just picks up index.html when I refer to the bucket in the url.

Cloudfront says you should set min TTL to 0, so it will always delete the source code to serve the content. But I do not need this, because I am checking the files of all my files (except index.html). I can use cdn caching for these files.

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

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

But this is not reflected after loading on s3. Do I need to explicitly specify headers on s3 using s3cmd or dashboard? And does it need to be done every time index.html changes and I load it?

I know that I can invalidate a single file using cmd, but its a repeating process. It would be great if he could take care of himself by simply deploying to s3.

Answer 1

Although the accepted answer is correct if you are using s3cmd, I used the AWS CLI, so I made the following two commands:

First, for the actual deployment of 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

Answer 2

Answering my question. I am deploying my site to S3 using the s3cmd tool , and there is an option that you could provide to invalidate the CloudFront cache of all modified files (diff between your dist folder and S3 bucket). This invalidates the cache of all files, including the index file. It usually takes about 15-20 minutes to reflect new changes in production.

Here is the command

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

^{Note. On macOS, you can install this tool with: brew install s3cmd .}

Hope this helps.

Answer 3

You can automate the process using Lambda. It allows you to create a function that will perform certain actions (object invalidity in your case) in response to certain events (new file on S3).

More information here: https://aws.amazon.com/documentation/lambda/

Answer 4

If you use s3cmd sync and use the --cf-invalidate option, you may need to specify --cf-invalidate-default-index depending on your installation.

On the man page:

When using the static website, Custom Origin and S3 invalidate the default index file.

This will also ensure the invalidity of your index document, most likely index.html, which would otherwise be skipped regardless of whether it is updated or not through synchronization.

Answer 5

When synchronizing a local directory with s3 you can do this:

 aws s3 sync ./dist/ s3://your-bucket --delete aws s3 cp \ s3://your-bucket s3://your-bucket \ --exclude 'index.html' --exclude 'robots.txt' \ --cache-control 'max-age=604800' \ --metadata-directive REPLACE --acl public-read \ --recursive 

The first command is just normal synchronization, the second command allows S3 to return cache control for all files except index.html and robots.txt .

Then your SPA can be fully cached (except index.html ).

Answer 6

The real question is why you have to do all this to make something so simple that most other providers / solutions use a graphical user interface and a simple dot and click. That is why I prefer not to use S3 unless my client requires it. Garbage.