Fix CloudFront Serving Old Images After S3 File Replacement

Problem Overview

You have just replaced an image in your AWS S3 bucket using the same file name and path, expecting the updated version to reflect instantly on your website. However, when the site loads, the CloudFront URL continues to serve the old image, even though the updated image is correctly stored in the S3 bucket.

So why is the image not updating when serving on cloudfront?

In the image below, you’ll see how the S3 URL shows the updated image, but the CloudFront distribution still delivers the outdated one.

the s3 url shows the updated image

the cloudfront url still shows the old image

The Obvious Solution would be:

• Clearing Browser Cache: This would not work in this case.

• Renaming the objects : This means you will need to update references across your code base, a process that can be frustrating, time-consuming and error-prone, especially if the object is used in multiple places.

• Short TTL : Time to Live (TTL) defines how long CloudFront caches your content before checking for a new version from the origin (like your S3 bucket).

  Setting a short TTL ensures updates are picked up faster, reducing the chance of serving stale content. However, this also increases the number of requests made to the origin even when no changes have been made which can reduce performance and raise costs due to higher origin load.

The real issue? CloudFront doesn’t know you’ve updated the file, unless you tell it.

This happens because Amazon CloudFront, by default, caches content to improve performance. So when a user requests a file (like an image), CloudFront serves the cached version instead of fetching the latest one from S3 even if the original file has been replaced. To fix this issue you will either have to invalidate the cache or wait for the Time to Live (TTL) to expire.

What is Cloudfront Invalidation?

Cloudfront Invalidation is the process of telling AWS CloudFront to remove cached files from its edge locations before they expire. it simply tells it to “Forget what was cached for a particular file and fetch the latest version from the origin”.

Use CloudFront invalidation to explicitly remove old files from the cache.

You can perform invalidations through the AWS Console, the AWS CLI, or using any Infrastructure as Code (IaC) tool. In this article, we’ll focus on using both the AWS Console and the CLI.

1. Using AWS Console

• Go to the CloudFront section in the AWS Console and select the distribution that serves your S3 bucket (as the origin).

  

• Go to the Invalidations tab of the selected distribution and click on “create an invalidation“

  

• Specify the object path and click on “Create Invalidation”.

  CloudFront invalidations must match the CloudFront URL structure not the S3 bucket structure.

  

• After a succesful invalidation, you can run test to check if the cloudfront url shows the updated image.

  

• The result shows that CloudFront cache was successfully invalidated, and now it's serving the updated image from the S3 origin.

  

2. Using the AWS CLI

• Find the distribution ID of your cloudfront distribution

     aws cloudfront list-distributions
  

  

• Run the Invalidation Command on the specific files.

      aws cloudfront create-invalidation \
          --distribution-id YOUR_DISTRIBUTION_ID \
          --paths YOUR_OBJECT_PATH
  

  

• After running the invalidation, you can check its progress. If status shows as completed, this means the invalidation was successful.

    aws cloudfront get-invalidation \
      --distribution-id YOUR_DISTRIBUTION_ID \
      --id INVALIDATION_ID
  

  

• And on refreshing the cloudfront URL, we can see the updated image.

  

In conclusion, whether you're working on static websites, image hosting, or real-time file updates, understanding how to properly use CloudFront invalidation ensures your users always see the most up-to-date version without needing to rename files or compromise on caching.