Set Up Nginx to Reverse Proxy Angular & Node Apps - Quokka Labs

Nginx, as we all know, is one of the most popular web servers in the world with a ton of cool features with its high performance and low memory footprint, as well as the ability to act as a reverse proxy which is beneficial if you have some javascript applications running on your server on different ports. But how do we set it up for this typical task? Well, not so typical after all as it's fairly simple to configure.

Prerequisites

Just a running Linux server instance, the ability to run a few commands, and a javascript project running on some port number. We will use a t2micro ec2 instance with Ubuntu18 OS for our demonstration here. We have a nodeJs app running on port 3000.

Step 1: Install Nginx

Since it is readily available in ubuntu's default repository so just a few commands should do it.

$ sudo apt-get update 
$ sudo apt-get
install nginx 

Step 2: Firewall configuration

For Nginx to run, it must be allowed by the system firewall. Nginx registers itself to the firewall, which makes the job a little bit easier. As we run the following command

$ sudo ufw app list 

It will fetch you a list of the application profiles as below:

Available applications: Nginx Full Nginx HTTP Nginx HTTPS OpenSSH

As you can see above, it shows three profiles:\r\r Nginx Full: Allows traffic to flow from port 80 (normal, unencrypted) and on port 443 (SSL encrypted)\ Nginx HTTP: Allows traffic to flow from port 80 (normal, unencrypted) only. Nginx HTTPS: Allows traffic to flow from port 443 (SSL encrypted) only. Choose your requirement, for now, we are going to allow all, so

$ sudo ufw allow 'Nginx Full' 

and then just check it for confirmation by

$ sudo ufw status 

It should give you something like the below

Step 3: Start the web server

Now start the server and check its status before we move to the main task. `

$ sudo service nginx start
$ sudo service nginx status

It should show something like the following:

nginx.service - A high performance web server and a reverse proxy server
     Loaded: loaded (/lib/systemd/system/nginx.service; enabled; vendor preset: enabled)
     Active: active (running) since Mon 2022-08-29 06:52:46 UTC; 39min ago
       Docs: man:nginx(8)
   Main PID: 9919 (nginx)
      Tasks: 2 (limit: 2327)
     Memory: 2.9M
        CPU: 50ms
     CGroup: /system.slice/nginx.service
             ├─9919 "nginx: master process /usr/sbin/nginx -g daemon on; master_process on;"
             └─9920 "nginx: worker process

With the server running, you can verify it by entering your public IP in the browser address bar, and the default nginx page should pop up!

Step 4: Configure the reverse proxy

Go down to nginx default site config file and open it to edit.\r\r

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

You will see the default server block and can remove all that. We will write our own server block to configure our reverse proxy:

server     
listen 80;        
listen 443 ssl;        
server_name localhost;        
ssl_certificate  /etc/nginx/ssl/server.crt;        
ssl_certificate_key /etc/nginx/ssl/server.pem;        
location / 
{
  proxy_pass http://localhost:3000;      
  proxy_http_version 1.1;         
  proxy_set_header Upgrade $http_upgrade;                 
  proxy_set_header Connection 'upgrade';                 
  proxy_set_header Host $host;                 
  proxy_cache_bypass $http_upgrade;        
}

\rAnd voila!! Thats all you've got to do. Now all requests coming to the web server will be reverse proxied to the application running on port 3000. If you just refresh the tab with your public IP, you should find your node app instead of the default nginx welcome page.

Tags