Deploying SSL enabled React/Angular/Vue applications to AWS using Lets Encrypt

In a previous article , we saw how to deploy a simple React (or any UI) application using nginx and docker . In this article, we are going to take this one step further and deploy the dockerized application to AWS . To do that, we will buy, configure, and set up a custom domain name from GoDaddy and then deploy our application with SSL certificate generated using Let’s Encrypt .

That was certainly mouthful. Before moving ahead, we will break this down into small steps which can be easily implemented and understood. By no means am I an expert in the field of DNS and SSL/TLS encryption so I will provide additional material as we cruise through these steps.

Prerequisites Basic understanding of AWS A GoDaddy account Docker installed on machine Table ofContents docker-machine A

Although the steps look daunting. Do not worry, they are very easy to understand and perform them yourself. Let’s get started.

Step 1: Building our staticwebsite

Since this is not the critical step of what we are trying to achieve, we can just skim over this and create a lean application. We can use create-react-app to create this sample application.

create-react-app kashyapapp cd kashyapapp yarn start

Once the application is created we are simply replacing all the boiler plate code with our version of placeholder as follows:

That’s it. We are not very concerned about styling the application at this point so we can revisit that when we have more information.

Step 2: Buying domain onGoDaddy

Technically, we can buy the domain from any domain name registrar . In this case, we will go through GoDaddy to purchase our domain.

Once we search and buy a domain of our choice, we need to edit the DNS configuration of this domain by going into the DNS settings (which can also be accessed from the Manage Domains option in the main menu). Among all the settings available, we are only concerned with Nameservers right now.

A Nameserver is a reverse address lookup which the browser performs when a user requests a website. When we request for kashyap.app in our browser, the browser first uses DNS to retrieve the current Nameservers associated with the domain name which then provide the browser with the A record i.e. the IP address for our website. The browser is then able to communicate with our server and load the information that we requested.

Coming back to the GoDaddy dashboard, we go to the list of all the Domain Names and then select the option to edit the DNS settings for the domain of our choice. After navigating to the edit screen, one of the options that we would see there is the Nameservers which are currently handling the network route to our domain. It looks similar to what we see below:

Next, we want to hand off the Nameserver resolution over to AWS so that we can manage everything in one location instead of having our servers on AWS and domain configuration on GoDaddy. This is also helpful if we wish to automate our entire workflow. But, there might be better alternatives available for the automation such as clustered deployments using Docker Swarm or Kubernetes .

To complete the DNS handover to AWS, we first need to set up AWS and in particular their DNS web service called Route 53.

Step 3: Creating Hosted Zone onAWS

As the name suggests, we will be creating a hosted zone in Route 53 which is a DNS web service provided by AWS. To create a Hosted Zone, we need to know the domain name (which we already purchased in Step 2). To add a hosted zone, follow the below steps.

Navigate to AWS > Route 53 > Hosted Zones > Create Hosted Zone

This would open the Create Hosted Zone side panel on which we need to enter the Domain Name. Leave the rest as default values and click create.

On selecting the newly created Hosted Zone, we can see various records created under the Hosted Zone, such as Start of Authority (SOA)and Nameserver (NS). For now, we are only focussed on the NS records.

Step 4: Updating GoDaddy Nameservers

Once we have the Hosted Zone created, click on the name of the Hosted Zone to see the Nameserver (NS) values which are assigned to the domain.

We only care about the NS values at this time, which are typically 2 4 in number as shown below. Copy them and head on over to GoDaddy.

On GoDaddy, navigate to the DNS settings page as we did earlier, this time under the Nameservers section, click on Edit and select Custom from the dropdown to enter the NS values of our new AWS Hosted Zone.

Once we save the changes, it takes some time for the changes to propagate over the internet, but once it does, GoDaddy will notify us that they no longer maintain our domains DNS records:

That is all. We have successfully purchased a domain on GoDaddy and transferred it over to AWS Route 53. Next, we create an SSL certificate for our domain name.

Step 5: Running Let’s Encrypt dockerimage

Without going into a lot of detail about certificates and Certificate Authorities, here is a small summary which beautifully explains what Let’s Encrypt is all about:

To enable HTTPS on your website, you need to get a certificate (a type of file) from a Certificate Authority (CA). Let’s Encrypt is a CA. In order to get a certificate for your website’s domain from Let’s Encrypt, you have to demonstrate control over the domain

Let’s Encrypt provides a client called certbot which can be used to automate generation and renewal of SSL certificates. To assert control over the domain, certbot performs a challenge in which it communicates with our DNS and expects a certain outcome. The outcome differs based on the type of challenge that is being performed. In our example, we will go with the dns-01 challenge which expects the presence of a certain TXT record on the DNS.

To generate this TXT record, which we need to provide as proof, we can either install the cerbot client locally and run the commands on our machine or run the docker image for the cerbot which makes things simpler, cross platform compatible and allows us to po