Hosting a Static Website with AWS S3 and CloudFront

Sep 3, 2015

With the rising popularity of client-side rendering frameworks such as Angular and Ember, it has become
extremely easy to build your own website without needing a complicated or powerful backend. Combined with Amazon S3 static website hosting, you don’t even need a host anymore.

Creating a CloudFront Distribution

Now, you can create a CloudFront distribution to sit in front of S3, and serve your content through your own domain.

Navigate to the CloudFront console, and create a new Web Distribution.

There are a lot of options for a distribution, but they’re all changeable after creation. See the CloudFront documentation for details. For now, focus on the options related to your domain and S3 bucket.

Set the Origin Domain Name to the Endpoint provided in the Static Website Hosting configuration for your S3 bucket (e.g. yourdomain.com.s3-website-us-west-2.amazonaws.com).

NOTE: Do not use your S3 bucket as the origin directly. This prevents you from using a root object for subpaths (e.g. http://yourdomain.com/blog -> http://yourdomain.com/blog/index.html transparently).

Enable HTTPS under the Viewer Protocol Policy, and set the Alternate Domain Name to yourdomain.com, and www.yourdomain.com.

Set the SSL Certificate to the one you uploaded to IAM.

CloudFront will take about 15 minutes to create your distribution.

Directing DNS

Finally, you need to create an A DNS record as an ALIAS from yourdomain.com. to the domain name of your new CloudFront distribution,
and another A record as an ALIAS from www.yourdomain.com. to yourdomain.com.

Where to Go From Here

At this point, you should be able to view your website at https://www.yourdomain.com/