IIS: хост 2 SPA под одним сайтом

Question

К сожалению, я работаю в проекте, где в качестве временного решения мы хотим иметь 2 разных SPA, один из которых записан в Angular, а другой в React одновременно выпущен на одном сервере под одним и тем же днс и портом.

По сути одна переписывает другую, и пока мы не перенесем все страницы из Angular в React, мы должны запустить и запустить ее.

В настоящее время Angular приложение развернуто в IIS и с помощью модуль перезаписи мы можем использовать Angular router.

Чтобы дать вам немного больше контекста, скажем, что приложение angular имеет 3 страницы.

И что в первом реактивном выпуске будет перенесен один из них.

Это означает, что когда пользователь запрашивает "example / page1" , необходимо go к приложению angular и при переходе к example / page2 должен go реагировать на приложение.

Моя первоначальная мысль:

1) я мог бы поместите 2 проекта в одну папку, которая будет физический путь к сайту.

2) Я мог бы создать web.config, в котором я добавлю правила переписывания и указания site / bundles, которые должны вернуться в браузер пользователя.

И web.config будет выглядеть примерно так:

> <?xml version="1.0" encoding="utf-8"?>
<configuration>
    <system.webServer>
        <rewrite>
            <rules>
                <rule name="Default React Routes" stopProcessing="true">
                    <match url="^$" />
                    <action type="Rewrite" url="/react/index.html" />
                </rule>
                <rule name="React Routes" stopProcessing="true">
                    <match url="page2" />
                    <conditions logicalGrouping="MatchAll">
                        <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
                        <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
                    </conditions>
                    <action type="Rewrite" url="/react/index.html" />
                </rule>
                <rule name="Angular Routes" stopProcessing="true">
                    <match url="page1" />
                    <conditions logicalGrouping="MatchAll">
                        <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
                        <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
                    </conditions>
                    <action type="Rewrite" url="/angular/index.html" />
                </rule>
            </rules>
        </rewrite>
    </system.webServer>
</configuration>

К сожалению, это решение заставляет меня изменить кучу вещей в проектах index. html.

Кто-нибудь знает лучшее решение или знает, будет ли оно вообще работать, возможно, прокси ??

Спасибо.

Answer 1

Angular

Вам необходимо создать приложение, используя --base-href, которое поможет вам сделать root вашего приложения.

Как указано в AngularCLI документация

--base-href Базовый URL для создаваемого приложения.

например ng build --prod --base-href /directory-name/, где directory-name равно angular в вашем сценарии.

React

Установка атрибута basename в компоненте <Router /> сообщает React Router, что приложение будет обслуживаться из подкаталог.

<Router basename={'/directory-name'}>
  <Route path='/' component={Home} />
  {/* … */}
</Router>

где directory-name равно реагирует в вашем сценарии.

---

Теперь, когда вы закончите настройку базовых маршрутов в вашем приложения, вы можете связать Site2 - AngularApp с example/angular и Site3 - ReactApp с example/react каталогами.

Answer 2

Для реализации вашего требования вы можете использовать правило перезаписи URL, если вы размещаете весь сайт отдельно.

или если вы хотите разместить еще 2 сайта в качестве приложения, вам просто нужно указать путь сборки: на сайте в пути приложения и назначьте название приложения. (для angular после создания приложения будет создана папка dist, которая используется в качестве пути приложения)

Вы можете использовать эту ссылку для более подробной информации:

Как обслуживать две папки (сборка React файлы) на одном сайте на IIS?