Dockerize a React Nodejs App and Deploy in AWS EC2 — The Startup Way Part-2

Vikranth Kanumuru
Kanlanc
Published in
9 min readJun 24, 2021

After getting started with your EC2 instance, and getting all the security rules and everything, connect to your EC2 instance either through SSH or through the connect option after clicking on the instance as shown below

Follow the below instructions to install docker and docker-compose in your Ec2, so that we have our environment setup.

Now, clone your Github project into the EC2 using

git clone <your repo url>

Now, this is just advice, and you can do proceed however you would like, but make sure to have different branches like develop, test, stage, and production.

Branch “develop” is for developing new features, and this is where people should fork from to make new features. Branch “test” is where you test your next deployment. Branch “stage” is where your tested next deployment sits( it should be ready for your next deployment), and finally, production should be what is being deployed sits.

In our case, with the power of docker-compose, the only file in your production branch would be the docker-compose.prod.yml file

( Caveat: I am assuming you are using an RDS instance for your database needs, if not I absolutely recommend you to do so because running a database in docker is not a good way to go forward with, but I will be mentioning how to do the latter here and the former in a different tutorial and if you are here from the previous article, I configure the database settings in a .env file which I for obvious reasons cannot show, so make sure to make one and set the variables in a .env file or replace them with your own values)

You can ignore the other two things as they are not necessary for deployment.

I know what your thinking, “ It can’t be thaaat simple, right??”, but believe me it is. That is the power of Docker and Docker-compose.

Once, you pulled the git repository into your EC2, use the command below to login into your docker hub account

docker login

Now, the moment of truth, type in the command below to get your application up and running

cd <YOUR FOLDER HERE>docker-compose -f docker-compose.prod.yml up

NOTE: If you haven’t read the first article, here’s the link to it(here or here)

That’s it!! You have now an application running on EC2 that can receivetraffic from the outside using its public IPV4 address, but to take it a step further, add an elastic IP address to your EC2 instance( it’s free) and if you have a domain, go to the DNS management of your domain and use an A record to point your domain to the elastic IP address and you should have a proper working website.

Adding HTTPS To Your Application

NOTE: Before you proceed further, please note that you absolutely need a domain name for adding HTTPS to your application. I also recommend getting one for your startup as it builds credibility as well.

Now, one potential downside, to using docker is that it is a big hassle to setup HTTPS for your application(atleast I barely found a method after a lot of searching which is still not easy), but there is another method that is hassle free and will make your application a lot more robust and scalable but would cost a bit more money. I know as a startup, we are focused on minimising the costs but we had the luck of having Harvard’s help by being incubated, so we had a good amount of AWS credits, and hence I was not under pressure to overly save credits compared to getting the application up and running.

I’ll link whatever I found in my research below if you would like to proceed without spending, and if you succeed, please let me know so that it can help future visitors.

Now, that’s out of the way, the method I used to add HTTPS to my application was to use Route53, ALB, and scalable EC2 together.

Route 53 routes the traffic to ALB which in turn adds the necessary SSL certificate for HTTPS( I will explain how to get and add the SSL certificate below), and routes the traffic to your EC2.

SO, to add HTTPS, you need:

  1. Route 53 hosted zone that handles traffic to your domain name
  2. SSL Certificate
  3. Application Load Balancer(ALB) configured with the above SSL certificate

Route 53

What is Route 53

Coming directly from the horse’s mouth(AWS Website)

Amazon Route 53 is a highly available and scalable cloud Domain Name System (DNS) web service. It is designed to give developers and businesses an extremely reliable and cost effective way to route end users to Internet applications by translating names like www.example.com into the numeric IP addresses like 192.0.2.1 that computers use to connect to each other. Amazon Route 53 is fully compliant with IPv6 as well.

In other words, it is a DNS system managed by AWS that allows us to access other AWS components that are otherwise inaccessible(ALB, Amazon provisioned SSL certificate..etc).

Building and Configuring Your Hosted Zone in Route53

In the AWS search bar, look for Route53 and you should be looking at this.

Choose Route53 and click on hosted zones in the dashboard. Next, click on the top right orange icon that says “Create Hosted Zone”

Fill out the necessary details such as domain name and everything, and click on the “Create Hosted Zone” at the bottom once you are done.

When your zone is created, you are presented with details such as nameservers and such like below

Changing Domain Nameservers to Route 53

Once you get your name servers, you need to go to the DNS dashboard of your domain name provider. For Namecheap, the DNS system would look something like this.

At the spot that says nameservers, change the field from Namecheap Basic DNS to custom DNS and add the settings you got from your route53 page

Mine are different, so you should add your own nameservers here.

Waiting ( The Hardest Step)

Finally…. you gotta wait for a day or two until the DNS gets propagated, but while this happens you can do the rest of the steps, so continue on soldier!!

SSL Certificate

For any HTTPS application, an SSL certificate is a must and in this section, I will show you exactly how to get it from AWS for FREE.

Now, you know WHY you need it, but for the folks who are not sure what it is, let’s first know

What is SSL?

Cloudflare website says,

An SSL certificate is a data file hosted in a website’s origin server. SSL certificates make SSL/TLS encryption possible, and they contain the website’s public key and the website’s identity, along with related information. Devices attempting to communicate with the origin server will reference this file to obtain the public key and verify the server’s identity. The private key is kept secret and secure.

SSL Certificate from AWS

In the AWS search bar, search for certificate manager and you should be greeted like the picture below

In the next page, click on the “Request A Certificate” blue button in the dashboard.

Choose “Public Certificate” if asked, if not you should be shown this page.

Add your domain names in both with and without www like the picture above. On the next page, choose “DNS Validation” and keep proceeding further until you come to this page.

If you expand them, you should be shown the option to add these records to your route53 Hosted Zone like below

Add both of these records to the appropriate hosted zone and you’re done with SSL certificate provisioning.

Waiting ( The Second Hardest Step)

Well!! Hello there soldier, sadly you will have to stop here cause you need the DNS propagation to go through before moving forward. You can always check its progress on this website, and continue on when it’s done.

But, until then

Application Load Balancer(ALB)

An ALB is a reverse-proxy sitting in front of your application, that routes traffic to your application. In our case, we modify it so that it takes in HTTPS traffic, shows the SSL obtained from before, and routes it to the EC2 with HTTP traffic, so the application can deal accordingly.

Benefits of Using ALB

There are many benefits of using an Application Load Balancer, but most importantly they bring security, and scalability to your applications

ALB SETUP

In the AWS search bar, search for “Application Load balancer” and you should be greeted like the picture below, choose the EC2 Loadbalancer.

Click on the “Create Load Balancer” blue button in the dashboard and choose “Application Load Balancer” in the three options.

On the next page, give it any name and make sure to add HTTPS protocol like in the picture below by clicking add listener.

Also, check all the boxes in the availability zone and move on to the next page by clicking the “Next: Configure the Security Settings” button at the bottom left.

If your DNS got through, there should be a certificate automatically selected, and you can move on to the next page, if not BE PATIENT BOY!! (GOD OF WAR Version)

On the next page, choose “Create New Security Group” and add the following rules

On the next page, make a new target group which should have your new Ec2 instance that has docker running from above.

Register your Ec2 on the next page, by choosing the Ec2 and clicking “Add to registered” and move on by clicking “Review”

Finally, click “Create” and you now have an ALB provisioned.

Adding ALB Records to Route53

You are at the finishing line, the final step is to add two A records that point to this ALB in your Route53 Hosted Zone, and you are done.

Go back to your Rout53 hosted zone and click on “Create Record”. Leave the first field empty, and turn on alias in the third field.

Then choose “Alias to Application and Classic Load Balancer”, then the hosted place for your ALB which in most cases is “Ohio” and finally the ALB which should appear as the options, and click “Create Records”

Repeat the above step but add “www.” to the first field this time.

That’s it!! You’ve reached the end of this article as well as added HTTPS protocol for your website. Congratulations!!

For all the hassle, you’ve been through, I sincerely hope whatever you are working on succeeds. If you have any questions, do let me know in the comments and I will try my best to help.

References:

https://www.cloudflare.com/learning/ssl/what-is-an-ssl-certificate/

https://aws.amazon.com/route53

--

--

Vikranth Kanumuru
Kanlanc

A Curious Fellow in love with Technology — Featured in ABC Australia| 70K+ Views | 9 x Top Writer in Innovation and Startup — https://portfolio.kanlanc.com