将单独的 ReactJS 客户端前端应用程序与 ASP.NET Core 后端 API 合并？

Question

我正在开发一个带有 ASP.NET Core 后端的全栈 Web 应用程序，该后端服务于 REST 和 GraphQL API。 .NET Core 应用在 Visual Studio 中的结构如下：

Backend.API: the API portion of the project that contains all the controllers and GraphQL query/mutation definitions that the front-end application consumes.  
Backend.Core: the portion of the back-end that defines all the user & application models used by the Backend.Data portion.  
Backend.Data: interacts with the database and defines all the repositories that the Backend.API portion uses when returning data for GraphQL queries, etc.

后端 .NET Core API 由完全独立于 C# 项目的前端 ReactJS 应用程序使用（创建为单独的 ReactJS 应用程序）。

我不想使用 ReactJS ASP.NET Core 模板，因为我想保持前端和后端之间的关注点分离，这样的模板会模糊不清。到目前为止，我已经能够通过提供后端启动的 localhost URL 来允许前端 ReactJS 应用程序使用后端 ASP.NET Core API（即 ReactJS 应用程序在 localhost:3000 上启动并从 API 获取localhost:5437 上的端点，其中后端由 Visual Studio 启动）。但是，当我想部署网站时，这两个部分之间的分离是不可行的——我需要将前端和后端项目结合起来，以便它们在同一个 URL 下运行。

因此，这提出了一个问题：将我的单独前端 ReactJS 应用程序与我的后端 ASP.NET Core API 合并以便它们在单个 URL 下运行的最佳方法是什么？

Answer 1

如果我在你的位置上，我会这样做：

1. 我会将 Backend.API 重命名为 Backend.Web
2. 将我的整个 React 应用移到 wwwroot 文件夹中

3. 创建一个中间件，它将为我的 React 应用程序index.html 页面提供服务

   ：

         app.Use(async (context, next) =>
         {
           await next();
           var path = context.Request.Path.Value;
   
           if (!path.StartsWith("/api") && !Path.HasExtension(path))
           {
             context.Request.Path = "/index.html";
             await next();
           }
         });
   

   4. 确保管道中包含默认文件和静态文件的中间件：

   app.UseDefaultFiles(); app.UseStaticFiles();

4. Index.html 将链接在 ReactJS 应用程序构建后创建的 JavaScript 和 CSS。