CSS Files not getting updated on Cloudfront

Question

Been having this problem with my website not displaying updated CSS files.

The last time I had this problem, I ended up erasing my S3 bucket and CloudFront distribution, and re-creating the whole bucket & distribution with new names. Now the problem is re-occuring. Whenever I make changes to the site's CSS file, the files on the CloudFront is not updated. If I type in the file path manually, I can see that the CSS file has been updated on the S3 storage, but not on the CloudFront end.

So the file from S3 is not synchronized on the CloudFront. Any help is appreciated. Right now the only way I can make the site appear correctly is by turning off CDN/CloudFront.

I'm using Wordpress 2.9 with W3 Total Cache plug-in. I don't think that the problem is on the Wordpress and the Total Cache plug-in, as they did their job to upload the updated CSS file into S3 storage.

I did try waiting out for ~24hours, perhaps it is a cache issue somewhere, but apparently not.

Thanks.

Answer 1

If anyone else is having the same problem, here is how to solve it.

This is how my website runs at the moment:

Pair.com web hosting --> Amazon S3 --> Amazon CloudFront (CDN)

The Wordpress installation is on Pair.com's hosting. When I make a change, the W3TC plug-in will update the file on the S3 server. Otherwise you can also upload the file manually to the S3 server using Amazon Web Services' Web console, or third party programs (I use S3 Organizer). The problem is when it comes to updating the same file in the CloudFront. There is no manual way of doing it, and CloudFront only updates once every 24 hours.

What you can do is to send an invalidation request to CloudFront. After the invalidation request is accepted, the new version file will be fetched from S3, and problem is solved.

The simplest way to do invalidation is using 3rd party S3 explorers. At the moment, only Bucket Explorer and CloudBerry has the feature. If you want to do it without the help of those programs, here is a document in Amazon.com that will teach you how to do it: http://docs.amazonwebservices.com/AmazonCloudFront/latest/APIReference/Actions_Invalidations.html

CraigH@AWS said that they're working to implement the Invalidation command into the AWS web console, but have no exact date on when the feature will be online.