Configuring Multiple Ports With Nginx Reverse Proxies on the Same Domain

This content originally appeared on DEV Community and was authored by Somil Gupta

Recently, while working on one of the projects, I was stuck in a situation where I wanted to run two applications on the same server and then consume the application using two different ports.
Something like this:

> Fowarding http://example.com:PORTA -> 127.0.0.1:8080

> Fowarding http://example.com:PORTB -> 127.0.0.1:8081

Usually, when I have one server and one port mapping, I go to Ngrok because of its hassle-free setup. But this time, it was a new challenge.

After some research, I found out that:

• Free ngrok.io subdomains: These only work with port 80 (standard HTTP).
• Ngrok’s TLS “reserved” domains:
  • These are better for using non-standard HTTP ports.
  • When you set one up, ngrok assigns you a random port.
  • This port is different from your local service’s port.
• Separate domains: The HTTP tunnel (port 80) and the custom port tunnel will have different domain names. You can’t use one domain for both.
• Free account limitations:
  • With a free ngrok account, you can only use the standard HTTP tunnel on port 80.
  • You cannot use TLS “reserved” domains or expose services on non-standard ports without upgrading to a paid plan.

This setup means that if you need to expose services on multiple ports or use custom domains, you’ll need to upgrade to a paid ngrok plan. With a free account, you’re limited to a single HTTP tunnel on the standard web port. In short, it was not possible.

After losing hope with Ngrok, I started looking into Nginx w/ multiple ports. And was finally able to achieve it. Let’s dive into the approach.

Understanding Nginx as a reverse proxy:

When NGINX proxies a request, it sends it to a specified proxied server, fetches the response, and sends it back to the client. This makes it an ideal solution for exposing multiple applications running on different ports.

location /some/path/ {
    proxy_pass http://www.example.com/link/;
}

Let’s start with the Nginx setup and then move on to the configuration for multiple applications.

• Install Nginx:

# For Amazon Linux (AL2)
sudo yum install nginx

# For Ubuntu
sudo apt-get update
sudo apt-get install nginx

• Start and enable Nginx:

sudo systemctl start nginx
sudo systemctl enable nginx
sudo systemctl status nginx

• For monitoring logs:

sudo tail -f /var/log/nginx/error.log
sudo tail -f /var/log/nginx/access.log

Now, let’s configure Nginx to act as a reverse proxy for multiple applications:

http {
    server {
        listen 7233;
        server_name example.com;

        location / {
            proxy_pass http://127.0.0.1:8080;
            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;
        }
    }

    server {
        listen 8233;
        server_name example.com;

        location / {
            proxy_pass http://127.0.0.1:8081;
            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;
        }
    }
}

Here’s what this configuration does:

• It sets up two server blocks, each listening on a different port (7233 and 8233). Each server block forwards all traffic (location /) to a different local port (8080 and 8081 respectively).
• The proxy_pass directive specifies where the traffic should be forwarded.

To use this configuration:

• Save this configuration to /etc/nginx/nginx.conf or include it in your main Nginx configuration file.
• Ensure that your applications are running on 127.0.0.1:8080 and 127.0.0.1:8081.
• Test the Nginx configuration: sudo nginx -t If the test passes, reload Nginx:

sudo systemctl reload nginx

Conclusion

• We’ve configured Nginx as a reverse proxy to forward traffic from two external ports to two separate internal applications.
• This setup exposes multiple services through a single server, enhancing flexibility and security.
• Using Nginx, we’ve created a scalable solution that can be easily extended to accommodate more applications.

Thanks for reading my story. If you want to read more stories like this, I invite you to follow me.
Till then, Sayonara! I wish you the best in your learning journey.

This content originally appeared on DEV Community and was authored by Somil Gupta