How to ignore CloudFront cache to retrieve new profile images?

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.

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