Static frontend website requires consistent update to the webpages as the website grows, so a classic cloud native static web content is served ususally by files uploaded to an Amazon S3 bucket which is accessed via cloudfront. A typical issue with static content is some might notice that the old version of webpage still appears when you visit your website though when there is new content is updated. This happens because of caching.
To fix this, you need to perform a CloudFront Invalidation. This guide will walk you through the process step-by-step, ensuring your audience always sees the most recent version of your content.
What is S3 Object Invalidation?
Before we dive into the "how," let's look at the "why."
When you use Amazon S3 to store files and Amazon CloudFront to deliver them, CloudFront stores copies of your files in "Edge Locations" around the world. This makes your website fast because the data is physically closer to your users.
However, CloudFront will keep that copy until it expires (often 24 hours or more). If you upload a new version of webpage to S3, CloudFront won't know it changed. So therefore Invalidation tells CloudFront to delete its cached copies and fetch the brand-new version from S3 immediately.
Step-by-Step: How to Invalidate a File
Follow these steps to refresh your content across the web.
- Access the CloudFront Console Sign in to your AWS Management Console.
In the search bar at the top, type CloudFront and select it from the services list.
- Select Your Distribution You will see a list of "Distributions" (these are the bridges between your S3 bucket and the web).
Locate and click on the Distribution ID associated with your website
- Create the Invalidation Click on the Invalidations tab in the top menu.
Click the orange Create invalidation button.
- Define the Object Path In the "Object paths" box, you need to tell AWS exactly which file to clear.
Important: Do not paste the full website URL. Only paste the path that comes after the domain name.
Example: If your file is at https://example.com/restaurant/dinner.pdf, you should enter:
/restaurant/dinner.pdf
Click Create invalidation at the bottom of the page.
Key Points to Remember
Leading Slash: Always start your path with a forward slash /.
Wildcards: If you want to clear an entire folder, you can use an asterisk, such as /restaurant/*.
Timing: Invalidations usually take 1–3 minutes to process globally. Once the status changes from "In Progress" to "Completed," your new file is live!
Additional Resources
For more technical details on how web caching works and advanced invalidation patterns, refer to the official AWS documentation:
Top comments (0)