手动部署ASP.NET Core 7 Web API与React前端至IIS的咨询

部署方案选择 #

你有两种部署选项，根据需求选：

• 同一站点部署：适合想避免跨域问题的场景，前端静态文件直接放在后端的静态文件目录下，共用同一个域名/端口
• 单独站点部署：适合前后端完全分离、各自独立维护的场景，需要配置跨域规则，前后端用不同端口/域名

第一步：先构建React前端静态文件 #

不管选哪种部署方式，都需要先编译React项目：

1. 打开React项目的根目录
2. 执行命令：npm run build
3. 项目根目录会生成build文件夹，里面就是编译好的静态文件（包含HTML、压缩后的JS/CSS、资源文件等）

情况1：部署到后端同一IIS站点 #

这种方式不需要额外新建站点，直接复用已部署的ASP.NET Core API站点：

1. 找到后端在IIS的发布目录（比如C:\inetpub\wwwroot\YourApiSite）
2. 如果目录里没有wwwroot文件夹，手动新建一个
3. 把React build文件夹里的所有文件，复制到wwwroot目录下
4. 确认后端的Program.cs里配置了静态文件支持：

   // 确保有这行，启用静态文件服务
   app.UseStaticFiles();
   // 如果用了React的BrowserRouter，添加这行处理路由刷新问题
   app.MapFallbackToFile("index.html");
   

5. 重启IIS站点，直接访问后端的域名/端口就能看到React前端，API请求用相对路径（比如/api/your-endpoint）即可

情况2：部署为独立IIS站点 #

如果要单独部署前端：

1. 打开IIS管理器，右键「站点」→「添加网站」
   • 站点名称自定义，物理路径选择React的build文件夹路径
   • 设置端口（比如8080，不要和后端端口冲突），绑定主机名按需配置
2. 配置后端跨域：在ASP.NET Core的Program.cs里添加CORS策略，允许前端站点的访问：

   builder.Services.AddCors(options =>
   {
       options.AddPolicy("AllowReact",
           policy => policy.WithOrigins("http://localhost:8080") // 替换成你的前端站点地址
                           .AllowAnyHeader()
                           .AllowAnyMethod());
   });
   // 注意要放在UseRouting之后，UseAuthorization之前
   app.UseCors("AllowReact");
   

3. 修改React项目里的API请求地址，改成后端的完整域名/端口（比如http://localhost:5000/api/your-endpoint）
4. 重启前后端站点，分别访问对应端口即可

关键注意事项 #

• 确保IIS已安装静态内容组件（单独部署前端需要）和ASP.NET Core模块（同站点部署需要）
• 如果React用了BrowserRouter，单独部署时需要在build文件夹里添加web.config配置URL重写，避免刷新页面404：

  <?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="/" />
          </rule>
        </rules>
      </rewrite>
    </system.webServer>
  </configuration>
  

• 部署前可以先在本地测试编译后的文件：安装serve工具（npm install -g serve），执行serve -s build，确认前端功能和API请求正常

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