Windows Server 2022 IIS部署React应用失败求助

问题场景 #

在Windows Server 2022 Standard的IIS中，将React应用部署为Default Web Site下的子应用exlibris时，访问localhost/exlibris仅显示<noscript>You need to enable JavaScript to run this app.</noscript>（浏览器已启用JS）；但将build内容直接放到C:\inetpub\wwwroot根目录可正常运行，子目录放入IIS默认页也能正常显示。

解决步骤 #

1. 配置React项目的homepage字段 #

React默认以根路径加载静态资源，作为子应用必须指定正确的路径：

• 打开项目根目录的package.json，添加或修改homepage字段：

  "homepage": "/exlibris/"
  

• 重新执行npm run build生成新的build文件夹，将内容覆盖到C:\inetpub\wwwroot\exlibris目录。

2. 添加IIS URL重写规则（单页应用必备） #

React是单页应用，需将子应用下所有请求重定向到index.html，否则会出现资源加载失败或路由异常：

• 确保IIS已安装URL重写模块（未安装可通过「服务器管理器 > 添加角色和功能 > Web服务器 > 应用程序开发 > URL重写」安装）。
• 在C:\inetpub\wwwroot\exlibris目录创建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" />
            </conditions>
            <action type="Rewrite" url="/exlibris/index.html" />
          </rule>
        </rules>
      </rewrite>
      <staticContent>
        <!-- 确保静态资源MIME类型正确识别 -->
        <mimeMap fileExtension=".js" mimeType="application/javascript" />
        <mimeMap fileExtension=".css" mimeType="text/css" />
        <mimeMap fileExtension=".json" mimeType="application/json" />
        <mimeMap fileExtension=".svg" mimeType="image/svg+xml" />
      </staticContent>
    </system.webServer>
  </configuration>
  

3. 验证目录权限 #

确保IIS进程对exlibris目录有读取权限：

• 右键C:\inetpub\wwwroot\exlibris目录，选择「属性 > 安全」。
• 添加IIS_IUSRS和IUSR用户，授予「读取和执行」「列出文件夹内容」「读取」权限。

4. 重启IIS站点 #

在IIS管理器中，右键Default Web Site下的exlibris应用，选择「管理应用程序 > 浏览」，或直接刷新浏览器访问localhost/exlibris，验证应用是否正常加载。

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