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.
- Purchase a domain name from Namecheap or any other domain registrar
- 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.
- 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
- After you send the request, you should see that the Status says Pending Validation
- 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.
- Over in your Namecheap console, in the Domain tab, make sure you have
- Nameservers: Namecheap Basic DNS
- 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
- 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.
- 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
- In the Amazon CloudFront console, select the distribution you created previously
- 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
- Save the changes and wait for the distribution to finish deploying
Use Route 53 as the DNS Service to manage your DNS records
- In the Route 53 Console, create a new Hosted Zone
- Domain name: cindyle.dev
- Type: Public hosted zone
- 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
- 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
- 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
- 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
- You should see that https://cindyle.dev is live
Top comments (0)