Open Source AWS S3 and CloudFront Site-Manager

Ever wanted a simple, affordable and feature-rich hosting for your custom domain? AWS S3 + Cloudfront combined is a great static site hosting solution, but can be troublesome to setup. You need to setup the S3 correctly, configurable Cloudfront, worry about best practices such as site redirection, sync file and invalidate Cloudfront for update, etc. These are just too troublesome for hosting a static sites, so we open-sourced our tool AWS-site-manager. AWS Site Manager is a simple command-line tool which makes hosting a static website with AWS S3 and CloudFront in best practices really simple.

AWS-s3-cloudfront-open-source

Combining AWS S3 and CloudFront to save you time

AWS-site-manager does 2 things:

1. Create the S3 and CloudFront with opinionated configuration:

  • Create S3 buckets
  • Configure CloudFront Distribution and set up CNAME
  • Upload and set custom HTTPS certs
  • Redirect www to naked domains for better SEO
  • Redirect HTTP to HTTPS for better SEO (if HTTPS is enabled)
  • Set up IAM / let’s encrypt cert automatically (coming soon)

2. Sync a local folder with S3

  • Gzip files for speed of the site
  • Sensible default for HTTP Header (correct MIME type, max-age=900, etag etc)
  • Invalidate CloudFront Distribution for files synced

Why use S3 and CloudFront for static sites?

  • Affordable pricing and feature rich (compared to free Heroku which shuts down with inactivity, or github.io which doesn’t support HTTPS with custom domains)
  • Speed (CloudFront is a cheap, but okay CDN)

Install it

Download the binary for Linux / Mac / Windows release here

Compile from sources: If you have Go 1.6 or above installed, run the following command:

How to use

1. Set up AWS Credentials and config.

If you haven’t set up AWS credentials on your environment before, you can set it up by putting the following lines in ~/.aws/credentials.

And in ~/.aws/config

You should also set the environment variable of AWS_SDK_LOAD_CONFIG
If you’re on Linux / Mac using bash put the following line in ~/.bashrc

You can read more about AWS CLI set up on its official documentation.

2. Use it!

Assuming you’re going to set up a website example.com and www.example.com, you can:

The command above will

  • set up a S3 bucket example.com and www.example.com
  • sync all files in local folder
  • redirect www.example.com to example.com

If you want to use https, and have the cert in PEM format ready, run the following command instead to setup HTTPS. (if your SSL registry sent you .key / .crt, read this)

After setting up the code above, you would need to set up Route53 or your DNS Manager to the CloudFront Distribution endpoint.

If you need to update the site, just run aws-site-manager sync –domain example.com In the folder and the command will compare the file changes, upload new files to S3, and invalidate the cache of Cloudfront for you.

What’s next?

AWS-site-manager is in its preliminary stages. Feel free to create issues if you run into any problems; Feel free to send Oursky pull requests. Also, here are a list of things I’m working on:

  • Support using gzip on cloudFront instead of S3
  • Remember config so next time you can just run aws-site-manager sync on the local folder
  • Better control on HTTP header, Custom page for Error code
  • Support using Let’s Encrypt free SSL cert or ACM cert
  • Automatically configure Route-53 too

Enjoy!

PS: My company’s also working on another open-sourced project called Skygear.io, which is a free BaaS that includes features such as chat, social networks, bots, social logins, real-time and offline data sync, CMS for mobile, user management, etc.

3 Comments

  1. All i can say is WOW.

    I desperately want to use s3 and cloudfront for my dozens of sites but setup time has been prohibitive. This changes everything! Would also be interested in learning about gzip as opposed to S3….

    • Glad you like it!

      Regarding gzip on S3, it is there to optimize the load time of static website by compressing the response. It is there since S3 won’t compress the http response with gzip by default (in contrast most web server like Apache / nginx have the options).

      Cloudfront now have an option to compress response with gzip automatically, but I haven’t test how it works yet, will see if that should be another option for aws-site-manager

  2. Nice Article. How it help to developer in terms of balance the day to day life.

Leave a Reply

Your email address will not be published.

*

© 2017 Oursky Code Blog

Theme by Anders NorenUp ↑