在IIS中嵌套部署React应用出现500内部服务器错误求助

问题根源 #

主站当前的IIS重写规则会匹配所有非文件请求，且仅排除了/api、/admin、/tools/tokenization路径，未将/app1和/app2纳入排除范围。这导致访问子应用时，请求被错误重定向到主站的index.html，引发资源路径不匹配的500错误。即使将子应用转为IIS应用，主站规则优先级更高，仍会拦截请求。

解决方案 #

1. 修改主站重写规则，排除子应用路径

在主站的重写规则<conditions>块中新增两条排除规则，让主站规则不再拦截子应用的请求：

<rule name="ReactRouter Routes" stopProcessing="true">
<match url="(.*)" />
<conditions logicalGrouping="MatchAll">
<add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
<add input="{REQUEST_URI}" pattern="^/api" negate="true" />
<add input="{REQUEST_URI}" pattern="^/admin" negate="true" />
<add input="{REQUEST_URI}" pattern="^/tools/tokenization" negate="true" />
<!-- 新增子应用路径排除 -->
<add input="{REQUEST_URI}" pattern="^/app1" negate="true" />
<add input="{REQUEST_URI}" pattern="^/app2" negate="true" />
</conditions>
<action type="Rewrite" url="index.html" />
</rule>

2. 配置子应用的React路由basename

每个子应用的React路由需要设置basename属性，匹配其在IIS中的路径，确保路由链接和资源路径正确：

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

// app1的路由配置
ReactDOM.render(
  <BrowserRouter basename="/app1">
    <App />
  </BrowserRouter>,
  document.getElementById('root')
);

app2同理，将basename设置为/app2。

3. 检查子应用的IIS应用配置（若已转为应用）

如果已将/app1、/app2配置为IIS应用：

• 确认物理路径指向子应用正确的build输出目录
• 检查应用程序池权限是否足够读取目录文件
• 若子应用使用客户端路由，需在子应用的IIS配置中添加对应的重写规则（规则逻辑与主站类似，匹配自身路径下的非文件请求并重写到子应用的index.html）

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