AWS S3 CloudFront Static Website

Amazon Web Services (AWS) S3 with CloudFront CDN for a Static Website

A recent requirement to host a simple one page site I looked into what AWS had to offer in this realm. My requirements for hosting included:

1. A simple hosting solution, not complex multiple Virtual Servers.
2. Inexpensive.
3. Content Delivery Network (CDN) for speed.
4. The ability to use my own DNS provider to setup a sub-domain for this site.
5. Explore possible SSL options.

After some research I found Hosting a Static Website on Amazon Web Services page, this ticked most of my boxes. Below is my journey to set this awesomeness up!

Create a S3 Bucket

1. Assuming you have already signed up to AWS, then login to your AWS Console
2. Select S3, then click the blue Create Bucket button top left.
3. Enter your Bucket Name, in my example I'm using a sub-domain test.example.co.uk. Then the Region you would like the site to be served from.

Configure the S3 Bucket

Now that the bucket is created we need to tweak the configuration of the bucket to turn it into a static web hosted site.

Permissions

1. Click Properties (top right) button, click the Permissions tab. Here we need to allow access to the files within the S3 bucket to the public. For this we will set-up a bucket policy.
2. Click Edit bucket policy button. Below is an example of a bucket policy which allows all users get permissions to the particular bucket.
3. To help you can use the AWS Policy Generator or Sample Bucket Policies links.

Static Web Hosting

1. Under the Static Web Hosting tab click Enable Website Hosting.
2. Next enter the file name your homepage, e.g. Index Document: index.html
3. Note the Endpoint for further use, this will be the url you can use to test the site works.

Deploy your Site to S3 Bucket

1. To deploy your site, simple click the Upload button and select the required files. I uploaded a simple index.html page.
2. Now using the Endpoint from above we can test to see if the site works. e.g. go to http://test.example.co.uk.s3-website-eu-west-1.amazonaws.com

BOOM! You now have a hosted site! Well not quite, but almost.

At this point you can skip the CloudFront CDN set-up, if that's not required, and go straight to the DNS setup. Otherwise please continue reading.

Create CloudFront CDN for Bucket

If you don't mind a small additional cost then I would recommend also setting up CloudFront to act as a CDN for your site. Essentially this delivers your site from the nearest Amazon Region for each specific web user according to their location. Therefore increasing site delivery speed to your users and also distributing traffic to separate regions easing the load. E.g A visitor from the UK will be delivered the site from the AWS Europe region, US to US region, etc.

Sounds good? Then lets set this up!

1. Click Create Distribution button, then for Select a delivery method for your content choose Web.
2. Next complete the Create Distribution form with the following fields:
   
   
   1. Origin Domain Name: enter your sites endpoint test.example.co.uk.s3-website-eu-west-1.amazonaws.com, NOT the Amazon S3 Bucket select option value!
   2. Minimum TTL: set time to life to 360 seconds (5 minutes)
   3. Price Class: Choose the Edge Location option to best suites your performance needs and costs. Options range from Only US & Europe, Only US, Europe & Asia & All Edge Locations (Best Performance). I went down the middle of the line and chose Only US, Europe & Asia.
   4. Alternate Domain Names (CNAMEs): Set the alternate domain names for your site. In my case the sub-domain test.example.co.uk.
   5. Default Root Object: Specify the homepage for your site, e.g. index.html.

Give AWS time (5-10 minutes) to set-up your CloudFront distribution. Once this has complete you can test it's working by going to your generated CloudFront domain name. It will be something like http://e1zchjugikb91z.cloudfront.net. Your homepage should now be displayed, hurray!!

Third Party DNS Set-Up (not using Amazon Route 53)

The final piece in the puzzle is configuring your DNS so that you can see a nice domain name instead of Amazon's ugly URLs. As I already had a DNS provider and didn't require to use Amazon's Route 53 service, all that was required was to add a new CNAME to your existing domain. For example:

Sub-Domain: test.example.co.uk
Type: CNAME
Target: e1zchjugikb91z.cloudfront.net.

Or if you didn't set-up the CloudFront CDN then use the sites endpoint as your target instead, test.example.co.uk.s3-website-eu-west-1.amazonaws.com.

Once the DNS change has propagated you should be able to hit your site http://test.example.co.uk, CHAMPION!

CloudFront SSL? SNI Custom SSL or Dedicated IP Custom SSL

If you want are to set-up SSL for your S3 CloudFront static site you will have to think about the costs and possible drawbacks of the particular SSL setup. The 2 options are:

1. Server Name Indication (SNI) Custom SSL: Free, however it won't work for very old browsers (see Amazon CloudFront Announces SNI Custom SSL)
2. Dedicated IP Custom SSL: Which costs $600 per month and in my opinion very expensive.

Further reading on SSL from Amazon:

• Amazon CloudFront Custom SSL
• Set-up CloudFront to Serve HTTPS Requests