Rails 3.2 + Heroku + S3 + CloudFront: Not serving gzip css js

Question

I am running Rails 3.2 with assets_sync.

A gz version of my css and js are created. CloudFront is not serving the gzip version even though the header requested for gzip,deflate.

I also tried config.gzip_compression = true in asset_sync.rb but CloudFront is still serving the uncompressed version. I have confirmed that I can access ABC.cloudfront.net/XYZ.css.gz

Answer 1

Is the origin for your CloudFront distribution an S3 bucket? If so, the problem is that S3 doesn't handle the Accept-Encodings header correctly: https://github.com/rumblelabs/asset_sync/issues/153

There are some potential solutions outlined in that issue. You can either serve gzipped files by default, since most browsers (excluding some mobile browsers) will handle it correctly, or you con try the solution outlined here.

Another possible solution is to use a Varnish cache layer as the custom origin for your CloudFront distribution:

Internet -> CloudFront -> Varnish -> S3 Bucket

As a request comes in to CloudFront, it will be forwarded to Varnish if it hasn't been cached in CloudFront, yet. Varnish will grab the uncompressed file from the S3 Bucket, compress it as the headers dictate, and send the file back to CloudFront for caching.