Deploying a Gatsby project to S3 & enabling HTTPS

TL;DR

  1. Put your website into a bucket.
  2. Get a certificate from Certificate Manager, pointing at your domain name.
  3. Create a CloudFront distribution for the bucket that contains your website and attach the certificate to it.
  4. Wait.
  5. Point the A name record of your domain to the CloudFront distribution.

This post gives a description of the steps that I followed to deploy my site. Though AWS's documentation is extensive, it was not always straightforward. I often had to refer to other sources for troubleshooting. At this point, there is also not much documentation on Gatsby deployment specifically which is why I decided to write this documentation-style post. This guide assumes that you have some basic familiarity with AWS. Also, that you already purchased your Route 53 domain and set up the hosted zone for it.

Buckets. Buckets everywhere.

The name of the game is buckets. Create a new bucket in your S3 console. Name it exactly like your domain name. Keep the default settings, especially the region. It's important that it stays US East (N. Virginia). This is required later when we add the SSL certificate. In your bucket, upload the file(s) needed for your website. Go to Properties. Click the card labelled Static Website Hosting. Define your index page document. Mine is index.html. Also, take note of the bucket's endpoint e.g. ht​tp//yourdomain.com.s3-website-eu-west-1.amazonaws.com. You'll need it later when creating your certificate. In the bucket's permissions, you want its policy it to look something like this:

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::yourdomain.com/*"
        }
    ]
}	

This policy permits everyone on the internet to read the contents of your bucket so be careful not to have sensitive content in there (passwords, secret keys, etc.).

Get a certificate from Certificate Manager

In the AWS console, look for Certificate Manager. There click on Request a certificate. The domain name being the one you purchased. As additional names use *.yourdomain.com. When it comes to selecting the type of validation, choose DNS. AWS will automatically set up the needed cnames in your hosted zone.

Link the certificate to a CloudFront distribution

In the AWS search bar, look for CloudFront. Click Create distribution. In the origin domain name, use the bucket endpoint that you took note of earlier. This is important. Don't select the default URL that the form provides. It is actually different from the real URL which you wrote down. I did not do this earlier and stuff did not work. In alternate domain names, you want to state the two versions your domain name, with and without www.

In certificate, select the one that we created just now. It should appear there as an option. Everything else can stay as default. Create the distribution.

Have a cup of tea

You have to wait around 10-20 minutes for the distribution to do its thing. In CloudFront's Distributions, watch the in progress circle spin. This is very important. If everything went well, you should be able to visit the CloudFront domain and see your index page of your site. If you don't see it and it shows as 403, check your CloudFront distribution setting. In alternate domain names, make sure that both your cnames, yourdomain.com and www.yourdomain.com are listed.

Point the A name record of your domain to the CloudFront domain

In your hosted zones in Route 53, set the A name record of your domain yourdomain.com to the domain of your CloudFront distribution. Add a cname record for www.yourdomain.com and use yourdomain.com as a value.

Hopefully, if all went well, you should be able access your website through your domain name with a secure connection.