gzip compressed assets on S3 with Travis?

Question

We're trying to deploy minified and compressed js and css to s3 with travis. Gulp creates a file main.bundle.js.gz which is properly uploaded to s3, but the site shows me a 404 on main.bundle.js.

Travis doesn't seem to give much option except 'content-encoding'. Anything else we need to take care of to make this work? The source in html remains .css and .js, not .js.gz?

https://docs.travis-ci.com/user/deployment/s3/#Setting-Content-Encoding-header

Answer 1

I just spent a bunch of time working on this myself, and finally figured out a solution. It's pretty simple, but there's a lot of old information on the internet that makes it seem more confusing.

Here's what worked for me:

• Build and minify my site files during the Travis build step, but don't compress them. In my case, this is just running npm run build in the script step.
• Use the Travis S3 deploy plugin to upload the minified files to my S3 bucket.
• Place a CloudFront distribution in front of the S3 bucket, with compression turned on.
• Any client that requests with Accept-Encoding: gzip will get the gzipped version.

This is basically letting CloudFront handle the problem of compressing the files for you. It works well!

Here's the relevant parts of my .travis.yml:

script: npm run build
deploy:
  provider: s3
  access_key_id: <id>
  bucket: s3-bucket
  skip_cleanup: true
  local_dir: staging