Как настроить роутинг/прокси между Angular приложениями, запущенными вместе?

Question

[Роман Ракзин]

Я разделяю сайт на несколько приложений, но работающих вместе.
Я создал несколько application и proxy.config.json, но я хочу добиться логики, что б у меня все приложения работали.

Я хотел бы следующее

mysite.com/ -> baseApplication
mysite.com/admin -> adminApplication
mysite.com/supplier-member -> supplierApplication

и т.д.

Каждое приложение у меня настроено на свой порт
Как мне собрать их вместе?

Запуск всего вместе `ng serve --proxy-config proxy.conf.json`

пример `proxy.conf.json`

{
      "/": {
        "target": "[::1]:4501",
        "secure": false,
        "logLevel": "debug",
        "changeOrigin": true,
        "pathRewrite": { "^/*": "" },
        "headers": {
          "Connection": "keep-alive"
        }
      },
      "/signin": {
        "target": "[::1]:4501",
        "secure": false,
        "logLevel": "debug",
        "changeOrigin": true,
        "pathRewrite": { "^/*": "" },
        "headers": {
          "Connection": "keep-alive"
        }
      },
      "/member-customer/*": {
        "target": "[::1]:4502",
        "secure": false,
        "logLevel": "debug",
        "changeOrigin": true,
        "pathRewrite": { "^/*": "" },
        "headers": {
          "Connection": "keep-alive"
        }
      },
      "/admin/*": {
        "target": "[::1]:4504",
        "secure": false,
        "logLevel": "debug",
        "changeOrigin": true,
        "pathRewrite": { "^/*": "" },
        "headers": {
          "Connection": "keep-alive"
        }
      },
      "/*": {
        "target": "[::1]:4503",
        "secure": false,
        "logLevel": "debug",
        "changeOrigin": true,
        "pathRewrite": { "^/*": "" },
        "headers": {
          "Connection": "keep-alive"
        }
      }
    }

Но у меня работает только `localhost:4200/` и берётся из Angular.json приложение по умолчанию. Оно и работает.
если же ставлю другие url, то не работает.

Answer 1

[Антон Швец]

ниче не понятно, чего куда.
Возможно вам поможет понимание того, как работает прокси.

При запуске дев сервера мы запускаем сервер на ноде который умеет слушать сеть по указанному порту и отдавать статические файлы, собранные вебпаком.
Далее в браузере мы отправляемся по ссылке типа "/api" которая пойдет на тот же самый хост и порт, на котором работает страничка. Этот запрос придет туда же, откуда страница взята, т.е. на наш nodejs сервер.
И там включается разбор запросов, который говорит "ага, вот адрес /api у нас должен проксироваться вот сюда" и сервер на ноде делает самостоятельно запрос по указанному в proxy конфиге адресу, передавая туда же все данные из запроса. Получив ответ, он отправит его под видом ответа от ноде-сервера, который попадет в браузер.

Зачем вообще нам прокси? Чтобы браузер считал что он никуда далеко не ходит, и OPTIONS не слал. И для того чтобы лишние пути во фронте не прописывать, изменить адреса бэкендов для разработки можно подсунув другой конфиг.

А теперь какие такие другие url? Если пойти из браузера по другому url в запущенный прокси он не попадет никогда, если не совпадет айпи адрес хоста и порт.

Прокси поможет развести запросы к разным бэкендам, так, что со стороны браузера они выглядят как уходящие к одному хосту.
Причем тут разные фронтовые аппы вообще не понятно.

Comments

[Роман Ракзин]

Антон Швец Антон, спасибо, наверное я не понял тогда смысла когда прокси использовать. Вообще у меня задумка следующая - Можно ли несколько приложений ангуляра собрать в одну сборку при этом не делая ничего с бэкендом, а только работая со фронтом?
Я думал разгрузить часть функций app module- получается тогда не заморачиваться с applications? бо это напряжно выходит. Значит в app модуле разгружать и делать более оптимизированно в рамках одного приложения. Или есть адекватный вариант собрать много applications в одну сборку или подход с applications в корне подразумевает разделение?

[Антон Швец]

Роман Ракзин, вложенные аппы полезны, когда есть смысл запускать внутренние аппы независимо, и вообще отдельно.
А потом собирать в приложение.
Например у вас какая-то админка встраивается в несколько сайтов, вы админку можете отдельно разрабатывать, держать в отдельной репе, и встроить потом.
Похоже на микрофронтенды, но тут все это собирается одним бандлом.

А прокси это вообще не про то, прокси это про обмануть браузер и подсунуть ему другие пути до бэка.