如何将.NET Core 6 Web API与React前端合并部署至同一域名

完全可以实现，目前有两类成熟落地的方案，都不需要拆分不同子域名，还能直接省掉跨域配置的成本：

方案一：将React静态资源直接托管在.NET Core服务内 #

这是最轻量、运维成本最低的方案，前后端产物同进程对外提供服务：

• 前端项目执行生产构建命令 npm run build，生成包含index.html、hash化js/css、静态资源的build产物目录
• 清空.NET Core项目下的wwwroot目录，把React build出来的所有文件全量复制到该目录下
• 修改.NET Core项目的Program.cs配置，严格注意中间件顺序：
  1. 先注册静态文件中间件，放在授权、路由中间件之前：app.UseStaticFiles();
  2. 统一给所有Web API接口加/api路由前缀（控制器可以统一加[Route("api/[controller]")]特性），和前端路由做物理隔离
  3. 添加前端路由回退规则，避免React Router定义的路由在用户手动刷新时返回404，注意回退规则必须放在所有API端点映射配置的后面，避免拦截正常的接口请求，参考代码如下：

app.MapWhen(context => 
    !context.Request.Path.StartsWithSegments("/api") 
    && !Path.HasExtension(context.Request.Path.Value),
    appBuilder =>
    {
        appBuilder.UseStaticFiles();
        appBuilder.Run(async context =>
        {
            context.Response.ContentType = "text/html";
            await context.Response.SendFileAsync(
                Path.Combine(builder.Environment.WebRootPath, "index.html")
            );
        });
    });
);

• 可选优化：在VS项目中配置生成后事件，执行xcopy命令自动把React最新构建产物复制到wwwroot目录，避免手动复制的繁琐。

方案二：通过反向代理做统一入口 #

如果不想把前后端构建产物耦合在一起，适合前后端团队独立维护、独立发版的场景：

• 后端API服务正常部署在服务器的内部端口（比如5000），React项目构建后的静态资源直接交给Nginx托管（性能远高于Node服务）
• 在服务器最外层部署Nginx/Caddy作为反向代理，绑定唯一域名的80/443端口，按请求路径做转发规则：
  • 所有/api开头的请求，全量转发到后端.NET Core服务的内部端口
  • 其余请求直接返回React静态资源，同时配置路由回退规则：匹配不到的静态文件路径统一返回React的index.html，交给前端路由处理
• 这个方案下前后端可以独立发布迭代，不会互相影响，静态资源由专门的Web服务器托管，性能也更优。

通用注意事项 #

• 同域名部署后不存在跨域问题，之前为子域名配置的CORS策略可以直接移除
• 如果项目用了SignalR、gRPC-Web这类特殊服务，记得给对应的路径加统一前缀（比如/hubs），避免和前端路由、静态资源路径冲突
• 静态资源建议配置合理的缓存策略：带hash后缀的js/css/图片资源可以配置7天以上的长缓存，入口index.html配置no-cache，避免用户加载到旧版本前端代码。

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