You can host your web app built in AWS on any domain name that you own. Domain names are important for any growing business in terms of identity, branding and visibility, be it B2C or B2B. It also affects your website’s SEO.

‍

Prerequisites

Own a domain name, and be able to modify its Nameserver settings in the domain registrar. If you need a domain name, you can browse popular domain registrars such Google Domains, GoDaddy or Namecheap. You also need to have some web content, for e.g. a simple HTML page in an S3 bucket that will be hosted.

‍

Let’s get started.

Creating a Hosted Zone in Route 53

Navigate to Route 53 in AWS Console and click on Create Hosted Zone. Enter your domain name. Select Type as Public Hosted Zone and click Create.

‍

‍

The Hosted Zone is created and comes with two default records:

NS — Nameserver records. These records indicate the location of the servers containing the actual DNS records.

SOA — Start of Authority records. These records contain crucial information about the domain or hosted zone such owner details, domain’s last updated time and its refresh frequency.

‍

‍

Mapping NS Records in Domain Registry

When you buy a domain name, it might come with default Nameservers configured. To map our Route 53 Hosted Zone, we need to overwrite the Nameserver configuration. Add the Values provided in the Hosted Zone’s NS record to your domain registrar’s Nameserver configuration.

‍

Creating ACM Certificate

To verify the ownership of the domain to the end-user’s client (web browser), we need to create and map SSL Certificates.
Navigate to AWS Certificate Manager in AWS Console and click on Request Certificate. Ensure you are creating the certificate in the North Virginia region as CloudFront (the AWS Content Delivery Network that will deliver our website) requires it to be in that region.

‍

Select Public Certificate and click next. Enter your domain name under Fully Qualified domain name field.

You can also add *.yourDomainName to configure the certificate for all subdomains under the domain. Click on Request.

‍

Adding CNAME Records for the ACM Certificates

Once you request for the ACM Certificate, it enters a Pending Validation status. There are CNAME name and value fields populated as empty under domains. Click on create records in Route 53.

‍This automatically creates:

CNAME — Canonical Name records. These records point to a different domain name and acts as an “alias”. They cannot directly point to IP addresses.

‍

\

‍

Create a Cloudfront Distribution

Navigate to Cloudfront in the AWS Console and click on Create Distribution. Choose the S3 bucket that contains the web content in the Origin Domain. Select Origin Access Control Settings in Origin access. Click on Create new OAC and click Create in the popup that appears. This lets us allow the distribution to access the contents of the S3 bucket. The S3 bucket policy also needs to be updated, which we perform after the distribution is created.

‍

Select Viewer as Redirect HTTP to HTTPS.

‍

Enter your domain name in the alternate domain name field. Choose the ACM certificate created before in the Custom SSL Certificate field. Configure other settings as per your need or leave it as the default value. Click on Create Distribution. Copy the bucket policy that appears at the top after creation. You can copy this later from the configuration inside Origin tab of the distribution.

‍

Configure S3 Bucket Policy

Navigate to S3 in the AWS Console and select your bucket. Click on Permissons. Click on edit under Bucket Policy. Paste the bucket policy copied from the distribution click Save. Also enable Turn Off All Public Access. This ensures the S3 bucket policy has the correct configuration to only allow the distribution to access it.

‍

Add an A Record to the Hosted Zone

Navigate back to the hosted zone in Route 53 and click on Create Record. Enter either a subdomain name in the Record name or leave it empty for the top level. Choose the record type as “A”. Enable “Alias”. Choose Cloudfront Distribution in the Route traffic to field and choose the newly created CloudFront Distribution. Click on Create Records. This creates a new type of DNS record:

A — Address records. These records point to the IP Address of a given domain name. They can only hold IPv4 addresses.

In our case, AWS internally maps the A record’s value to the IP address of the specified CloudFront Distribution.

‍

‍

Test your website

With the A record mapped, the domain should be ready for testing. Try opening your domain and you will be able to see your web content appear. The CloudFront distribution and CNAME record creation can take some time to propagate. You can check the status in the respective dashboard for these services.

‍