如何在单个 ASP.NET Core 站点上托管多个 React SPA 应用程序？答案

【问题标题】：How to host multiple React SPA apps on a single ASP.NET Core site?如何在单个 ASP.NET Core 站点上托管多个 React SPA 应用程序？
【发布时间】：2020-12-08 04:54:32
【问题描述】：

我正在尝试使用具有最新 SpaServices 扩展的 ASP.NET Core 3.1 运行多个 React SPA 应用，但在提供静态资产时遇到问题。我构建的大部分内容来自How to configure ASP.net Core server routing for multiple SPAs hosted with SpaServices 上的一个类似问题，但这与 Angular 和旧版本的 SpaServices 有关。

我的代码有两个 React 应用程序，ClientApp 和 AdminApp，我使用以下启动代码对每个应用程序进行了配置：

app.Map("/client", clientApp =>
{
    clientApp.UseSpa(spa =>
    {
        spa.Options.SourcePath = "ClientApp";

        if (env.IsDevelopment())
        {
            spa.UseReactDevelopmentServer(npmScript: "start");
        }
    });
});

app.Map("/admin", adminApp =>
{
    adminApp.UseSpa(spa =>
    {
        spa.Options.SourcePath = "AdminApp";

        if (env.IsDevelopment())
        {
            spa.UseReactDevelopmentServer(npmScript: "start");
        }
    });
});

转到 /client 和 /admin 路由会提供正确的 React index.html 文件，但不会加载链接的捆绑 .js 文件。这是ClientApp SPA 的最终索引 HTML 示例：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <base href="/client" />
    <title>Client App</title>
  </head>
  <body>
    <h1>Client App</h1>
    <div id="root"></div>
    <script src="/static/js/bundle.js"></script>
    <script src="/static/js/0.chunk.js"></script>
    <script src="/static/js/main.chunk.js"></script>
  </body>
</html>

问题在于链接是相对于站点的根目录/static/js/bundle.js 并且需要相对于 React 应用程序的路径。示例文件路径应分别为/client/static/js/bundle.js 和/admin/static/js/bundle.js。

如何让将路径写入 index.html 文件的系统为静态文件使用正确的根路径？谢谢。

【问题讨论】：

你在这方面有什么进展吗？我正在解决同样的挑战，发现在 package.json 中添加 homepage 属性的设置确实为脚本 src 路径添加了新路径。但现在在控制台中看到未捕获的语法错误日志。
添加 homepage 属性有效，但仅在已发布的输出中。调试时它不起作用，这意味着它对我来说毫无意义。不幸的是，我最终建立了一个单独的管理站点。
在 2021 年，仍然没有找到一种方法来以一种好的方式（通过热重载）为每个 SPA 托管两个开发环境。我想出的最佳解决方案是build 每个反应项目，这样我就可以指向每个应用程序的产品构建目录。这确实违背了目的。仍然无法让代理设置正常工作。

标签： reactjs asp.net-core single-page-application asp-net-core-spa-services

【解决方案1】：

想出一个可能的解决方案。期望构建 SPA 将其构建目录的内容复制到 .NET Core 项目的 wwwroot 文件夹中的文件夹中，该文件夹使用与 SPA 将使用的路由相同的名称。在这种情况下，我们有两个应用程序，guestuser 和 payinguser。 Configure 函数中的映射将重定向用户请求以将静态文件拉出相应的 wwwroot 文件夹。

Startup.cs

public void ConfigureServices(IServiceCollection services)
{
   ...
   services.AddSpaStaticFiles();
}

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
...

   app.UseStaticFiles(new StaticFileOptions()
   {
       FileProvider = new PhysicalFileProvider(Path.Combine(Directory.GetCurrentDirectory(), "wwwroot"))
   });

   app.Map("/guestuser", mappedSpa=>
   {
       mappedSpa.UseSpa(spa =>
       {
           spa.Options.DefaultPageStaticFileOptions = new StaticFileOptions()
           {
               FileProvider =
                   new PhysicalFileProvider(Path.Combine(Directory.GetCurrentDirectory(), "wwwroot/guestuser"))
           };
           spa.Options.SourcePath = "wwwroot/guestuser";
       });
   });

   app.Map("/payinguser", mappedSpa=>
   {
       mappedSpa.UseSpa(spa =>
       {
           spa.Options.DefaultPageStaticFileOptions = new StaticFileOptions()
           {
               FileProvider =
                   new PhysicalFileProvider(Path.Combine(Directory.GetCurrentDirectory(), "wwwroot/payinguser"))
           };
           spa.Options.SourcePath = "wwwroot/payinguser";
       });
   });
}

在 ReactJS 项目中，您需要将 homepage 属性更新/添加到每个项目的 package.json 文件中，以使用与 wwwroot 文件夹下的站点托管文件夹相同的名称。这将更新生成代码的路径以在其文件引用中使用路径名。

{
  "name": "guest-user",
  "homepage": "guestuser",
  ...
}

【讨论】：