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

Question

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

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模板，因为我想在前端和后端之间保持关注点的分离，而这样的模板本来就很模糊。到目前为止，通过提供后端启动时所使用的本地主机URL，我已经能够允许前端ReactJS应用程序使用后端ASP.NET Core API（即ReactJS应用程序在本地主机上启动：3000，并从API提取）本地主机上的终结点：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();
           }
         });
   

   1. 确保您具有管道中包含的用于默认文件和静态文件的中间件：

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

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