How to ignore CloudFront cache to retrieve new profile images?

0

Hi all,

In a web and mobile platform that I am developing, I currently store user profile images in AWS S3 and distribute them using CloudFrount. Every profile image is stored as "profile-image.png" under the specific user path (e.g. userid/profile-image). The image is retrived in the front end by calling the CloudFront distribution (e.g. "cloudfront-distribution-example.com/profile-image"). Whenever a user uploads a new profile image, the old one is replaced. However, the old image still shows due to the CloudFront cache and the url of the image being the same. How can I show the new uploaded image while keeping the name of the file (i.e. "profile-image")? Happy to discuss other alternatives.

Thanks in advance!

jesusER
asked a year ago629 views
2 Answers
1

Hi, There are 2 methods to solve this issue.

  1. Versioning (easy way to go)
  2. Cache invalidation (little complex)

Versioning: Each time a user uploads a new image, you change the base URL of the profile image. This way, the URL itself becomes unique, and CloudFront will not serve the cached version.

For example, you can use a version number or a timestamp in the base URL of the image like this:

  1. Old image URL: "cloudfront-distribution-example.com/v1/profile-image.png"
  2. New image URL: "cloudfront-distribution-example.com/v2/profile-image.png"

When the user uploads a new image, update the base URL accordingly in the frontend to fetch the new image.

Cache invalidation: Cache invalidation allows you to explicitly remove the cached object from CloudFront when a new image is uploaded. You can use the AWS Management Console or AWS SDK/API to trigger a cache invalidation.

For example, when the user uploads a new image:

  1. Save the image in S3 with a unique name: "profile-image.png?v=timestamp" or "profile-image.png?random-string"
  2. Trigger a cache invalidation for the CloudFront distribution, specifying the path of the old image ("profile-image.png") to clear it from the cache.

I would suggests to go for versioning, it is easy to implement and it will solve the purpose also. Whereas cache invalidation may have some limitations.

profile picture
answered a year ago
1

Hi, AWS simplest recommendation is to go with version number:

See https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/UpdatingExistingObjects.html

Updating existing files using versioned file names

When you update existing files in a CloudFront distribution, we recommend
 that you include some sort of version identifier either in your file names or 
in your directory names to give yourself better control over your content. 
This identifier might be a date-time stamp, a sequential number, or some 
other method of distinguishing two versions of the same object.

You can (if needed) sophisticate your workflow by using Lambda@Edge. If you wan to go on this path, I'd suggest you to have a deep read of https://aws.amazon.com/blogs/storage/modify-images-cached-in-amazon-cloudfront-using-amazon-s3-object-lambda/

Best,

Didier

profile pictureAWS
EXPERT
answered a year ago

You are not logged in. Log in to post an answer.

A good answer clearly answers the question and provides constructive feedback and encourages professional growth in the question asker.

Guidelines for Answering Questions