IIS部署React项目时web.config重写规则跳转至server.js如何解决？

• 缺少默认文档配置，IIS无法识别根路径对应的默认首页文件
• 当前重写规则中，DynamicContent 规则会将所有不存在的路径直接重写到server.js，根路径访问时没有优先匹配静态首页
• 若你部署的是纯静态React SPA项目，额外配置的iisnode模块也会导致根路径请求被转发到node服务处理，而非直接返回静态资源

1. 适配带Node后端的SSR React项目（如Next.js） #

在原有配置基础上做三处修改：

1. 在<system.webServer>节点下新增默认文档配置，指定根路径默认返回index.html
2. 在DynamicContent规则前新增静态资源跳过规则，避免静态资源被转发到node服务
3. 补全non-wwwtowww规则的重定向类型为永久重定向

修改后的完整web.config如下：

<configuration>
  <system.webServer>
    <!-- 新增默认文档配置 -->
    <defaultDocument>
      <files>
        <add value="index.html" />
      </files>
    </defaultDocument>
    <httpProtocol>
      <customHeaders>
        <add name="Access-Control-Allow-Origin" value="*" />
      </customHeaders>
    </httpProtocol>
    <iisnode node_env="%node_env%" nodeProcessCountPerApplication="1" maxConcurrentRequestsPerProcess="1024" maxNamedPipeConnectionRetry="100" namedPipeConnectionRetryDelay="250" maxNamedPipeConnectionPoolSize="512" maxNamedPipePooledConnectionAge="30000" asyncCompletionThreadCount="0" initialRequestBufferSize="4096" maxRequestBufferSize="65536" uncFileChangesPollingInterval="5000" gracefulShutdownTimeout="60000" loggingEnabled="true" logDirectory="iisnode" debuggingEnabled="true" debugHeaderEnabled="false" debuggerPortRange="5058-6058" debuggerPathSegment="debug" maxLogFileSizeInKB="128" maxTotalLogFileSizeInKB="1024" maxLogFiles="20" devErrorsEnabled="true" flushResponse="false" enableXFF="false" promoteServerVars="" configOverrides="iisnode.yml" watchedFiles="web.config;*.js" nodeProcessCommandLine="C:\Program Files\nodejs\node.exe" />
    <handlers>
      <add name="iisnode" path="server.js" verb="*" modules="iisnode" />
    </handlers>

    <rewrite>
      <rules>
        <rule name="Redirect HTTP to HTTPS" stopProcessing="true">
          <match url="(.*)" />
          <conditions>
              <add input="{HTTPS}" pattern="off" />
          </conditions>
          <action type="Redirect" url="https://{HTTP_HOST}/{R:1}" redirectType="Permanent" />
        </rule>
        <rule name="non-wwwtowww" stopProcessing="true">
          <match url="(.*)" />
          <conditions>
              <add input="{HTTP_HOST}" pattern="^example\.abc$" />
          </conditions>
          <!-- 补全永久重定向配置 -->
          <action type="Redirect" url="https://www.example.abc/{R:1}" redirectType="Permanent" />
        </rule>
        <!-- 新增静态资源跳过规则 -->
        <rule name="StaticContent" stopProcessing="true">
          <match url=".*\.(html|htm|js|css|json|png|jpg|jpeg|gif|svg|ico|woff|woff2|ttf|eot)$" />
          <action type="None" />
        </rule>
        <rule name="DynamicContent">
          <conditions>
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="True"/>
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="True"/>
          </conditions>
          <action type="Rewrite" url="server.js"/>
        </rule>
      </rules>
      <outboundRules>
        <rule name="Add the STS header in HTTPS responses">
          <match serverVariable="RESPONSE_Strict_Transport_Security" pattern=".*" />
          <conditions>
          </conditions>
          <action type="Rewrite" value="max-age=31536000" />
        </rule>
      </outboundRules>
    </rewrite> 
  </system.webServer> 
</configuration>

修改后重启IIS站点即可生效。

2. 适配纯静态React SPA项目（无Node后端） #

如果你的React项目是打包后只有静态文件的单页应用，不需要node服务，可以删掉所有iisnode相关配置，修改DynamicContent规则实现前端路由兼容，配置如下：

<configuration>
  <system.webServer>
    <defaultDocument>
      <files>
        <add value="index.html" />
      </files>
    </defaultDocument>
    <httpProtocol>
      <customHeaders>
        <add name="Access-Control-Allow-Origin" value="*" />
      </customHeaders>
    </httpProtocol>
    <rewrite>
      <rules>
        <rule name="Redirect HTTP to HTTPS" stopProcessing="true">
          <match url="(.*)" />
          <conditions>
              <add input="{HTTPS}" pattern="off" />
          </conditions>
          <action type="Redirect" url="https://{HTTP_HOST}/{R:1}" redirectType="Permanent" />
        </rule>
        <rule name="non-wwwtowww" stopProcessing="true">
          <match url="(.*)" />
          <conditions>
              <add input="{HTTP_HOST}" pattern="^example\.abc$" />
          </conditions>
          <action type="Redirect" url="https://www.example.abc/{R:1}" redirectType="Permanent" />
        </rule>
        <rule name="SPA Routing">
          <conditions>
            <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>
      <outboundRules>
        <rule name="Add the STS header in HTTPS responses">
          <match serverVariable="RESPONSE_Strict_Transport_Security" pattern=".*" />
          <action type="Rewrite" value="max-age=31536000" />
        </rule>
      </outboundRules>
    </rewrite> 
  </system.webServer> 
</configuration>

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