Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CloudFront with S3 website as origin is not serving gzipped files

AWS now supports gzipping files through CloudFront

I've followed along with all of the instructions in Serving Compressed Files, and yet gzipping is not working.

I have an S3 bucket set up as a website that CloudFront is using as the origin.

  • Compress Objects Automatically is enabled
  • I am serving files with the correct content types such as application/javascript and text/css
  • The files are within 1,000 and 10,000,000 bytes
  • The S3 website serves the files with a Content-Length as far as I know
  • To be extra sure nothing was cached, I both invalidated the entire S3 bucket and uploaded newer versions of the files to S3.
  • Additionally, the web browser I am using, Chrome, does accept gzipped files.

Despite all this, I can't get gzipping to work. I have gotten everything else including SSL working perfectly, and you can visit the site here: https://formulagrid.com/

If you open up the chrome console, you'll notice that none of the files being served from S3 are being gzipped. The only gzipped files such as the google font are the ones I'm grabbing from other CDNs.

like image 847
m0meni Avatar asked Feb 23 '16 23:02

m0meni


People also ask

Can CloudFront serve both compressed and uncompressed files?

CloudFront doesn't compress the object again. If the origin returns an uncompressed object to CloudFront (there's no Content-Encoding header in the HTTP response), CloudFront determines whether the object is compressible.

How do I enable gzip compression in CloudFront?

Enabling Gzip Compression You can enable this feature in a minute! Simply open up the CloudFront Console, locate your distribution, and set Compress Objects Automatically to Yes in the Behavior options: To learn more, read about Serving Compressed Files.

Can CloudFront serve content from non AWS origin server?

Does Amazon CloudFront work with non-AWS origin servers? Yes. Amazon CloudFront works with any origin server that holds the original, definitive versions of your content, both static and dynamic. There is no additional charge to use a custom origin.

Which can be used as an origin server in CloudFront?

You can use several different kinds of origins with CloudFront. For example, you can use an Amazon S3 bucket, a MediaStore container, a MediaPackage channel, an Application Load Balancer, or an AWS Lambda function URL.


1 Answers

I hit the same error today and solved it by adding a CORS rule to the S3 bucket. This rule ensures the Content-Length header is sent to Cloudfront so content can be gzipped:

S3 > Bucket > Permissions > CORS Configuration

<?xml version="1.0" encoding="UTF-8"?> <CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">     <CORSRule>         <AllowedOrigin>*</AllowedOrigin>         <AllowedMethod>GET</AllowedMethod>         <MaxAgeSeconds>3000</MaxAgeSeconds>         <AllowedHeader>Authorization</AllowedHeader>         <AllowedHeader>Content-Length</AllowedHeader>     </CORSRule> </CORSConfiguration> 

Credit goes to Robert Ellison: http://ithoughthecamewithyou.com/post/enable-gzip-compression-for-amazon-s3-hosted-website-in-cloudfront

As far I know, this seems to be an undocumented requirement.

like image 158
Rodrigo Avatar answered Sep 20 '22 18:09

Rodrigo