angular - 如何将 "ng serve"用于通过 nginx 反向代理托管的多个应用程序？

Question

我的雇主有许多 Angular 2+ 应用程序正在积极开发中。这些应用程序托管在 nginx 反向代理后面。例如，在开发期间，一个应用程序可能可以访问:

https://localhost/my-app-1

而另一个可以在以下位置找到:

https://localhost/my-app-2

为了实现这种代理行为，我将每个 Angular 应用配置为在使用 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

                    }
                }
            }
        }
    }
}

然后，我使用 nginx 将流量代理到使用此 nginx 配置的适当端口:

# 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;
}

这是有效的，但有一个警告 - /sockjs-node/ 流量仅路由到两个应用程序中的一个(在本例中，托管在端口的应用程序) 4201)。因此，实时重新加载功能一次只能用于一个应用。

这是我的问题:有没有一种方法可以配置 nginx 或 Angular 开发服务器，以允许我在使用 ng serve 时为我的所有应用程序使用实时重新加载nginx 代理？例如，我希望同时运行两个 ng serve 实例 - 一个用于 https://localhost/my-app-1 ，一个用于 https://localhost/my-app-2 - 并为两个应用程序进行实时重新加载。

我已尝试根据 HTTP Referer header (nginx 中的 $http_referer 变量)有条件地路由流量，但并非所有实时重新加载流量都包含此 header 。

我使用的是 Angular 版本 6 和 Angular CLI。

Answer 1

您必须为您的第一个应用程序运行 ng serve --publicHost https://localhost/my-app-1。以及其他应用程序的相应公共(public)主机。这将确保来自 /sockjs-node/ 的流量被发送到不同的 url。

来自 --publicHost 的 Angular 文档“浏览器客户端(或实时重新加载客户端，如果启用)应该用来连接到开发服务器的 URL。用于复杂的开发服务器设置，例如具有反向代理的服务器。”