Set Up Nginx to Reverse Proxy Angular & Node Apps

A reverse proxy is a special web server that accepts requests from various clients and forwards each request to the appropriate server to handle it. It returns the server's response to the originating client. It is usually positioned at the network’s edge to intercept client requests before they reach the origin server.

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

Status: active To
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 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

Reverse Proxy

angular apps

Similar blogs

blog

Technology

4 min

How is AI Being Used in Manufacturing Industry?

The manufacturing industry has long been a backbone of economic development, driving innovation and productivity across various sectors. However, as global competition intensifies, manufacturers are under increasing pressure to optimize operations, reduce costs, and deliver higher-quality products faster. This is where Artificial Intelligence in manufacturing comes into play. By harnessing the power of AI, manufacturers can revolutionize their processes, making them more efficient, flexible, and responsive to market demands.

author
blog

Technology

7 min

Scaling from MVP to Market Leader: How Android App Development for Startups Drives Business Growth

Launching an MVP (Minimum Viable Product) is good to drive traffic and growth, but they need to focus on improving usability and scalability. To get the spotlight, businesses must present something exclusive and exceptional that their competitor hasn’t launched yet. This product must be worthy of early users, align with and validate user problems, help sustain for an extended period, and cultivate a loyal customer base. As Android holds 70 % of the marketplace, it is worth navigating the route with Android app development for startups. Thus, keep an eye on the market and plan for scaling by integrating the latest technologies.

author
blog

Technology

5 min

Ensuring Security in Flutter Apps: Implementing Robust Authentication, Data Encryption, and API Management

No matter what you're using to build your app (Flutter or anything else), keeping data and keys safe is super important. Messing this up can cause serious security problems. That's why developers use strong security stuff like encryption, security certificates, and clean code. This helps stop data leaks and cyberattacks, and keeps things reliable.

author

Let’s Start a conversation!

Share your project ideas with us !

Talk to our subject expert for your project!

Feeling lost!! Book a slot and get answers to all your industry-relevant doubts

Subscribe QL Newsletter

Stay ahead of the curve on the latest industry news and trends by subscribing to our newsletter today. As a subscriber, you'll receive regular emails packed with valuable insights, expert opinions, and exclusive content from industry leaders.