Setting Up NGINX as a Reverse Proxy for Self-Hosted Applications

When self-hosting applications on a single server, managing ports and access points can become a complex task. NGINX, a lightweight yet powerful web server, is perfect for acting as a reverse proxy to direct traffic to the correct applications and streamline port management. Here’s a guide, based on my years in IT, that simplifies using NGINX to host multiple services.

Why Use NGINX as a Reverse Proxy?

NGINX as a reverse proxy allows you to:

  • Host multiple applications on a single IP address by routing traffic based on the URL or domain name.
  • Securely expose only the necessary services and avoid using non-standard ports.
  • Improve performance with NGINX’s caching and load-balancing features.

In short, it makes multi-app hosting on a single server efficient and manageable.

Prerequisites

  • A server running Ubuntu or Debian (or another Linux distribution)
  • Root or sudo access
  • NGINX installed (sudo apt install nginx if not already installed)

Let’s get started with configuring NGINX as a reverse proxy.

Step 1: Install and Configure NGINX

If you haven’t installed NGINX yet, do so with:

sudo apt update && sudo apt install nginx -y

Once installed, you can verify it’s running by going to your server’s IP in a web browser. You should see the NGINX welcome page.

Step 2: Basic NGINX Reverse Proxy Setup

To set up a reverse proxy for your applications, you’ll create configuration files in the /etc/nginx/sites-available/ directory. Each file will correspond to one service.

Example Scenario

Imagine you have two applications running on the same server:

  • App1 on port 3000
  • App2 on port 4000

We’ll create separate server blocks for each application and configure NGINX to map each one to a unique subdomain.

Step 3: Configure NGINX to Map Subdomains

  1. Create a configuration file for each application.

    For App1, run:

    sudo nano /etc/nginx/sites-available/app1.yourdomain.com

    Add the following configuration:

    server {
    listen 80;
    server_name app1.yourdomain.com;

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

    This tells NGINX to forward requests from app1.yourdomain.com to your first application running on port 3000.

  2. Repeat for App2:

    sudo nano /etc/nginx/sites-available/app2.yourdomain.com

    Add the following configuration:

    server {
    listen 80;
    server_name app2.yourdomain.com;

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

  3. Enable the sites by creating symbolic links in /etc/nginx/sites-enabled/:

    sudo ln -s /etc/nginx/sites-available/app1.yourdomain.com /etc/nginx/sites-enabled/
sudo ln -s /etc/nginx/sites-available/app2.yourdomain.com /etc/nginx/sites-enabled/

  4. Test the NGINX configuration:

    sudo nginx -t

    If there are no errors, restart NGINX:

    sudo systemctl restart nginx

Your applications should now be accessible via http://app1.yourdomain.com and http://app2.yourdomain.com.

Step 4: Optional - Enable HTTPS with Let’s Encrypt

For production environments, it’s crucial to secure your applications with HTTPS. Let’s Encrypt offers free SSL certificates that are easy to set up with NGINX.

  1. Install Certbot:

    sudo apt install certbot python3-certbot-nginx -y

  2. Run Certbot to obtain and configure the SSL certificates:

    sudo certbot --nginx -d app1.yourdomain.com -d app2.yourdomain.com

  3. Follow the prompts to complete the setup. Certbot will automatically configure NGINX to redirect HTTP to HTTPS.

    Once finished, your applications will be accessible securely via HTTPS.

Step 5: Managing Multiple Ports on the Same Server

One of the great things about NGINX is that it allows you to map multiple applications running on different ports to unique subdomains or paths without exposing those ports directly. This setup enhances security, as only NGINX is publicly accessible.

For example, you could map additional applications as follows:

  • http://app3.yourdomain.com for an app running on port 5000.
  • http://app4.yourdomain.com for an app running on port 6000.

Simply repeat the steps above, creating a new NGINX configuration file and setting the proxy_pass directive to the appropriate port.

Common Issues and Troubleshooting

  • 502 Bad Gateway: This usually occurs if NGINX can’t reach the application. Check that the application is running on the specified port and verify the proxy_pass directive.
  • Firewall issues: Ensure that your firewall allows traffic on HTTP and HTTPS (ports 80 and 443).
  • DNS configuration: Make sure your subdomains point to your server’s IP address in your DNS provider’s settings.

Final Thoughts

Using NGINX as a reverse proxy is a powerful way to manage multiple applications on a single server. By configuring it properly, you can self-host multiple applications with ease, all while keeping your network secure and manageable.

“Setting up NGINX as a reverse proxy might seem complex at first, but once configured, it simplifies managing multiple applications. It’s an essential tool for anyone hosting several services on a single server.”

With NGINX and the steps above, you’ll have a robust, multi-app setup ready to go! Happy hosting.