IIS中同域名不同路径转发多React应用的静态资源问题解决

你的问题核心是React应用默认以根路径生成静态资源请求，当通过子路径（如/webapp1）访问时，资源请求会直接指向域名根目录，导致路径不匹配。只靠端口转发规则不够，需要结合React项目配置和IIS重写规则一起修复，步骤如下：

1. 修正React应用的静态资源基础路径 #

从_next路径判断你用的是Next.js，每个应用需要在构建前配置对应子路径的basePath：

• 打开webapp1对应的Next.js项目的next.config.js，添加配置：

  module.exports = {
    basePath: '/webapp1'
  }
  

• webapp2同理，把basePath设为'/webapp2'
• 重新构建两个项目，将构建产物分别放到IIS的webapp1和webapp2文件夹下

如果是Create React App项目，就在package.json里添加"homepage": "/webapp1"（对应各自子路径）后重新构建。

2. 调整IIS的URL重写规则 #

建议在根网站（websites目录）的web.config中统一配置规则，替代子文件夹单独配置：

<configuration>
  <system.webServer>
    <rewrite>
      <rules>
        <!-- 转发webapp1的所有请求到3000端口 -->
        <rule name="Forward webapp1" stopProcessing="true">
          <match url="^webapp1/(.*)" />
          <action type="Rewrite" url="http://localhost:3000/{R:1}" />
        </rule>
        <!-- 转发webapp2的所有请求到4000端口 -->
        <rule name="Forward webapp2" stopProcessing="true">
          <match url="^webapp2/(.*)" />
          <action type="Rewrite" url="http://localhost:4000/{R:1}" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>
</configuration>

3. 验证效果 #

重启IIS站点后，访问localhost/webapp1/index，检查静态资源请求路径是否为<my-domain>/webapp1/_next/static/css/xxx.css，确认资源能正常加载即可。

内容的提问来源于stack exchange，提问作者Carl.t_