如何在IIS子文件夹部署ReactJS应用实现子路径正常访问

1. 配置构建时的资源基础路径 #

React默认生产构建以站点根路径为基准引用静态资源，子路径部署时资源路径不匹配会直接导致页面空白，需根据所用构建工具修改对应配置后重新构建：

• Create React App项目：在根目录package.json中新增homepage字段，值与目标子路径一致

{
  "name": "react-app",
  "homepage": "/myreactapp",
  // 其余原有配置保持不变
}

• Vite创建的React项目：在根目录vite.config.js/vite.config.ts中添加base配置项

export default defineConfig({
  base: '/myreactapp/',
  // 其余原有配置保持不变
})

配置修改完成后执行npm run build重新生成构建产物，校验build目录下index.html内的js、css引用路径，确认所有资源路径均已携带/myreactapp/前缀即可。

2. 调整IIS站点部署结构 #

禁止直接将build目录设置为IIS根站点物理路径，按如下规则配置：

• 打开IIS管理器，定位到绑定192.168.1.1访问地址的根站点
• 右键根站点选择「添加应用程序」
• 别名填写myreactapp，与之前配置的基础路径完全一致
• 物理路径指向React项目build文件夹的本地存储路径
• 对应应用程序池的.NET CLR版本选择「无托管代码」，保存配置

3. 添加单页应用路由重写规则 #

React为单页应用，路由逻辑由前端控制，未配置重写规则时直接访问子路由、刷新页面会返回404。在build文件夹根目录新建web.config文件，写入以下配置：

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <system.webServer>
    <rewrite>
      <rules>
        <rule name="ReactRoute" 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="/myreactapp/index.html" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>
</configuration>

注：需提前在IIS中安装URL Rewrite模块，上述重写规则才可正常生效。

配置完成后重启对应IIS站点，即可通过http://192.168.1.1/myreactapp正常访问应用，路由跳转、页面刷新均不会出现异常。

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