Объединить отдельное клиентское приложение ReactJS с API-интерфейсом ASP.NET Core?

Question

Я занимаюсь разработкой полнофункционального веб-приложения с серверной частью ASP.NET Core, которая обслуживает API REST & GraphQL. Приложение .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.

Внутренние API .NET Core используются интерфейсным приложением ReactJS, которое полностью отделено от C # Project (созданного как отдельное приложение ReactJS).

Я не хотел использовать шаблон ReactJS ASP.NET Core, так как хотел поддерживать разделение проблем между интерфейсом и бэкэндом, что в таком шаблоне было бы размыто. До сих пор я позволял внешнему приложению ReactJS использовать внутренний API-интерфейс ASP.NET ядра, предоставляя локальный URL-адрес, на котором запускается серверная часть (т. Е. Приложение ReactJS запускается на localhost: 3000 и извлекается из API). конечные точки на локальном хосте: 5437, где серверная часть запускается Visual Studio). Однако такое разделение между двумя частями невозможно, например, когда я хочу развернуть веб-сайт - мне нужно объединить внешние и внутренние проекты, чтобы они работали по одному и тому же URL.

Поэтому возникает вопрос: как лучше всего объединить мое отдельное интерфейсное приложение ReactJS с моим внутренним API-интерфейсом ASP.NET Core, чтобы они работали под одним URL-адресом?

Answer 1

Это то, что я сделал бы, если бы я был на вашем месте:

1. Я бы переименовал Backend.API в Backend.Web
2. Переместите все приложение реагирования в wwwroot папка

3. Создание промежуточного программного обеспечения, которое будет обслуживать приложение моего React index.html page

   :

         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();

Index.html будет связывать JavaScript и CSSсоздается после сборки приложения ReactJS.