Организация и развертывание нескольких SPA в одном домене

Question

Представьте себе, что компания ABC имеет две команды, разрабатывающие два SPA-приложения: app1, app2

каждое приложение имеет свои index.html и связанные статические ресурсы, например: строить / index.html main.js

Это выполняется из: host1. приложение следует тем же правилам

Мы хотели бы:

• abc.com/app1 по маршруту host1
• abc.com/app2 по маршруту host2

Скажем, есть настройка балансировки нагрузки для правильной маршрутизации. Какое решение у меня есть для такой ситуации?

Я пытался использовать https://github.com/zeit/serve (предложено create-Reaction-app ), но есть множество проблем.

Во-первых, функция rewritePath не работает (не может ничего сделать полезного)

Во-вторых, я попытался разместить свои статические активы на 1 уровень глубже на хосте, запрос host1/app1 представляет собой список каталогов, а не index.html страницу

Даже после решения этих проблем с помощью конфигов, все еще остается масса проблем с React Router (SPA-маршрутизатором) и обратными вызовами аутентификации

Какова реальная лучшая практика для этого сценария? Я предполагаю, что это очень распространенный сценарий. Как я вижу, веб-консоль AWS использует аналогичный подход для приложений маршрутизации

Answer 1

Обычно вам нужен обратный прокси-сервер типа nginx для сервера двух разных сайтов на разных URIs. SPA не должны знать друг о друге, потому что это не должно касаться их того, как они достигнуты, это работа обратного прокси.

Базовая конфигурация для nginx:

server {

  listen 80;
  listen [::]:80;

  server_name abc.com;

  location /app1 {

    rewrite /app1(/?(.*)) /$2  break;

    proxy_pass http://localhost:XXXX;
    proxy_http_version 1.1;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header Connection "";
    proxy_set_header Host $host;
  }

  location /app2 {

    rewrite /app2(/?(.*)) /$2  break;

    proxy_pass http://localhost:YYYY;
    proxy_http_version 1.1;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header Connection "";
    proxy_set_header Host $host;
  }
}

Конечно, этот конфиг пропускает важные вещи, такие как ssl, gzip, caching и так далее, но он должен дать вам и идею.

В этом примере SPA могут работать в двух разных контейнерах docker, доступных через порты XXXX и YYYY.

Надеюсь, это поможет, LGG

Answer 2

То, что вы ищете, это обратный прокси. любой современный веб-сервер может сделать это, включая Nginx или Apache. Хитрость в том, что ваши маршруты переписывания будут правильными, и я подозреваю, что вы сталкиваетесь с React.