多个 SPA 的 IIS 重写规则

编程问答 2022-05-30

问题描述

我们正在为我们的微前端创建一个新的架构，我们希望避免使用另一个框架来实现它，比如 single-spa。我们公司目前将 IIS 用于其他产品，我们需要保持这种方式。

因此，为了让多个 SPA 响应同一个地址，我们只需将我们构建的 SPA 放在 IIS 的内容目录中，如下所示：

IIS 根文件夹：

  • SPA1
  • spa2

我可以正常访问 myhost/spa1 和 myhost/spa2，并按照它们自己的内部路线导航（我们使用的是 Angular）。

问题是，我们想要没有 # 的 URL，而不是我们需要告诉 IIS 将任何子路由重定向到它的 SPA 主路由。

我们有一些东西，它适用于 myhost/spa1、myhost/spa1/detail，但不适用于 myhost/spa1/detail/1。比方说，第三层。

有人可以帮我解决这个问题吗？

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
    <system.webServer>
        <rewrite>
            <rules>
                <rule name="SPA Rule" stopProcessing="true">
                    <match url="(.+)/.*" />
                    <conditions logicalGrouping="MatchAll">
                        <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
                        <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
                    </conditions>
                    <action type="Rewrite" url="{R:1}/" />
                </rule>
            </rules>
        </rewrite>
        <directorybrowse enabled="true" />
    </system.webServer>
</configuration>

解决方法

经过几次试验和另一个要求（我们需要在 URL 中选择一个“公司”），我想出了一个运行良好的方法：

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
    <system.webServer>
        <rewrite>
            <rules>
                <rule name="Application Hub Rule" stopProcessing="true">
                    <match url="(hub)(/?.*)" />
                    <conditions logicalGrouping="MatchAll">
                        <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
                        <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
                    </conditions>
                    <action type="Rewrite" url="{R:1}/" />
                </rule>
                <rule name="CRM Customer Rule" stopProcessing="true">
                    <match url="(crm/customer)(/?.*)" />
                    <conditions logicalGrouping="MatchAll">
                        <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
                        <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
                    </conditions>
                    <action type="Rewrite" url="{R:1}/" />
                </rule>
            </rules>
        </rewrite>
    </system.webServer>
</configuration>

我知道，这是非常独特的要求。但事实证明，这些规则运作良好。一旦用户输入 my-host/COMP_CODE/hub，我的 Angular 应用程序就会处理 URL 更改，因为 my-host/COMP_CODE/hub/**/** 之后的所有内容都被 IIS 重定向到集线器的根文件夹。 一旦您输入 my-host/COMP_CODE/crm/customer 及其子路由，IIS 会将所有内容重定向到 Customer 的根文件夹，而 Angular 会处理 URL 更改。

唯一的问题是，在 Angular 的 RouterModule.forRoot() 配置中，您需要确保 Angular 的路由器理解 path: ':db/hub'（以及其他内容）。

感谢那些试图提供帮助的人。

angulariisiissingle-spa