Balasubramani M

@balasubramanim

How to run multiple apps on a single EC2 instance with Nginx and map your custom domain?

In this tutorial, we will be hosting a separate React and Node.js app in our EC2 instance and map our custom domain.

This is the first time I tried to run multiple (Node.js & React JS) apps on my EC2 instances and to my luck, I succeeded in it. I want to ensure nobody should get frustrated in setting up their multiple instances in EC2 like me. It’s quite easy to implement it actually because there are lots of answers are already flooded in StackOverflow but none were practical. This put me up in a situation to write this article and help others because I know that, Sharing is caring.

Required: It would be more awesome to run our client in the custom domain and server in the subdomain (eg: https://tamilakam.in & https://api.tamilakam.in. You can get one @ GoDaddy or through any other domain registrar and a domain name is mandatory to complete the remaining steps.

I hope you are already aware of Nginx configuration setup. If not, do not worry. We will set it up while working on this tutorial.

Deploy your Node.js app in production and map your custom domain.

I have already worked on a tutorial to deploy a node.js app in production. You can go through @

In this above tutorial, I have just hosted a Node.js app in a production environment. Using the amazon EC2 default URL and the port number, we could access the server.

But now, we are going to map our custom domain to point to our remote server in this tutorial.

Note: We will use port 4500 in this tutorial to run our server.

I assume you already have experience on Amazon EC2 instance and it’s connection process. If you aren’t, kindly go through the below link, complete the steps provided and get ready with your remote instance before proceeding.

Step 1: Provide your Amazon EC2 IPv4 Public IP address in your Internet Domain Registrar DNS settings.

Get the IPv4 Public IP address from your Amazon console. It would be like 18.xxx.xxx.15

Add A record with values as follows.

Type: A
Name: api // Sub domain so we can access it like api.tamilakam.in
Value: 18.xxx.xxx.15 // IPv4 Public IP
TTL: 600 seconds

Refer the image below for more info. Add other A records too so that we don’t need to come again here for our client app configurations.

DNS Management page — Add Records.

Step 2: Let’s connect to our remote instance first using the below command from terminal. (Replace your EC2 url in required place)

$ ssh -i ~/.ssh/AWS-EC2-INSTANCE-LIVE.pem ubuntu@ec2-xx-xxx-xx-xx.us-east-2.compute.amazonaws.com

Step 3: Dedicate any port to run your Node.js server in EC2.

Click Security Groups under NETWORK & SECURITY in your Amazon console.

Click Security Groups.

Right click on your security group for your instance and click Edit inbound rules.

Click Add Rule. Add the following configurations as you see in the below image and click Save.

Security group config rule.

The port 4500 says we are going to run our Node.js server in this port. Add your port in which the server is running.

Step 4: Install Nginx and configure

Ubuntu comes with its own package manager, apt-get. Using apt-get, we can install nginx in one command.

$ sudo apt-get install nginx

apt-get runs nginx automatically after install so you should now have it running on port 80, check by entering your public DNS URL into a browser.

Nginx welcome page.

If this doesn’t work, you might need to start it manually.

$ sudo /etc/init.d/nginx start

Now let’s configure our Nginx to run our Node.js server.

How are nginx configs set up? Configs are stored in plain text files in sites-available with any name. Linking them into the sites-enabled folder will cause them to be read and used when nginx starts. All of the configs are combined together by nginx.

You can take a look at this config using cat.

$ cat /etc/nginx/sites-available/default

Let’s first remove the default config from sites-enabled, we will leave it in sites-available for reference.

$ sudo rm /etc/nginx/sites-enabled/default

Let’s create a config file in sites-available with the domain name.

$ sudo nano /etc/nginx/sites-available/api.tamilakam.in

The following is the config we are going to use. Type it in your file and save it, replacing your custom domain in the server_name field.

server {
listen 80;
server_name api.tamilakam.in;
location / {
proxy_set_header X - Real - IP $remote_addr;
proxy_set_header Host $http_host;
proxy_pass http: //127.0.0.1:4500;
}
}

This will forward all HTTP traffic from port 80 to port 4500.

We are listening to the port 4500 where our Node.js server runs and redirecting it to api.tamilakam.in.

Link the config file in sites-enabled (this will make it seem like the file is actually copied insites-enabled).

$ sudo ln -s /etc/nginx/sites-available/api.tamilakam.in /etc/nginx/sites-enabled/api.tamilakam.in

Read more about symbolic links here if they are unfamiliar.

Restart nginx for the new config to take effect.

$ sudo service nginx restart

That’s it. Visit https://api.tamilakam.in and our Node.js API server is ready.

Deploy your React app in production and map your custom domain.

You can refer the below link where I have created a complete sample React application, uploaded it in BitBucket and hosted it as a production application in Amazon EC2 instance with Nginx configured.

You can use the same instance to run the client by following the below tutorial.

Yes. Now we are running both Server and the Client in the same instance in Amazon EC2.

If you have any queries, let me know in the comments.

Thank you.

References:

More by Balasubramani M

Topics of interest

More Related Stories