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, ability to run a few commands and a javascript project running on some port number. For our demonstration here, we will use a t2micro ec2 instance with Ubuntu18 OS. 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 needs to be allowed by the system firewall, nginx registers itself to the firewall which make 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:

Nginx Full: Allows traffic to flow from port 80 (normal, unencypted) and on port 443 (SSL encrypted)

Nginx HTTP: Allows traffic to flow from port 80 (normal, unencypted) only.

Nginx HTTPS: Allows traffic to flow from port 443 (SSL encrypted) only.

Choose as 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

Status: active

To                         Action      From
--                         ------      ----
OpenSSH                    ALLOW       Anywhere                  
Nginx HTTP                 ALLOW       Anywhere                  
OpenSSH (v6)               ALLOW       Anywhere (v6)             
Nginx HTTP (v6)            ALLOW       Anywhere (v6)

Step 3: Start the web server

Now just 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: en
 Active: active (running) since Tue 2020-04-07 07:32:28 UTC; 4 days ago
 Docs: man:nginx(8)
 Process: 25372 ExecStop=/sbin/start-stop-daemon --quiet --stop --retry QUIT/5
 Process: 25386 ExecStart=/usr/sbin/nginx -g daemon on; master_process on; (cod
 Process: 25375 ExecStartPre=/usr/sbin/nginx -t -q -g daemon on; master_process
 Main PID: 25390 (nginx)
 Tasks: 2 (limit: 2361)
 CGroup: /system.slice/nginx.service
 ├─25390 nginx: master process /usr/sbin/nginx -g daemon on; master_pr
 └─25393 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.

$ sudo nano /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;
        }
}

And 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.