IIS部署React到子路径/子域名出现504及静态资源路径异常问题咨询

现有配置问题诊断 #

你当前的URL重写规则和React部署适配均存在问题，直接导致了404和504错误：

• 重写目标路径错误：你的React应用部署在/grt子虚拟目录/子应用下，但现有规则的<action type="Rewrite" url="/" />直接将请求重写到站点根目录，所有非文件/目录的请求都被转发到根目录入口，而非子应用的入口，导致静态资源引用路径错位。
• React打包配置未适配子目录：你没有在React打包时指定子目录路径，打包生成的静态资源默认引用根路径/，即使修正重写规则，依然会出现资源404错误。
• API路径匹配规则错位：现有规则仅排除了根目录下/api前缀的请求，如果你的后端接口部署在/grt/api子路径下，接口请求会被错误重写，导致转发异常引发504超时。

修正方案 #

1. 调整React打包配置 #

如果使用create-react-app脚手架，在项目package.json中新增homepage字段：

{
  "homepage": "/grt"
}

如果是自主配置webpack的项目，修改webpack配置中output.publicPath为/grt/，调整完成后重新打包部署。

2. 修正IIS URL Rewrite规则 #

替换站点或子应用的web.config为如下内容：

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <system.webServer>
    <rewrite>
      <rules>
        <rule name="React Routes" stopProcessing="true">
          <match url=".*" />
          <conditions logicalGrouping="MatchAll">
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
            <!-- 不需要排除子目录下api请求的话，可改回原有 pattern="^/(api)" -->
            <add input="{REQUEST_URI}" pattern="^/grt/api" negate="true" />
          </conditions>
          <action type="Rewrite" url="/grt/" />
        </rule>
      </rules>
    </rewrite>
    <staticContent>
      <!-- 避免无后缀路由文件出现MIME类型报错 -->
      <mimeMap fileExtension="." mimeType="text/html" />
    </staticContent>
  </system.webServer>
  <system.web>
    <authentication mode="Forms" />
  </system.web>
</configuration>

3. 额外检查项 #

• 确认IIS中/grt路径已经被配置为应用程序，而非普通虚拟目录，权限配置允许读取和脚本执行。
• 确认IIS已正确安装并启用URL Rewrite模块。

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