Setup Route 53 for Client App
Tags: webdev, javascript, devops, aws
Published: 2024-01-11 00:00:00

For this part, we will modify the URL from Cloudfront to our own domain. However, first, you need to have a domain. You can buy it from AWS Route 53 or other providers like Hostinger, GoDaddy, etc. In my case, I bought the domain outside AWS.

# Create Hosted Zone

To add the domain to AWS, we need to create a new hosted zone in Route 53.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/stxezvogtps6719kxcaw.png)



Then, you can add the domain name.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c3r4nirz2li81cy745zp.png)



Finish by clicking the **`Create hosted zone`** button at the bottom of the page.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x97sekye0c651vc0bpru.png)



# Modify Nameserver

If you bought the domain from a different provider, you need to change the nameservers to AWS. Retrieve the nameservers from the detailed hosted zone.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q86ml6lkgrsybc1cuhwb.png)

Then, update the nameservers with the domain provider in the settings page.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4g883mt7w0rudk5epm8a.png)



# Create SSL/TLS for New Domain

For the next step, request a new certificate for your domain using ACM. Open ACM and request a new certificate.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d874o5iulnutd3r7xute.png)



Add the domain name.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x43ls6m924b7ifcdsf8u.png)



Finish the request by clicking the **`Request`** button.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/65py0mfeo5fe9wb92o14.png)



# Verify the Certification

The next step we will verify our certificate, to do so let’s click on the certificate that we just created.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/boqrtml2plcro5krzutw.png)



Click the **`Create records in Route 53`** button.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x2qbhyntj2awuqxzbgkd.png)



Next, click on the domain and click **`Create records`** to finish.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/splhvmbjgelxe8tzfbhm.png)



Then, let’s wait a couple minute until the status changed to `Issued`


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3dcv0cenhvyhm9fou1sc.png)


You can also check the records page to confirm the new record has been added.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/aurvqex6r6s8qcedtr6o.png)



# ****Edit the Domain Name in Cloudfront****

In this part, change the domain of Cloudfront. Open the Cloudfront distribution, then click the **`Edit`** button inside the **`Settings`** page.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vro8vg59yem264p0iagx.png)



Add the new domain and select the SSL certificate. Finish by clicking **`Save changes`** at the bottom of the page.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mb63l7pws7lwtvhjios9.png)



Wait for Cloudfront to finish its deployment.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lgk9cqg1n3r2k9tl2a0h.png)



# ****Create New Record for the New Domain****

In the final step, we will add https://awsproject.akbarnafisa.com/ to Route 53. To do this, open the Route 53 page and click the **`Create record`** button.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wae1axrbob17iyfvq1r3.png)



Then, select **`Simple routing`**.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ljt1b5avvealfk4nisgo.png)



Next, click **`Define simple record`**.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ye5wstl08n8vtg9j7kcl.png)



Now, fill in the record name, select the routing traffic to the Cloudfront distribution, and choose the distribution.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3qvg11gcrmayabe7jkhi.png)



Finally, click the **`Create records`** button to complete the process.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lsnh9ief1dg6m3xnek2i.png)


Now, let's wait a couple of minutes, and we will be able to access the page.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yzwvl3g8gvsrstum0x15.png)