Изменение маршрутов верхнего уровня для нескольких приложений Angular, обслуживаемых с одного сервера nginx?

Question

Моя текущая конфигурация следующая: у меня есть два отдельных приложения Angular на разных контейнерах Docker, работающих на разных портах, например, 4200 и 4201. Я обращаюсь к ним обоим напрямую через их порты: www.myserver.com:4200 и www.myserver.com: 4201.Они создаются с использованием следующего файла конфигурации docker-compose:

version: '3.6'
services:
    app1:
         build:
             context: ../app1
             dockerfile: Dockerfile
         command: bash -c "ng serve --host 0.0.0.0 --port 4200"
         ports:
             - "4200:4200"

    app2:
         build:
             context: ../app2
             dockerfile: Dockerfile
         command: bash -c "ng serve --host 0.0.0.0 --port 4201"
         ports:
             - "4201:4201"

Теперь я хочу настроить сервер nginx для обслуживания обоих приложений на одном и том же порту, например, 80. Какой рекомендуемый способ изменитьоба приложения, чтобы они обслуживались по разным маршрутам, например, www.myserver.com/app1 и www.myserver.com/app2 соответственно?До сих пор я изменил свой конфигурационный файл docker-compose и файл dev.conf nginx:

docker-compose.yml

    nginx:
         build:
             context: ../nginx
             dockerfile: Dockerfile
         restart: always
         ports:
             - "80:80"

nginx / dev.conf

server {
    listen 80;

    location /app1 {
        proxy_pass          http://app1:4200;
        proxy_redirect      default;
        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-Host $server_name;
    }

    location /app2 {
        proxy_pass          http://app2:4201;
        proxy_redirect      default;
        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-Host $server_name;
    }
}

Можно ли сделать то, что я прошу?Было бы лучше объединить приложения Angular и внутренний маршрут?

Заранее спасибо.

Обновление: в итоге я скопировал содержимое из app2 в app1 и осуществил внутреннюю маршрутизацию.Я оставлю вопрос открытым, если кто-то захочет предложить другой подход.

Answer 1

Если вы развертываете свои угловые приложения таким способом на производстве, используя ng serve, я рекомендую вам это изменить.Использование ng serve следует использовать только в dev, поскольку размер пакета огромен и замедляет первоначальную загрузку веб-страницы.

Рекомендуемый способ развертывания в рабочей среде -

ng build --prod

.приложение и помещает все необходимые файлы в папку / dist, возможно, в подкаталоге в зависимости от вашей угловой версии и настроек.Вы должны скопировать содержимое папки / dist в ваш контейнер nginx и настроить nginx так, чтобы он указывал на файл index.html для настроенных вами маршрутов.

Например, если вы копируете app1 в / usr / share/ nginx / html / app1 и app2 в / usr / share / nginx / html / app2 может быть вашей конфигурацией nginx (учитывая, что файлы index.html находятся в корне папок / app1 и / app2):

location /app1 {
  try_files $uri /app1/index.html
}
location /app2 {
  try_files $uri /app2/index.html
}

Это просто грубый пример, должен работать теоретически, но вам, скорее всего, нужно немного его настроить, чтобы он корректно работал в вашей настройке.

Пример конфигурации nginx, если вы хотите указать надва контейнера для разработчиков:

http {
  upstream app1 {
    server app1:4200;
  }
  upstream app2 {
    server app2:4201;
  }
  server {
    ...
    location /app1/ {
      proxy_pass http://app1;
      ...
    }
    location /app2/ {
      proxy_pass http://app2;
      ...
    }
  }
}