Setting Up Nginx as a Reverse Proxy for Your Full Stack App

As full stack developers, we often face challenges when deploying applications to production. Serving the backend (e.g., Node.js/Express) and the frontend (e.g., React or Vue) on different ports can cause complications for users and for managing security. This is where Nginx steps in as a reverse proxy to streamline routing, improve performance, and simplify deployment.

If you are a self-taught coder or a junior developer, mastering Nginx will make you stand out when deploying apps to servers or VPS environments. Let’s walk through how to set up Nginx as a reverse proxy for your full stack application.

What is Nginx and Why Use it as a Reverse Proxy?

Nginx is a high-performance web server that can also act as a load balancer, caching server, and reverse proxy.

A reverse proxy sits between the client and your server, forwarding requests to the appropriate service, such as your Node.js backend.

Benefits of Using Nginx as a Reverse Proxy

• Single Entry Point: Serve your frontend and backend on the same domain.
• Enhanced Security: Hide your server ports (like 3000 or 5000).
• Performance Boost: Built-in caching and load balancing.
• SSL Termination: Manage HTTPS certificates easily.

Step-by-Step: Setting Up Nginx Reverse Proxy

Step 1: Install Nginx

sudo apt update
sudo apt install nginx

Check the status:

sudo systemctl status nginx

Step 2: Configure Your Node.js Backend

Let’s assume your Node.js app runs on port 3000.

// server.js
const express = require('express');
const app = express();

app.get('/', (req, res) => {
  res.send('Hello from Node.js backend!');
});

app.listen(3000, () => console.log('Server running on port 3000'));

Step 3: Set Up Nginx Configuration

Create a new site configuration file:

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

Add the following reverse proxy settings:

server {
    listen 80;
    server_name yourdomain.com;

    location /api {
        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;
    }

    location / {
        root /var/www/fullstack-app;
        index index.html;
    }
}

Enable the configuration and restart Nginx:

sudo ln -s /etc/nginx/sites-available/fullstack-app /etc/nginx/sites-enabled/
sudo nginx -t
sudo systemctl restart nginx

Step 4: Serve Your Frontend

Place your React (or other frontend) build files in /var/www/fullstack-app. Nginx will handle static files automatically.

Related Tools & Resources

• Understanding REST APIs with Real-World Examples
• Certbot for SSL – Automate SSL/TLS certificate generation for Nginx.
• PM2 – Manage your Node.js processes effectively.

Common Nginx Troubleshooting Tips

• Use sudo nginx -t to check for syntax errors.
• Logs can be found in /var/log/nginx/error.log.
• Ensure your firewall allows HTTP and HTTPS traffic:

sudo ufw allow 'Nginx Full'

Conclusion

Nginx as a reverse proxy is a must-have tool in any full stack developer’s deployment toolkit. It simplifies hosting, enhances security, and improves overall performance.

Try setting it up for your next project and share your experience in the comments!

💖

Enjoyed the Post?

If my blog helped you, please consider supporting me!

Support Me 💖