Configure third-party domain name and HTTPS for CloudFront distribution

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/ is using HTTPS but what if you wanted to use another domain name like https://cindyle.dev.

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.

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, select the distribution you created previously
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 is live