Earlier I showed you how you could deploy containerized react app on AWS ECS (Fargate).

The next step to complete the production setup for our React app is to attach a domain to it.

Unlike EC2, Lightsail, etc. you can not attach a static IP with an Elastic Load balancer. The two ways to attach a domain to a load balancer are:

1. Using a CNAME record

This is the easiest option out there. You just need to add a CNAME record for your domain and add the DNS Name (or A record) of your load balancer to it. One caveat here is that CNAME can only be added for sub-domain and not the top-level domains.

Go to EC2, select "Load Balancers" from the bottom right column. Select the load balancer which you have attached to your ECS service. Copy the DNS Name (A record) from the description tab.

Now you need to create a CNAME record for your domain. I am using dreamhost for this demo, but the set-up is the same regardless of what domain registrar you are using.

Select the domain you would like to attach to your load balancer and edit its DNS records.

Enter a sub-domain which you want to point to your load balancer (and subsequently to your ECS container). Select "CNAME" as the record type, enter the DNS Name of the load balancer copied in the previous step in the value field and click "Add Record Now".

That's it.

*Note: CNAME record can be updated instantly or it can take a while.

Nameserver changes can typically take 0 to 24 hours to take effect, but they are known to take as long as 48 hours to go into full effect. DNS zone record changes such as A, MX and CNAME records can typically take 0 to 4 hours to resolve but are known to take as long as 8 hours to fully propagate. read more...

2. Using NS records

This is relatively a complex approach but it lets you point your sub-domain as well as the top-level domain to the elastic load balancer.

First, we need to create a hosted zone inside Route 53.

Once you are inside the "Route 53" console. Click "Create Hosted Zone".

Enter the domain name you want to use (it can be a sub-domain too). Select "Public Hosted Zone" as a type and click "Create".

Once the hosted zone is created, it will take you inside the hosted zone. Click "Create Record Set". Leave the name field empty (this is used for sub-domain), select type as "A - IPv4 address", select Alias as "Yes". Select the load balancer that is attached to your ECS container as Alias Target. Click "create".

Now copy the NS records, we need to add it to our domain.

Go to your domain registrar control panel and select the domain you want to use (should be the same one as used in the previous step). Edit the DNS records and update NS records to the one you copied in the previous step. In my case:

ns-1671.awsdns-16.co.uk.
ns-1513.awsdns-61.org.
ns-154.awsdns-19.com.
ns-559.awsdns-05.net.

*Note: Dreamhost gives an error if you add a dot (.) at the end of an NS, so try removing it.

Once the records are updated you would be able to access the react app from your domain.

Next: Attach SSL to the load balancer to enable HTTPS