Configuring Multiple Ports With Nginx Reverse Proxies on the Same Domain

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.