How to Manually Invalidate AWS CloudFront Cache?

Learn how to invalidate the CloudFront cache manually i.e. directly in the AWS management console.

ā€¢

How to Manually Invalidate CloudFront Cache

šŸŽÆ I want to keep this post short and to the point. So, we will not go into details of CloudFront and creating a CloudFront distribution but we will go directly into how to invalidate the cache in CloudFront using the management console. But before we see the HOW, letā€™s understand the WHY.

Why do we need to Invalidate CloudFront Cache?

šŸ” Now use this: ā€œInvalidating caching from CloudFront will remove the cached content from the edge locations.ā€

ā“ You might be wondering why we want to remove the cached content when we want it to be cached to reduce the latency.

šŸ¤” Yes, itā€™s true that we want to serve content to our end users as fast as possible, but we also donā€™t want to serve outdated content to them, right?

šŸ”„ So, whenever there is a change, we want our users to see the latest updates as quickly as possible. For this particular reason, we would invalidate the content from CloudFront.

šŸš« After invalidation, the viewer request for which the content isnā€™t currently in an edge cache ā€” is called a ā€œCache-Miss.ā€ In this case, CloudFront must get the object from your origin.

šŸŽÆ On the other hand, a viewer request for which the object is served from a CloudFront edge cache ā€” is called a ā€œCache-Hit.ā€

šŸ‘‰ Now, letā€™s learn the HOW part.

Steps to Invalidate CloudFront Cache Manually

Step 1: Access the CloudFront Console

  • šŸ”‘ Log in to your AWS Management Console.
  • šŸ” Navigate to the CloudFront service by searching for ā€œCloudFrontā€ in the AWS services search bar.

Figure ā€” Search CloudFront in AWS Management Console:

Step 2: Select Distribution

  • šŸ“Š In the CloudFront dashboard, youā€™ll find a list of your distributions.

Figure ā€” Showing CloudFront Distribution in AWS Console:

  • šŸ‘‰ Select the distribution for which you want to manually invalidate the cache by clicking on its ID.

Figure ā€” CloudFront Distribution:

Step 3: Invalidations Tab

  • šŸ“‘ Within the selected distributionā€™s details page, navigate to the ā€œInvalidationsā€ tab.

Figure ā€” Showing Past Invalidations:

Step 4: Create Invalidation

  • šŸ”„ Click the ā€œCreate Invalidationā€ button to initiate the cache invalidation process.

Figure ā€” Showing Create Invalidation Screen:

Step 5: Specify Paths

  • šŸ“ In the ā€œPaths to Invalidateā€ field, youā€™ll need to specify the files or paths that you want to invalidate.
  • For example, letā€™s say you want to invalidate all the images in a specific folder: /images/*.
  • You can also use wildcard characters (_) to invalidate multiple files or paths, like: /_.html to invalidate all HTML files.

Step 6: Initiate Invalidation

  • šŸš€ After specifying the paths, click the ā€œInvalidateā€ button to kick off the invalidation process.

Figure ā€” Showing object path /index.html to remove from CloudFront Cache:

Step 7: Monitor Invalidation Status

  • šŸ“‹ Youā€™ll be directed to the list of invalidations, where you can monitor the status of your invalidation request.

Figure ā€” Showing Invalidation in Progress for /index.html:

  • ā³ Keep in mind that it might take some time for the cache to be fully invalidated across all CloudFront edge locations.

Figure ā€” Showing Invalidation is completed:

Step 8: Verification

  • šŸŽ‰ Once the invalidation status shows as ā€œCompleted,ā€ you can verify the cache invalidation by accessing the URLs you specified.
  • šŸ”„ CloudFront will now fetch fresh content from your origin server for the invalidated paths.

Example:

šŸ“š Letā€™s consider a scenario: You have a CloudFront distribution serving static assets for your website, and youā€™ve recently made changes to your CSS files. To ensure that your users see the most up-to-date styles, you decide to manually invalidate the cache for all CSS files. Hereā€™s how you can do it:

  1. Access the CloudFront Console.
  2. Select your distribution.
  3. Go to the ā€œInvalidationsā€ tab.
  4. Click ā€œCreate Invalidation.ā€
  5. Specify the path as /*.css.
  6. Initiate the invalidation.
  7. Monitor the invalidation status until itā€™s completed.
  8. Visit your website and observe the updated styles fetched from the origin server.

āš ļø Keep in mind that cache invalidation may take some time. Itā€™s essential to exercise caution with invalidations, as excessive use can impact your distributionā€™s performance and increase the load on your origin server.

All Done! šŸ‘ We are all set.

Feel free to share your thoughts or ask questions and connect with me on LinkedIn šŸ‘©ā€šŸ’»

Enjoyed this article?

Share it with your network to help others discover it

Continue Learning

Discover more articles on similar topics