Configuring Multiple Port Tunnels in Ngrok: Debugging Multiple Services Under the Same Domain

Core Mechanism of Ngrok Multi-Port Tunnel Configuration

Ngrok, as a popular tunneling tool, allows developers to expose local services to the public internet for remote access and debugging. In practical development scenarios, it is often necessary to debug multiple local services simultaneously under the same domain, such as running both frontend and backend applications. Ngrok supports this requirement through its multiple tunnels feature, but proper configuration is essential.

Defining Multiple Tunnels via Configuration File

Ngrok's multiple tunnels functionality is primarily implemented through a configuration file. The following is a typical example showing how to create tunnels for two local ports (50001 and 50002) mapped to the same domain example.ngrok.com:

authtoken: 4nq9771bPxe8ctg7LKr_2ClH7Y15Zqe4bWLWF9p
tunnels:
  first-app:
    addr: 50001
    proto: http
    hostname: example.ngrok.com
    host_header: first-app.example.ngrok.com
  second-app:
    addr: 50002
    proto: http
    hostname: example.ngrok.com
    host_header: second-app.example.ngrok.com

In this configuration, the tunnels section defines two independent tunnels: first-app and second-app. Each tunnel specifies the local port (addr), protocol (proto), target domain (hostname), and host header (host_header). The host_header is a key parameter that enables Ngrok to differentiate traffic under the same domain via different subdomains or paths, ensuring requests are correctly routed to the corresponding local service.

Starting and Running Tunnels

After configuration, use the following command to start all tunnels:

ngrok start --all

This command reads the configuration file and starts all defined tunnels simultaneously. Ngrok generates public access addresses for each tunnel, allowing developers to access the corresponding local services. For example, the first-app tunnel might generate http://first-app.example.ngrok.com, while the second-app tunnel generates http://second-app.example.ngrok.com. Although they share the base domain, logical separation is achieved through host_header.

Differences Between Free and Paid Plans

There are significant differences between Ngrok's free and paid plans in multi-tunnel configuration. The free plan does not support custom domains (hostname) or host headers (host_header), thus preventing multi-port mapping under the same domain. An example free plan configuration is:

authtoken: 6yMXA63qefMZqCWSCHaaYq_5LufcciP1rG4LCZETjC6V
tunnels:
  first:
    addr: 3002
    proto: http
  second:
    addr: 8080
    proto: http

In this configuration, each tunnel receives different random subdomains (e.g., abc123.ngrok.io and def456.ngrok.io), which cannot be unified under the same domain. This may impose limitations for debugging scenarios requiring the same-origin policy, as browsers treat different subdomains as different origins.

Supplementary Solutions and Considerations

If using the free plan or encountering configuration limitations, consider integrating local proxy tools like Nginx as a supplementary approach. For example, configure Nginx to proxy requests from different paths to different local ports:

http {
    server {
        listen       7777;
        server_name  localhost;

        location / {
            proxy_pass http://127.0.0.1:5000;
        }

        location /api {
            proxy_pass http://127.0.0.1:8000;
        }
    }
}

This method routes requests under the /api path to port 8000 and other requests to port 5000, then exposes Nginx's port 7777 through a single Ngrok tunnel. However, this approach depends on the application's routing structure and may not suit all scenarios.

The default location of the configuration file varies by operating system and can be queried via Ngrok documentation. The authentication token (authtoken) can be obtained from the Ngrok dashboard, available in all plans. When properly configured, the multiple tunnels feature significantly enhances debugging efficiency for multi-service applications, particularly in environments like IIS Express on Windows.