Back

/ 4 min read

Nginx Reverse Proxy

Last Updated:

Introduction

When developing web applications, we often run multiple services on our local machine. For example, you might have a frontend application running on localhost:3000 and a backend API running on localhost:8000. While you can access these services using localhost:port, it’s more convenient to use subdomains like frontend.domain.com and backend.domain.com.

In this article, we’ll show you how to set up a reverse proxy with Nginx to route traffic from subdomains to your local services. This way, you can access your services using subdomains instead of localhost:port.

Terminal Based

If you are using a terminal-based environment, you can use the following steps to set up a reverse proxy with Nginx.

Prerequisites

Before you begin, make sure you have the following prerequisites:

  • A domain name pointing to your local machine (e.g., domain.com).
  • Nginx installed on your local machine. You can install Nginx using your package manager (e.g., apt, yum, brew).

Setting Up Nginx

1. Bind Subdomains to Localhost

First, you need to bind the subdomains to localhost in your /etc/hosts file. Open the /etc/hosts file with a text editor and add the following lines:

Terminal window
# add the following lines to /etc/hosts
127.0.0.1 frontend.domain.com
127.0.0.1 backend.domain.com

2. Configure Nginx

Next, you need to configure Nginx to route traffic from subdomains to your local services. Create a new Nginx configuration file in /etc/nginx/sites-available (e.g., domain.com) and add the following configuration:

server {
    listen 80;
    server_name frontend.domain.com;


    location / {
        proxy_pass http://localhost:3000;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }
}


server {
    listen 80;
    server_name backend.domain.com;


    location / {
        proxy_pass http://localhost:8000;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }
}

In the configuration above, we define two server blocks for frontend.domain.com and backend.domain.com. Each server block listens on port 80 and proxies traffic to the respective local service.

3. Enable the Configuration

Next, create a symbolic link to enable the configuration file in /etc/nginx/sites-enabled:

Terminal window
sudo ln -s /etc/nginx/sites-available/domain.com /etc/nginx/sites-enabled/domain.com

4. Restart Nginx

Finally, restart Nginx to apply the changes:

Terminal window
sudo nginx -t
sudo systemctl restart nginx

5. Test the Setup

To test the setup, open your browser and navigate to http://frontend.domain.com and http://backend.domain.com. You should see your frontend and backend applications running on the respective subdomains.

Docker Based + Dashboard

Thanks to Nginx Proxy Manager you can easily set up a reverse proxy with Nginx using Docker and a web-based dashboard.

Prerequisites

Before you begin, make sure you have the following prerequisites:

  • Docker installed on your local machine. You can install Docker using the official installation guide.
  • Port 80 and 443 available on your local machine.

Setting Up Nginx Proxy Manager

1. Create a Docker Compose File

Create a new docker-compose.yml file in your project directory and add the following configuration:

services:
  app:
    image: 'jc21/nginx-proxy-manager:latest'
    restart: unless-stopped
    ports:
      - '80:80'
      - '81:81'
      - '443:443'
    volumes:
      - ./data:/data
      - ./letsencrypt:/etc/letsencrypt

2. Start the Docker Container

Run the following command to start the Docker container:

Terminal window
docker-compose up -d

3. Access the Dashboard

Open your browser and navigate to http://localhost:81 to access the Nginx Proxy Manager dashboard. You can login with the default credentials:

email: admin@example.com
password: changeme

4. Add a Proxy Host and more

You can follow the instructions in the Nginx Proxy Manager documentation to add a new proxy host and configure routing rules using the web-based dashboard.

SSL Certificate with mkcert

The easiest way to get a valid SSL certificate is to use Let’s Encrypt. However, if you want to use a self-signed certificate for development purposes, you can use mkcert.

1. Install mkcert

First, install mkcert on your local machine:

Terminal window
sudo apt install libnss3-tools wget


# download mkcert
wget -O mkcert https://github.com/FiloSottile/mkcert/releases/download/v1.4.4/mkcert-v1.4.4-linux-amd64
chmod +x mkcert
sudo mv mkcert /usr/local/bin/

2. Generate SSL Certificates

Run the following commands to generate SSL certificates for your subdomains:

Terminal window
mkcert -install
mkcert frontend.domain.com backend.domain.com

You should see the generated certificates (frontend+backend.pem and frontend+backend-key.pem) in your current directory.

3. Configure Nginx

Update your Nginx configuration to use the SSL certificates:

server {
    listen 443 ssl;
    server_name frontend.domain.com;


    ssl_certificate /path/to/frontend+backend.pemm;
    ssl_certificate_key /path/to/frontend+backend-key.pem;


    location / {
        proxy_pass http://localhost:3000;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }
}
...

Conclusion

In this article, we’ve shown you how to set up a reverse proxy with Nginx to route traffic from subdomains to your local services. Whether you’re using a terminal-based environment or Docker, you can easily configure Nginx to proxy traffic to your local services using subdomains. Additionally, we’ve covered how to generate SSL certificates for your subdomains using mkcert for development purposes.