angular - IIS：在同一站点下托管 2 个 SPA

问题描述

不幸的是，我正在一个项目中工作，作为临时解决方案，我们希望有 2 个不同的 SPA，一个用 Angular 编写，一个用 React 同时发布在同一台服务器上的相同 dns 和端口下。

基本上一个是对另一个的重写，在我们将所有页面从 Angular 迁移到 React 之前，我们必须同时启动和运行。

目前 Angular 应用程序部署在 IIS 上，通过使用重写模块，我们可以利用 Angular 路由器。

为了给您更多的背景信息，可以说 Angular 应用程序有 3 个页面。

并且第一个反应版本将迁移其中一个。

这意味着当用户请求 “example/page1”时必须转到 angular 应用程序，而当导航到example/page2时必须转到 react 应用程序。

我最初的想法是

1）我可以把这两个项目放在同一个文件夹下，这将是网站的物理路径。

2) 我可以创建一个 web.config，我将在其中添加用于重写和指定应该返回到用户浏览器的站点/捆绑包的规则。

而 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 中的一堆东西。

有谁知道更好的解决方案或知道这是否可行，也许是代理？

谢谢。

标签： angularreactjsiisdeployment

解决方案

角

您需要使用它来构建您的应用程序，--base-href这将帮助您创建应用程序的根目录。

如 AngularCLI文档中所述

--base-href正在构建的应用程序的基本 url。

例如，您的场景中的角度ng build --prod --base-href /directory-name/在哪里。directory-name

反应

在组件上设置basename属性<Router />告诉 React Router 该应用程序将从子目录中提供服务。

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

在你的场景directory-name中反应在哪里。

现在，一旦您在应用程序中完成了基本路由的设置，就可以使用Site2 - AngularApp目录进行绑定。example/angularSite3 - ReactAppexample/react

angular - IIS：在同一站点下托管 2 个 SPA

问题描述

解决方案

推荐阅读