Invalidating files in CloudFront

Problem

After updating web content in S3 bucket, the page is was not reflected because CloudFront has file cache (for 24 hours by default).

The file path is:

1
2
3

./index.html
./error.html
./css/style.css

Solution

Ref.

• AWS CloudFront - Developer Guide - Invalidating Files
• CloudFront が、Amazon S3 から古いコンテンツを提供し続けるのはなぜですか?

The document suggests 2 ways to update(invalidate) the cache on CloudFront.

• Invalidating Files
• Using Versioned File Names

While the document recommends to use “Using versioned file names” for frequent update, I do not update the static front page and want to avoid using versioning in such simple page (only have index.html and error.html). So, I select “Invalidating Files”.

Invalidating files using console

Ref. Invalidating Files Using the Console

1. Sign in to the AWS Management Console and open the CloudFront console

2. Select the distribution for which you want to invalidate files.

3. Choose Distribution Settings.

4. Choose the Invalidations tab.

5. Choose Create Invalidation.

6. For the files that you want to invalidate, enter one invalidation path per line.

   • Wildcard("*") can be used, but the object path needs to end by wildcard.
   • see Specifying the Files to Invalidate

   At this time, I added below for updating ./index.html.

   1

   /*

7. Choose Invalidate.

After few seconds, invalidations status gets “Completed” and CloudFront displayed updated content.

References

• AWS CloudFront - Developer Guide - Invalidating Files
• CloudFront が、Amazon S3 から古いコンテンツを提供し続けるのはなぜですか?