IIS同一域名部署两个React SPA（根目录+子目录）配置求助

核心思路 #

通过IIS的URL重写规则设置优先级：先匹配并处理子目录开头的请求，直接指向子目录SPA；剩余请求再交给根目录SPA处理，从根源避免根目录路由拦截子目录请求。

具体配置步骤 #

1. 子目录应用的独立web.config配置 #

在子目录UniquePathToSecondApp下创建专属web.config，确保子目录请求被正确路由：

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <system.webServer>
    <rewrite>
      <rules>
        <rule name="React Sub App Routes" stopProcessing="true">
          <match url=".*" />
          <conditions logicalGrouping="MatchAll">
            <!-- 跳过已存在的文件/目录请求 -->
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
          </conditions>
          <!-- 重写请求到子目录的index.html -->
          <action type="Rewrite" url="index.html" />
        </rule>
      </rules>
    </rewrite>
    <!-- 配置静态资源MIME类型，避免加载失败 -->
    <staticContent>
      <mimeMap fileExtension=".json" mimeType="application/json" />
      <mimeMap fileExtension=".js" mimeType="application/javascript" />
      <mimeMap fileExtension=".css" mimeType="text/css" />
    </staticContent>
  </system.webServer>
</configuration>

2. 根目录应用的web.config修改 #

修改根目录的web.config，添加子目录排除规则，让根目录路由不处理子目录请求：

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <system.webServer>
    <rewrite>
      <rules>
        <!-- 优先排除子目录请求，直接放行给子目录配置处理 -->
        <rule name="Exclude Sub App Path" stopProcessing="true">
          <match url="^UniquePathToSecondApp/.*" />
          <action type="None" />
        </rule>
        <!-- 根目录SPA的路由重写规则 -->
        <rule name="React Root App Routes" 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="/index.html" />
        </rule>
      </rules>
    </rewrite>
    <staticContent>
      <mimeMap fileExtension=".json" mimeType="application/json" />
      <mimeMap fileExtension=".js" mimeType="application/javascript" />
      <mimeMap fileExtension=".css" mimeType="text/css" />
    </staticContent>
  </system.webServer>
</configuration>

3. React应用路由代码调整 #

• 根目录SPA：保持默认路由配置即可，无需额外设置basename。
• 子目录SPA：在路由组件中指定basename，确保路由跳转和资源加载路径正确：

import { BrowserRouter } from 'react-router-dom';

ReactDOM.render(
  <BrowserRouter basename="/UniquePathToSecondApp">
    <App />
  </BrowserRouter>,
  document.getElementById('root')
);

同时在子目录SPA的package.json中添加homepage字段：

"homepage": "/UniquePathToSecondApp/"

关键注意事项 #

• 确认IIS已安装URL重写模块，未安装需通过服务器管理器添加该功能。
• 在IIS管理器中，右键子目录UniquePathToSecondApp，选择「转换为应用程序」，确保子目录作为独立应用处理。

内容的提问来源于stack exchange，提问作者Giox