Some time ago, I launched a static website using CloudFront and S3. When the site was updated, however, the recent changes were not visible 🥲, and showing me the old content continuously. 🧐
After a bit of panic 🤣 , I found out that the old files were still cached on the CloudFront.
The main advantage of using CloudFront is to get your files from a source (S3 in this case) and store it on edge servers to respond to GET requests faster. CloudFront will not go back to the S3 source for each HTTP request.
To have CloudFront serve the latest files/objects, we need to invalidate objects in the CloudFront distribution cache. Or, set object expiration dates on S3 objects.
In this article, let’s see how to invalidate objects in the CloudFront distribution cache 🙌🏼
1. Go to your AWS CloudFront console and click on the CloudFront distribution you want to invalidate.
2. Click on the invalidations tab then click on “Create Invalidation”
Cloudfront allows you to remove one or multiple files from all edge locations prior to the expiration date set on those files.
The invalidation feature is helpful in unexpected circumstances, for instance, an occasional update to your website’s CSS file, in which you need to remove the file from AWS CloudFront.
3. Create Invalidation
In the object path text field, you can add a specific file; index.html or just use the wildcard (/*) to invalidate all files. It will pull all the latest files from S3.
Once you filled in the text field click on “Invalidate”, after CloudFront finishes invalidating you’ll see your changes the next time you go to the web page.
Note: You can also use AWS cli for invalidation.
aws cloudfront create-invalidation — distribution-id <your distribution id> — paths “/*”The /* will invalidate every file inside S3, replace that with specific files if you only updated a few.
More on AWS invalidation via AWS cli: https://docs.aws.amazon.com/cli/latest/reference/cloudfront/create-invalidation.html
Note: You can also add invalidation rules to the GitHub actions file if you have set up one as well.
So, there it is, simple steps to clear CloudFront cache and show your latest updates! 🥳
Thank you for reading! 🙏🏼 Hope this article helped anyone in need ❤️
