Can someone walk me through serving gzipped files from Cloudfront via S3 origin?

Question

I've been through quite a few suggestions given on this topic from other posts on Stackoverflow, but I'm still not successfully getting it to work.

The website origin is on S3, it is being served via Cloudfront. Going through the other posts and Amazon docs, I'm seeing suggestions such as:

1) Gzip the necessary files, remove the.gz from the files name, but on uploading, still set the meta to gzip. This isn't working for me. Safari just downloads the gzipped file(s) instead of serving as a webpage.

2) Amazon docs suggest uploading both a gzipped and none-compressed version of the file, but it makes no reference as to how that works. For example, do you link to both style.css and style.css.gz in the sites html? If so, is that not defeating the object of gzipping to speed up the site as it seems two requests would be made instead of one?

Also, when you set the document Cloudfront is meant to retrieve, eg index.html, if you have both a gzipped and non-compressed file, which do you set as the document to retrieve? When I set the document as index.html.gz, the browser again just downloads the file.

I'm getting speed ratings in the 70-80% margins, which, fair does could be worse, but it could be better too. I'm not a beginner, but I'm a million miles away from being an expert at this stuff, so I'm hoping I can get a step by step walk through on here. There must be something I'm not getting quite right.

Thanks in advance for any help.

Answer 1

The process should look like this:

• gzip the file locally (it should then be called index.html.gz )
• remove the .gz extension (file is now called index.html but content is gzipped)
• upload the file to S3
• in the metadata tab for the file in the S3 management console set the correct Content-Type based on what file it is and
• set Content-Encoding to gzip

When linking to a gzipped stylesheet in your HTML markup just specify the name without the .gz extension.

A great site to test if the configuration works is http://gzipwtf.com/

Also don't forget to invalidate the CloudFront cache if the file you're trying it out with is cached.

edit:

To not fiddle around with this stuff by hand all the time I suggest you automate the process of uploading and setting headers in some kind of build process. s3_website is a nice Ruby gem to get started but there are other command line tools or Grunt plugins available as well.

Answer 2

I don't know much about the Cloudfront part but for gzipping, you can also use a Python Lambda function. With the gzip library, it could be pretty easy:

gzipped_content = gzip.compress(f_in.read())
destinationbucket.upload_fileobj(io.BytesIO(gzipped_content),
                                                        final_file_path,
                                                        ExtraArgs={"ContentType": "text/plain"}
                                                )

There's a full tutorial for the lambda function here: https://medium.com/p/f7bccf0099c9

You can also set up an event trigger, such that the conversion happens everytime a new file is uploaded to S3.