Deploy the Node and React JS applications EC2 instances/Virtual Machines

Host React Web applications and NodeJS+Express APIs using NGINX web server on Linux Virtual Machine

Deploying applications in Virtual Servers gives you scalability, high availability, low latency, consistency, security, and better hardware utilisation.

Create a node.js application in the local environment and test it over cases.

Create a Linux virtual machine/server and connect to it. Refer this tutorial

Install the node.js packages

Install the node.js packages in public or private virtual machines.

curl -s https://deb.nodesource.com/setup_16.x | sudo bash
sudo apt-get install -y nodejs

Check the node version

node -v
npm -v

check the node versions

So node.js, npm(node package manager) is successfully installed on your public or private virtual machine.

Host the node.js application on virtual server

Create a Git repository for your node.js application and push it to GitHub. Use git to clone that application code into the virtual machine.

git clone https://github.com/<username>/<project_name>
cd <project_name>

Install the node packages

npm ci
#Run the server file(server.js/app.js)
node server

Your application is running in the virtual machine locally on the port 3000.

Note: Node.js application is configured to listen on localhost so it can be accessed only from the localhost. It can not be accessed from the remote host.

Now our task is to:

1. Auto-run this node server file when we virtual machine/server.
2. Port forward the traffic from port 80 to port 3000 to reach our node application.

Create a systemd file to run the node.js application on server start

By creating the systemd file, our node.js application will start and run in the background when start our virtual server/machine. Let’s create a systemd unit file for our node.js application

sudo nano /lib/systemd/system/app.service

Add the following lines:

Change the User: <your virtual server username>

Working Directory: <location of your node.js server file>

ExecStart: /usr/bin/node <your server file>

Save your file and reload the daemon to load your service file.

sudo systemctl daemon-reload

Start and enable the app.service

sudo systemctl start app
sudo systemctl enable app
#Check the status of the service
sudo systemctl status app

Now your application is started and running on localhost 3000 port.

Configure nginx as Reverse proxy

At this point your application is running on localhost, accessible only from local machine. It can’t be accessed from remote machines.

So we need to configure the nginx as reverse proxy to our app.service so that our node.js application can be accessed from remote machines on the port 80.

First install the nginx server

sudo apt install nginx
sudo nano /etc/nginx/sites-available/default

Clear everything in the default configuration file and paste these lines

As my Express server is listening on localhost and port 3000, I have given that in upstream backend.

Save and close the file. check for syntax error

sudo nginx -t

If everything is ok, then you should get the following output:

configuration syntax is ok

Finally, restart the nginx service to apply the configuration file changes and check the status of nginx.

sudo systemctl restart nginx
sudo systemctl status nginx

web server and reverse proxy server started

Verify the application

Now use the endpoints or domain of the virtual machine/server in the browser to check the node.js application is running in the remote machines or not.

You have now successfully hosted a node.js application on Linux server.

Host the react js applications on Virtual server

Create a new virtual machine for hosting the react js application. Install the node.js packages and enter into the machine using SSH key using the process explained above.

Step 1: Install nginx web server

Install the nginx web server and check the version.

sudo apt install nginx
nginx -v

If nginx is successfully installed on your server machine, you will display a page a like this when browse your server domain in any remote machine.

nginx is successfully installed on virtual machine/server

Enable nginx so that it automatically starts when your server starts. Check the status of it.

sudo systemctl enable nginx
sudo systemctl status nginx

nginx is active(running)

Step 2: Clone and build the react application

Clone your react project. Install the node packages.

git clone https://github.com/<username>/<project_name>
cd <project_name>
#Install node modules
npm ci

Build the project in the project root directory. This creates an optimised production build and put your resources in the folder.

npm run build

Step 3: Copy your build folder projects into var/www/html

Copy your build folder projects to var/www/html so that it can run the projects of build folder when we hit the server endpoints.

sudo cp -r /home/<user-name>/<project-root>/build/. /var/www/html

Step 4: Configure nginx as reverse proxy to serve static files

Configure the nginx to serve the static files.

sudo vi /etc/nginx/sites-available/default

Clear the defaults and paste the lines. Click i to enter into insert mode.

Restart the nginx web server.

sudo systemctl restart nginx

Step 4: Verify the application

In any of the remote machine browser enter the domain name or endpoint of the server to verify your react js application.

react js is successfully installed on virtual server

Author: Bhuvan Prasad

1. Linkedin

Thanks for your time!