ASP.NET Core如何用不同端口分别托管API与React SPA？

一、改造现有模板实现分端口运行 #

默认模板依赖ASP.NET Core代理React开发服务器，要实现分端口独立运行，需调整配置确保两者各自启动并正确通信：

1. 固定React项目的启动端口 #

在React项目的package.json中修改start脚本，指定端口（Windows和Mac/Linux语法不同）：

"scripts": {
  "start": "set PORT=3000 && react-scripts start", // Windows环境
  // "start": "PORT=3000 react-scripts start", // Mac/Linux环境
  // 其他脚本保持不变
}

移除之前添加的"homepage": "https://localhost:3000"，该配置仅用于生产构建后的静态资源路径，与开发端口无关。

2. 修改ASP.NET Core的Startup配置 #

注释掉自动启动React的代码，改用代理指向独立运行的React服务器：

app.UseSpa(spa =>
{
    if (env.IsDevelopment())
    {
        // 不再由ASP.NET Core启动React，代理到已独立启动的3000端口
        spa.UseProxyToSpaDevelopmentServer("http://localhost:3000");
    }
});

保留AddSpaStaticFiles和UseSpaStaticFiles配置，用于生产环境托管构建后的React静态文件。

3. 分步骤启动服务 #

• 先进入ClientApp目录，运行npm start，确认React在http://localhost:3000正常启动。
• 再启动ASP.NET Core API项目，此时API会在自身配置的端口（如https://localhost:5001）运行，同时代理React的请求，两者端口完全独立。

4. Azure B2C适配要点 #

• 在Azure B2C门户分别为API和SPA创建应用注册：
  • SPA的回复URL配置为http://localhost:3000（开发环境），生产环境替换为实际域名。
  • 为API定义访问范围，允许SPA的客户端ID获取对应权限，确保SPA拿到的Token能被API验证。
  • React项目中使用@azure/msal-react等库配置认证，API端启用Azure B2C认证中间件验证Token有效性。

二、拆分为两个独立项目（复杂场景更推荐） #

若改造模板遇到兼容性问题，直接拆分项目是更清晰的方案：

• 独立Web API项目：用ASP.NET Core Web API模板初始化，配置Azure B2C认证中间件，指定API运行端口。
• 独立React SPA项目：用create-react-app创建，配置Azure B2C认证库，将API基础URL设置为API的端口地址（如https://localhost:5001/api）。
• 开发时分别启动两个项目，生产环境可分别部署（API部署到Azure App Service，SPA部署到Azure Static Web Apps或App Service）。

这种方案实现了职责分离，便于各自独立升级、部署和调试，更贴合Azure B2C对不同应用类型的认证配置要求。

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