AWS Route 53 + ACM + S3 + CloudFront

Host an HTTPS static website on Amazon Web Services using AWS Certificate Manager, Route 53, S3, and CloudFront. This icludes both www and apex domains. The www domain is redirected to the apex, e.g.

  • http://domain.tld/* is redirected to https://domain.tld/*.
  • https://domain.tld/* serves the requested file(s).
  • http://www.domain.tld/* is redirected to https://domain.tld/*.
  • https://www.domain.tld/* is redirected to https://domain.tld/*.

Create a hosted zone in Route 53

The first step is to create a hosted zone in Route 53. Go ahead and create it with the following:

  • Domain Name: domain.tld (replace with your domain name)
  • Type: Public Hosted Zone

Request a certificate in AWS Certificate Manager (ACM)

The next step is to request a public certificate in AWS Certificate Manager. Enter the following domain names:

  • domain.tld (replace with your domain name)
  • www.domain.tld (replace with your domain name)

Choose DNS validation to prove ownership of your domain name. You must add CNAME records to your DNS configuration for this to occur. This is easy to do in ACM when using Route 53. On the validation page, extend each domain by clicking the domain name and simply click the Create record in Route 53 button.

However, your DNS is probably hosted elsewhere right now. In order to validate ownership of your domain now, you will also have to enter these values in your current DNS configuration as well.

Validation can take a few minutes. Be patient.

Add MX records to Route 53 (optional)

Don’t forget about your email. Refer to your mail provider’s documentation for the DNS configuration. Remember you may have to enter some additional records for email validation, e.g. Sender Policy Framework (SPF), etc.

Create buckets in S3

Create website bucket

Create a bucket that will host your static website. You can name it whatever you like. Because all web requests will be performed through CloudFront, you don’t have to name it domain.tld. For this article, we will name it domain-website. For the public access settings, deselect the following:

  • Block new public bucket policies
  • Block public and cross-account access if bucket has public policies

Leave all other settings with their default values. Once the bucket is created, go to the Bucket Policy editor under Permissions and add the following:

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::domain-website/*"
        }
    ]
}

Make sure you replace domain-website in the above policy with your bucket name. This will make your bucket public. Now go back to the Public access settings setting under Permissions and select:

  • Block new public bucket policies

Now let’s enable Static website hosting for this bucket. You can find it under the Properties tab. Select Use this bucket to host a website with the following:

  • Index document: index.html
  • Error document: error.html (optional)

Take note of the endpoint displayed here as you will need it when configuring your CloudFront distribution.

Create redirect bucket

Create a bucket for redirection. This bucket will redirect www.domain.tld to domain.tld. Again, you don’t have to name it www.domain.tld. For this article, we will name it domain-redirect. Leave all other settings with their default values.

Now let’s enable Static website hosting for this bucket. You can find it under the Properties tab. Select Redirect requests with the following:

  • Target bucket or domain: domain.tld (replace with your domain name)
  • Protocol: https

Take note of the endpoint displayed here as you will need it when configuring your CloudFront distribution.

Create distributions in CloudFront

domain.tld distribution

Create a web distribution with the following settings:

  • Origin Domain Name: The origin must be entered manually. Do not select the S3 bucket from the drop-down. You can find the origin in your S3 bucket configuration. You should have taken note of your enpoint in the previous step.
  • Origin ID: S3-domain-website (replace domain-website with your bucket name)
  • Viewer Protocol Policy: Redirect HTTP to HTTPS
  • Alternate Domain Names (CNAMEs): domain.tld (replace with your domain name)
  • SSL Certificate: Choose Custom SSL Certificate and select your certificate from the drop-down.

Leave all other settings with their default values and create the distribution.

www.domain.tld distribution

Create a web distribution with the following settings:

  • Origin Domain Name: The origin must be entered manually. Do not select the S3 bucket from the drop-down. You can find the origin in your S3 bucket configuration. You should have taken note of your enpoint in the previous step.
  • Origin ID: S3-domain-redirect (replace domain-redirect with your bucket name)
  • Viewer Protocol Policy: HTTP and HTTPS
  • Alternate Domain Names (CNAMEs): www.domain.tld (replace with www + your domain name)
  • SSL Certificate: Choose Custom SSL Certificate and select your certificate from the drop-down.

Leave all other settings with their default values and create the distribution.

Deploying CloudFront distributions can take some time. Be patient.

Configure DNS for your apex and www addresses

domain.tld DNS record

Create a new record set with the following settings:

  • Name: Leave blank
  • Type: A - IPv4 address
  • Alias: Yes
  • Alias Target: Select the CloudFront distribution for domain.tld from the drop-down

Leave all other settings with their default values and create the record.

www.domain.tld DNS record

Create a new record set with the following settings:

  • Name: www
  • Type: A - IPv4 address
  • Alias: Yes
  • Alias Target: Select the CloudFront distribution for www.domain.tld from the drop-down

Leave all other settings with their default values and create the record.

Deploy static website using CLI

You can copy your website files manually or by using the AWS Command Line Interface. I will demonstrate how to automate it using the AWS CLI. First, install and authenticate your AWS CLI installation.

Sync files to your AWS S3 bucket

To sync your files to your AWS S3 bucket and remove deprecated files.

aws s3 sync /path/to/folder s3://domain-website --delete

Where /path/to/folder is the local folder on your computer and domain-website is your bucket name.

Invalidate objects from AWS CloudFront edge caches

To force CloudFront to serve your new files. This is only required if you are updating your website.

aws cloudfront create-invalidation --distribution-id DISTRIBUTION-ID --paths '/*'

Where DISTRIBUTION-ID is the CloudFront distribution ID for domain.tld.

Update nameservers to point to Route 53

Ok, now everything should be set up. Time to switch the nameservers. Go to Route 53 and take note of the four addresses under the NS record set. These are your new nameservers. Go to your domain’s registrar and replace the nameservers with these values. Remember that the time required for the switchover varies. Again, patience.

Test your new website

Go ahead and load https://domain.tld/. Hopefully your website loads as expected. You should also test the three other variants that should redirect to the previous address:

  1. http://domain.tld/
  2. http://www.domain.tld/
  3. https://www.domain.tld/

Your website is now served using HTTPS over a CDN. Also make sure your email is being delivered as expected. That’s it!