CloudFront Continues to Serve Old Content After Invalidation and S3 Update

There are 4 ways to control how long CloudFront caches S3 content: 1. Set maximum TTL, 2. Implement content versioning, 3. Specify cache-control headers, 4. Use CloudFront invalidation requests.

By default, CloudFront caches files in edge locations for 24 hours. Best practice is to include a unique version identifier either in your file names or in your directory names. It can be a timestamp, a sequential number, or any other way that allows you to distinguish between two versions of the same file. For example, instead of banner.jpg, call it banner_20170401_v1.jpg. When you update the image, name the new version banner_20170612_v1.jpg and update all files that need to link to the new image. Another option is to manage CloudFront expiration behavior by specifying Cache-Control headers for your website content. If you keep the Minimum TTL at the default 0 seconds, then CloudFront honors any Cache-Control: max-age HTTP header that is individually set for your content. If an image is configured with a Cache- Control: max-age=60header, then CloudFront expires it at the 60 second mark. This gives you more precise control over content expiration for individual files.

See: Adding, removing, or replacing content that CloudFront distributes

Invalidation requests aren’t immediate. It takes several minutes from the time you submit one to the time that CloudFront actually expires the content. In addition, CloudFront lets you specify which content should be invalidated: You can choose to invalidate your entire Amazon S3 bucket, individual files, or just those matching a wildcard pattern.

Best practice is to understand and use the four approaches together. If possible, implement content versioning. It gives you the ability to immediately review changes and gives you the most precise control over the CloudFront and Amazon S3 experience. Set the Minimum TTL to be 0 seconds and the Maximum TTL to be a relatively low value. Also, use ode>Cache-Control headers for individual pieces of content. If your website is infrequently updated, then set a large value for Cache-Control:max-age=<seconds> and then issue CloudFront invalidation requests every time your site is updated. If the website is updated more frequently, use a relatively small value for Cache-Control:max-age=<seconds> and then issue CloudFront invalidation requests only if the Cache-Control:max-age=<seconds> settings exceeds several minutes.

See: Controlling how long Amazon S3 content is cached by Amazon CloudFront

Great article on real-world examples of how to implement “tiered TTL” expiration using versioning together with the right cache strategy using HTTP headers: Host Single Page Applications (SPA) with Tiered TTLs on CloudFront and S3

Did this help you resolve the issue?