Configure third-party domain name and HTTPS for CloudFront distribution
Tags: aws, tutorial, beginners, webdev
Published: 2022-08-09 16:03:00

Part 3/n of the Cloud Resume Challenge

## Chunk 1: Building the frontend
After you have successfully used CloudFront to serve the Next.js website hosted on Amazon S3, you'll notice that the website [https://d1ij0wngzhbeyc.cloudfront.net/](https://d1ij0wngzhbeyc.cloudfront.net/) is using HTTPS but what if you wanted to use another domain name like [https://cindyle.dev](https://d1ij0wngzhbeyc.cloudfront.net/). 

Stack:
- Next.js
- Amazon S3
- Amazon CloudFront
- Third-party Domain (ie Namecheap)
- AWS Certificate Manager
- Route 53

### Setting up the Namecheap DNS
You can purchase a domain name from Route 53, but while I was playing around with this Chunk, I bought a domain name from [Namecheap](https://www.namecheap.com/).

1. Purchase a domain name from Namecheap or any other domain registrar
2. To add an alternative domain name (CNAME) to a CloudFront distribution, you must attach a trusted certificate that validates your authorization to use the domain name.
3. Head over to the AWS Certificate Manager console and **Request a certificate**
  - Certificate type: **Request a public certificate**
  - Fully qualified domain name: **cindyle.dev**
  - Select validation method: **DNS validation - recommended**
4. After you send the request, you should see that the Status says **Pending Validation**
5. Click on the Certificate ID, and you should see the **CNAME name** and **CNAME value**
  - CNAME name: _916aeebf4a4ee9545320d30853000009.cindyle.dev.
  - CNAME value: _f3e8e0dff0089b1eb52619f87dxxxxx8.mqzgcdqkwq.acm-validations.aws.
6. Over in your Namecheap console, in the Domain tab, make sure you have 
  - Nameservers: **Namecheap Basic DNS**
7. Go to the Advanced DNS tab, select **ADD NEW RECORD**
  - Type: CNAME Record
  - Host: **_916aeebf4a4ee9545320d30853000009** (NOTE: You only need the beginning part, not the _.cindyle.dev._
  - Value: **_f3e8e0dff0089b1eb52619f87dxxxxx8.mqzgcdqkwq.acm-validations.aws.**
  - TTL: **5 min**
8. In the AWS Certificate Manager, wait for the Status to go from **Pending validation** to **Success**. This could take hours but setting the TTL to 5 minutes should only take 10-15 minutes.
9. Once the certificate is validated, you don't need to keep the record anymore on Namecheap, so delete it.

### Add an Alternative domain name (CNAME) to CloudFront
1. In the [Amazon CloudFront console](https://console.aws.amazon.com/cloudfront/v3/home), select the distribution you created [previously](https://dev.to/cindyledev/use-cloudfront-to-serve-a-static-website-hosted-on-amazon-s3-cloud-resume-challenge-part-2n-29l0)
2. Click on **Edit** and under **Alternative domain name (CNAME) - optional**, click on **Add item**
  - Alternative domain name: cindyle.dev
  - Custom SSL certificate: **cindyle.dev (3ff2abcd-12ac-1234-a000-9jklfdsirba)** from the dropdown menu
3. Save the changes and wait for the distribution to finish deploying

### Use Route 53 as the DNS Service to manage your DNS records
1. In the Route 53 Console, create a new Hosted Zone
  - Domain name: **cindyle.dev**
  - Type: **Public hosted zone**
2. Click on the Hosted zone details, and you should see four servers listed underneath **Name servers**
  - ns-1234.awsdns-35.org
  - ns-123.awsdns-30.com
  - ns-789.awsdns-09.net
  - ns-7890.awsdns-06.co.uk
3. Over in the Namecheap console, in the Domain tab, make sure you have **Nameserver: Custom DNS** and enter the four name servers from your Route 53 Hosted Zone details
4. Back in the Route 53 console, create a new Record
  - Record name: cindyle.dev (keep blank to create a record for the root domain)
  - Type: A - Routes traffic to an IPv4 address and some AWS resources
  - Alias (turn on)
  - Route traffic to: Alias to CloudFront distribution
  - Dropdown: d1ij0wngzhbeyc.cloudfront.net
5. Create another new Record
  - Record name: cindyle.dev (keep blank to create a record for the root domain)
  - Type: AAAA - Routes traffic to an IPv6 address and some AWS resources
  - Alias (turn on)
  - Route traffic to: Alias to CloudFront distribution
  - Dropdown: d1ij0wngzhbeyc.cloudfront.net
6. You should see that [https://cindyle.dev](https://cindyle.dev) is live