How can I use "ng serve" with multiple apps hosted through an nginx reverse proxy?

Question

My employer has a number of Angular 2+ apps that are under active development. These apps are hosted behind an nginx reverse proxy. For example, during development, one app might be reachable at:

https://localhost/my-app-1

while another might be found at:

https://localhost/my-app-2

To accomplish this proxying behavior, I configure each Angular app to use a different port when hosted using ng serve:

// in angular.json
{
    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
    "projects": {
        "my-project": {
            "architect": {
                "serve": {
                    "options": {

                        // each app gets its own port
                        "port": 4201

                    }
                }
            }
        }
    }
}

Then, I use nginx to proxy traffic to the appropriate port using this nginx configuration:

# proxy my-app-1 requests
location ^~ /my-app-1/ {

    proxy_pass http://127.0.0.1:4201/;

    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection 'upgrade';
    proxy_set_header Host $host;

    proxy_http_version 1.1;
    proxy_cache_bypass $http_upgrade;
}

# proxy my-app-2 requests
location ^~ /my-app-1/ {

    proxy_pass http://127.0.0.1:4202/;

    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection 'upgrade';
    proxy_set_header Host $host;

    proxy_http_version 1.1;
    proxy_cache_bypass $http_upgrade;
}

# proxy ng serve live reload traffic
location ^~ /sockjs-node/ {

    # Notice that the port is hardcoded
    # in this proxy configuration
    proxy_pass http://127.0.0.1:4201;

    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection 'upgrade';
    proxy_set_header Host $host;

    proxy_http_version 1.1;
    proxy_cache_bypass $http_upgrade;
}

This works, with one caveat - the /sockjs-node/ traffic is only routed to one of the two apps (in this example, the one hosted at port 4201). Because of this, the live reload feature only works with one app at a time.

Here's my question: is there a way to configure nginx or the Angular development server to allow me to use live reload for all of my apps when using ng serve through an nginx proxy? For example, I'd like to have two instances of ng serve running simultaneously - one for https://localhost/my-app-1 and one for https://localhost/my-app-2 - and have live reload work for both apps.

I've tried conditionally routing the traffic based on the HTTP Referer header (the $http_referer variable in nginx), but not all of the live reload traffic includes this header.

I'm using version 6 of Angular and the Angular CLI.

Answer 1

You'll have to run ng serve --publicHost https://localhost/my-app-1 for your first app. And the corresponsing public hosts for the other apps. This will ensure that the traffic from /sockjs-node/ is send to different urls.

From the angular docs of --publicHost "The URL that the browser client (or live-reload client, if enabled) should use to connect to the development server. Use for a complex dev server setup, such as one with reverse proxies."