Create Static Website Using AWS (Part 2)

In the first part of this tutorial, we showed you how to host a static website on your own domain name using AWS S3.  In this second part, we will show you how to add CloudFront (AWS CDN service) on top of it.  Static websites on S3 usually loads fast already, however having a CDN can provide many additional benefits, including better performance and scalability, lower cost, fine grain control of compression and client caching, and in this case adds HTTPS support.

Prerequisites:

• Everything we did in part 1, so you have a static site at http://www.acme.com
• Access to DNS entries of your domain so we can modify them. Your Domain Registrar (like GoDaddy, NameCheap, etc.) usually provides easy UI to do this.

Steps:

1. Go to CloudFront console and create a new Distribution, use the S3 domain created in part 1 as the "Origin domain", e.g., "www.acme.com.s3.us-east-1.amazonaws.com").
2. Leave most of the settings as default, scroll down to "Price class" setting, and choose "Use only North America and Europe".  CloudFront has edge servers all over the world, and they are priced differently.  This change makes sure you only use the lowest priced locations even if a user from other continent visits your site.
3. Add your own domain name in the "Alternate domain name (CNAME)" list, e.g. www.acme.com
4. Request a certificate for your domain in the "Custom SSL certificate".  This will redirect you to the AWS Certificate Manager (ACM) page, and please follow instruction to submit and validate the request.  Make sure you add both acme.com and *.acme.com in your request.
5. Click "Create distribution" to finish.
6. Now you should see the new distribution in the Distributions list.  Click its name to view details and copy the "Distribution domain name".  It should look like "d1234abcd.cloudfront.net"
7. Go to your DNS provider to modify the CNAME entry we created in part 1, so that "www.acme.com" points to the Distribution domain name you copied above.
8. Wait a few minutes for DNS entry to propagate and you should be able to access your static website through CloudFront CDN.

With the above steps, when a user visits http://www.acme.com, it first route the user to CloudFront server; CloudFront will request the file from S3 and return it to the user, and at the same time store it in a cache. So that next time anyone requests the same file, CloudFront will read it from cache and return to users, rather than read from S3 again.

Besides, with the certificate, users can visit your site through HTTPS like  https://www.acme.com