Hey guys, I am viral. I am a Full Stack Developer mainly working with Vuejs, Laravel, Nodejs and AWS. Today we will be learning how we can proxy requests on port 80 to a different port using Nginx Reverse Proxy so that we deploy a intermediate web-server to load-balance or use a single ssl for all our small servers or just as a POC for my company. Cheers!

This is a very basic tutorial and emphasizes understanding the reverse proxy feature of Nginx.

Let's begin,

We will use Nginx's Reverse Proxy since it is like something out of this world and blows my mind. What I am trying to achieve here is to understand how we can run an Nginx Server and proxy incoming requests from port 80 (Default port on most webservers) to a different port that is running a Nodejs server (Maybe port 3000). Let's assume port we are running our test Nodejs app on port 4040 for now.

We will start by setting up a Nodejs application using Express and socket so that we can see it in working and a Nginx server.

Nginx

To Perform this, you will need to have Nginx Setup. Once it is done, open up the default sites-available file located mostly at /etc/nginx/sites-available/

Use this package URL for the latest version of nginx :

sudo add-apt-repository -y ppa:nginx/development
sudo apt-get update

If you installed nginx properly then you will see a screen like this when you visit the server URL. I am using AWS for this tutorial so it should look like this.

If you are seeing the above image for your setup, then it is all perfectly done and we can proceed further.

Open the default config file of Nginx.

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

This is a bare basic nginx default config file and just has one listener which listens on port 80. So when a request comes in, it loads the file at /var/www/html as you can see in the root parameter above.

Our Nginx setup is done, we will come back to this in later part of this post. Let us move on to set up our Nodejs App. I will assume you have Nodejs and npm set up on your server.

Nodejs

Dependencies

In your project root

mkdir nodetestapp
cd nodetestapp
npm init
npm install express
touch index.js

Open index.js and paste the following code

const express = require('express');
const app = express();
const port = 4040;


app.get('/',(req,res) => {
        res.send('Hello world');
});

app.listen(port, () => {console.log('server running on port', port)});

Now run in the terminal

node index.js

and navigate to your SERVER_URL:4040 (Since my AWS security group is set to this). For me it is http://3.95.169.170:4040/. Replace the IP address with your server address. You should see a screen like this.

As you can see we are running a nodejs server on port 4040 and this is where everything gets weird. Some weird questions would be, why do I have to type 4040 after the URL with ":", why can it not be just port 80 so that I do not have to type it every time. We are going to solve this problem using Nginx Reverse Proxy. Since our setup is complete let us head back to the Nginx file and make some changes.

What we need to do:
1.) When we get a request on port 80, we will configure nginx to proxy it to port 4040 on our localhost since our nodejs is running there.
2.) Retrieve a successful response and display in the browser.

Open the Nginx Config file

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

Paste the following code in the location / {} block

proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
proxy_http_version 1.1;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Host $host;
proxy_pass http://localhost:4040;

In the above code block we are instructing Nginx to replace the request headers with some of our custom requirements like above and sending it to localhost:4040 since we are running our nodejs server on port :4040.

Save the file by pressing ESC key and then typing :wq and press ENTER

Restart Nginx

sudo service nginx reload

Start the nodejs server using

cd nodetestapp
node index.js

Open the browser and go to your server URL without the port and you would see your nodejs application running on port 80. However, we are still using port 4040 internally to run the Nodejs server.

If you understood everything and set up the way as above you should be able to see Nodejs output instead of the root that we set up in the Nginx default file.

My Case

This is a really bare bone understanding of how Nginx Reverse Proxy works behind the scenes. However, it is far more powerful than this. One of the best cases that I have come across using it is to set up a PHP and Nodejs Application on the same server running on port 80.

I certainly hope this helps you. Let me know if you have any questions in the comments below.

P.S: I am going to kill the server in demo. So do not bother hitting the URL.

Coverimage Credit : https://www.journaldev.com/