如何将React应用部署到Windows Server的IIS？部署后页面空白报404怎么办

1. 修正package.json的homepage配置 #

• 打开项目根目录的package.json文件，添加/修改homepage字段：
  • 站点部署在IIS根目录（直接通过域名/localhost访问）：填写"homepage": "."
  • 站点部署在IIS虚拟应用（访问路径为http://localhost/应用名）：填写"homepage": "/应用名"
• 配置完成后重新执行npm run build，将新生成的build文件夹内的所有文件复制到IIS站点的物理路径目录下，替换旧文件。

注意：该配置直接决定打包后静态资源的引用路径，配置错误必然会出现静态资源404报错。

2. 检查IIS静态内容服务安装状态 #

• 打开Windows Server的「服务器管理器」-「添加角色和功能」，依次展开「Web服务器（IIS）」-「Web服务器」-「常见HTTP功能」，确认已勾选安装「静态内容」。
• Windows Server默认安装IIS时不会默认勾选该功能，未安装的情况下IIS不会处理js、css、json等静态资源请求，直接返回404。

manifest.json的语法报错是因为请求返回的是IIS的404HTML错误页面而非合法JSON文件，解决404问题后该报错会自动消失。

3. 配置路由重定向规则（使用BrowserRouter时必须配置） #

• 若项目使用React Router的BrowserRouter模式，需要在IIS站点的物理根目录下新建web.config文件，写入以下内容：

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <system.webServer>
    <rewrite>
      <rules>
        <rule name="React SPA路由重定向" 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="/" />
          <!-- 部署在虚拟应用时，上方url改为"/你的应用名/" -->
        </rule>
      </rules>
    </rewrite>
  </system.webServer>
</configuration>

• 配置前需先安装IIS的URL重写模块，安装完成后重启IIS站点即可生效。

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