Deploying HTTPS websites on AWS S3 23 June 2018
Hosting a static website on AWS S3 is pretty straightforward, adding HTTPS with a custom domain to the mix is a little more complex and requires using CloudFront and a number of configuration options and services.
The main steps to hosting a static website on S3 over HTTPS are:
- register a custom domain using Route 53
- create a bucket with that custom domain
- use CloudFront to cache your website
It’s setting up CloudFront where I found knowing what needed to be configured a little more complex and hit a few gotchas.
SSL Certificate
You’ll need to have an SSL certificate set up for your custom domain to enable HTTPS access. Use AWS Certificate Manager to create an SSL certificate for the domain you set up in Route53.
Configuration
Alternate Domain Names (CNAMEs) : the custom domain name you set up in Route53 and that matches your bucket name
SSL Certificate: the SSL certificate that you set up for your custom domain
Default Root Object: the index page of your web app, typically /index.html
Viewer Protocol Policy: use to restrict access to HTTPS as desired
Caching
By default CloudFront will cache content for 24 hours. If you want to be able to deploy changes to your website on short notice then you’ll want to reduce this.
Error Pages
Using React and React Router I encountered issues when directly accessing URLs that weren’t the root, as the main application hadn’t been loaded so a 404 was generated.
The “fix” for this, and it is a bit of a hack, is to configure the error pages on your CloudFront distribution to use your /index.html. I configured the 403 and 404 pages to respond with /index.html and a status code of 200. This means that the index page gets loaded for these requests and React Router can then kick in and handle the requests.
Route53
In Route53 I set up an A record for the custom domain with an Alias to the CloudFront distribution.