如何将ASP.NET 6 Web API与React项目发布至IIS

一、先搞定单个ASP.NET Core托管React+API的部署问题 #

你当前部署后页面打不开，先从这几个方向排查：

• 检查静态文件中间件配置：在ASP.NET Core项目的Program.cs里，必须确保app.UseStaticFiles();放在app.UseRouting();和app.UseAuthorization();之前，保证静态文件能被正常访问。
• 自动复制React构建产物：在ASP.NET Core项目的.csproj里添加以下配置，发布时自动把React的build文件夹内容复制到wwwroot，不用手动拷贝：

  <Target Name="CopyReactBuild" AfterTargets="Publish">
    <Copy SourceFiles="..\你的React项目路径\build\**" DestinationFolder="$(PublishDir)wwwroot" />
  </Target>
  

• IIS应用池设置：站点的应用程序池必须选择.NET Core对应的托管模式（无托管代码），物理路径要指向ASP.NET Core发布后的根目录。
• 测试静态文件可用性：直接在浏览器访问http://你的站点地址/index.html，如果能打开，说明静态文件没问题，大概率是React Router的问题；如果打不开，检查IIS的静态文件权限和MIME类型配置。

二、分开部署时高效更新React的API路径 #

如果必须把React和API放在IIS不同站点，用以下方法批量更新API路径：

• 统一管理API基础地址：在React项目里新建src/config/apiConfig.js，集中定义API基础URL：

  export const API_BASE_URL = process.env.NODE_ENV === 'production' 
    ? 'http://你的API站点域名/api' 
    : '/api';
  

• 封装统一请求工具：把所有API调用改成用这个工具函数，不用逐个修改相对路径：

  import { API_BASE_URL } from './config/apiConfig';
  
  export async function requestApi(endpoint, options = {}) {
    const fullUrl = `${API_BASE_URL}${endpoint}`;
    const response = await fetch(fullUrl, options);
    // 这里可以统一处理响应、错误逻辑
    return response;
  }
  

  之后所有API调用都用requestApi('/resourcesA')这种方式，后续改地址只需要修改apiConfig.js。
• 用环境变量适配多环境：在React项目根目录创建.env.development和.env.production文件，分别配置开发和生产环境的API地址：
  • .env.development：REACT_APP_API_BASE_URL=/api
  • .env.production：REACT_APP_API_BASE_URL=http://你的API站点域名/api
    然后在apiConfig.js里读取变量：

  export const API_BASE_URL = process.env.REACT_APP_API_BASE_URL;
  

  React构建时会自动加载对应环境的配置，不用手动切换。

三、React部署的必做配置（homepage与URL重写） #

这两步是React部署的基础，即使前面的问题解决了也得配置：

• 设置homepage属性：在React项目的package.json里添加"homepage": "http://你的React站点地址"，如果部署在站点根目录，直接设为"/"即可。这个配置会修正构建后静态资源的加载路径，避免CSS、JS文件找不到的问题。
• 配置IIS URL重写：用React Router时，直接访问路由路径（比如http://你的站点地址/dashboard）会返回404，需要在React站点根目录创建web.config文件：

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

  同时要确保IIS已经安装了URL重写模块，没装的话从IIS管理器的「模块」选项里安装即可。

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