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.
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.
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
Viewer Protocol Policy: use to restrict access to HTTPS as desired
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.
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
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.
In Route53 I set up an A record for the custom domain with an Alias to the CloudFront distribution.