ASP.NET Core - 从不同端口同时服务 API 和 SPA React

Question

可以从 ASP.NET Core 的不同端口同时为 API 和单页应用程序 (SPA) React/Redux 提供服务。 我在这里找到了一些帖子ASP.NET Core - 从同一端口为 API 和 SPA提供服务，要求从同一端口提供服务，我想在不同的端口上为它们提供服务，因为我想实施 Azure B2C 身份验证（这样我的水疗中心可以安全地与 web api 通信）。 我生成了一个样板，其中包含带有 .net web api 的 react spa，但默认情况下它在一个解决方案中。 不确定我是否应该生成 .net 核心 web api 并在单独的项目中反应应用程序但是当我运行该应用程序时，它在 launchSettings.json 中配置的端口上为 web 88290284.In135988 提供 spa 和 webapi

 services.AddSpaStaticFiles(configuration =>
        {
            configuration.RootPath = "ClientApp/build";
        });

  app.UseSpaStaticFiles();

  app.UseSpa(spa =>
        {
            if (env.IsDevelopment())
            {
                spa.UseReactDevelopmentServer(npmScript: "start");
            }
        });

我尝试将"homepage": "https://localhost:3000",添加到 react.app 的 package.json 我还尝试添加spa.Options.DefaultPage = "https://localhost:3000"我也尝试spa.UseProxyToSpaDevelopmentServer("https://localhost:3000"); 但这些都不起作用。 是否有类似 Nuget package 的东西，或者可能有一些额外的配置技巧，或者我应该放弃样板并创建 2 个独立的项目（1 个 create-react-app，然后生成默认的 web api 项目）。 谢谢

Answer 1

与 ASP.NET Core with React.js 的模板不同，React.js 和 Redux 使用的是 .net core3.1，因此它没有 .env 文件。 在该文件中，您可以设置项目的运行端口。
根据MS文档，我认为React.js和Redux项目是使用中间件先编译功能代码，然后将它们放到static web页面并显示。 以下代码完成这部分工作：

app.UseStaticFiles();
app.UseSpaStaticFiles();
app.UseSpa(spa =>
{
    spa.Options.SourcePath = "ClientApp";

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

当你在VS中启动项目时，在浏览器中可以看到端口号，这就是整个项目的运行端口。 所以你认为 API 和 SPA 在同一个端口上运行。 在我看来，API 正在使用中间件来调用 SPA。

您可以在 ClientApp 文件中使用命令行代码npm 启动将 SPA 作为独立项目运行，它将在默认端口 3000 上运行。这是我的测试截图：