Codezera's blog
NGINX Reverse Proxy: Streamlining Your Full Stack Web App Deployment

NGINX Reverse Proxy: Streamlining Your Full Stack Web App Deployment

Bhavesh Yadav's photo
Bhavesh Yadav
·

5 min read

Table of contents

In this blog, we will discuss how to configure Nginx as a reverse proxy for a full-stack web application with a frontend on React and a backend on Node.js. We will cover the following topics:

  1. Introduction to Nginx

  2. Setting up a React frontend and Node.js backend

  3. Configuring Nginx as a reverse proxy

  4. Testing the setup

Let's get started!

Introduction to Nginx

Nginx is a popular open-source web server that can also be used as a reverse proxy, load balancer, and HTTP cache. It is known for its high performance, stability, and low resource consumption. Nginx is widely used in production environments to serve static and dynamic content and to proxy requests to backend servers. If you want more information then read my previous blog here.

Setting up a React frontend and Node.js backend

Before we start configuring Nginx, we need to set up a React frontend and a Node.js backend. For the purpose of this tutorial, we will create a simple web application that displays a list of users and their details.

Setting up the React frontend

To set up the React frontend, we will use the create-react-app . You can create a new React project using the following command:

npx create-react-app my-app

This will create a new directory called my-app with the basic structure of a React application. You can then navigate to the my-app directory and start the development server using the following commands:

cd my-app
npm start

This will start the development server at http://localhost:3000. You can open this URL in your web browser to see the default React app.

Setting up the Node.js backend

To set up the Node.js backend, we will create a simple Express server that serves a JSON API. First, create a new directory for the backend and navigate to it:

mkdir backend
cd backend

Next, initialize a new Node.js project using the following command:

npm init -y

This will create a package.json file with the default settings. Next, install the express package using the following command:

npm install express

Once you have installed express, create a new file called server.js with the following code:

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

const users = [
  { id: 1, name: 'Alice', email: 'alice@example.com' },
  { id: 2, name: 'Bob', email: 'bob@example.com' },
  { id: 3, name: 'Charlie', email: 'charlie@example.com' },
];

app.get('/api/users', (req, res) => {
  res.json(users);
});

app.listen(5000, () => {
  console.log('Server started on port 5000');
});

This will create a simple Express server that serves a JSON API at http://localhost:5000/api/users. You can start the server using the following command:

node server.js

This will start the server at http://localhost:5000. You can open this URL in your web browser to see the JSON API.

Configuring Nginx as a reverse proxy

Now that we have set up the React frontend and Node.js backend, we can configure Nginx as a reverse proxy to serve both applications from a single domain.

Installing Nginx

If you don't have Nginx installed, you can install it using the following command:

sudo apt-get install nginx

This will install Nginx on your system.

Configuring Nginx

To configure Nginx as a reverse proxy, we need to create a new configuration file in the /etc/nginx/sites-available directory. You can create a new file called my-app using the following command:

sudo nano /etc/nginx/sites-available/my-app

This will open a new file in the Nano text editor. You can then paste the following configuration:

server {
  listen 80;
  server_name my-app.com;

  location / {
    root /var/www/my-app/build;
    index index.html;
    try_files $uri $uri/ /index.html;
  }

  location /api/ {
    proxy_pass http://localhost:5000/;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
  }
}

Let's go through this configuration line by line:

  • server: This defines a new server block.

  • listen: This specifies the port that Nginx should listen on. In this case, we are listening on port 80, which is the default HTTP port.

  • server_name: This specifies the domain name that Nginx should respond to. In this case, we are using my-app.com.

  • location /: This defines a location block for the root URL. We are serving the React frontend from the /var/www/my-app/build directory, which is the directory where create-react-app builds the production version of the app. We are also specifying the index.html file as the default file to serve, and using the try_files directive to handle requests for non-existent files.

  • location /api/: This defines a location block for the API URL. We are proxying requests to http://localhost:5000, which is where our Node.js backend is running. We are also setting some headers to pass along the original client IP address.

Once you have pasted this configuration, save the file and exit the text editor.

Next, we need to create a symbolic link to this file in the /etc/nginx/sites-enabled directory. You can do this using the following command:

sudo ln -s /etc/nginx/sites-available/my-app /etc/nginx/sites-enabled/

This will create a symbolic link to the my-app configuration file in the sites-enabled directory.

Finally, we need to test the Nginx configuration and restart the Nginx service. You can do this using the following commands:

sudo nginx -t
sudo systemctl restart nginx

The first command tests the Nginx configuration for syntax errors, and the second command restarts the Nginx service.

Testing the setup

Now that we have configured Nginx as a reverse proxy, we can test the setup by opening the domain name that we specified in the Nginx configuration (my-app.com) in our web browser.

If everything is configured correctly, you should see the React app running at the root URL (/), and the JSON API running at the /api/users URL.

Congratulations! You have successfully configured Nginx as a reverse proxy for a full stack web application with a frontend on React and a backend on Node.js.

Conclusion

In this tutorial, we have discussed how to configure Nginx as a reverse proxy for a full stack web application with a frontend on React and a backend on Node.js. We have covered the basics of setting up a React frontend and a Node.js backend, and we have explained how to configure Nginx to serve both applications from a single domain. We hope that this tutorial has been helpful, and that you now have a better understanding of how to use Nginx as a reverse proxy.

nginxNginx configuration guideReverse Proxyproxy