Как я могу использовать «ng serve» с несколькими приложениями, размещенными через обратный прокси-сервер nginx? - PullRequest
Новая
       13

Как я могу использовать «ng serve» с несколькими приложениями, размещенными через обратный прокси-сервер nginx?

0 голосов
/ 14 мая 2018

У моего работодателя есть ряд приложений 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 (переменная $http_referer в nginx), но не весь трафик активной перезагрузки включает этот заголовок.

Я использую Angular версии 6 и CLI Angular.

1 Ответ

0 голосов
/ 07 августа 2019

Вам придется запустить ng serve --publicHost https://localhost/my-app-1 для вашего первого приложения. И соответствующие общедоступные хосты для других приложений. Это обеспечит отправку трафика с /sockjs-node/ на разные URL.

Из угловых документов - publicHost"URL-адрес, который должен использовать клиент браузера (или клиент прямой загрузки, если он включен) для подключения к серверу разработки. Используется для сложной настройки сервера разработки Например, с обратными прокси. "

...