asp.net-core - 如何在 IIS 上使用 ASP.NET Core 3.1 API 部署 Angular SPA？

Question

应该是我想象的简单场景；有

Angluar 8 SPA

ASP .NET Core 3.1 Web API

想用IIS部署在Windows Server上的请通读: Host ASP.NET Core on Windows with IIS



想要使用推荐的默认进程内托管模型

但是如何结合 Angular SPA 和 .net core web api？我可以让 web api 在 IIS 中的新站点下正常运行，从发布输出提供文件，但是我的 SPA 放在哪里？

将 Angular 构建与发布输出混合使用？

为 Web API 创建子应用程序，但 IIS 然后添加了一个别名，因此我的路由类似于 api/blah成为alias/api/blah

使用其他主机模型和代理到在不同端口上运行的 Kestrel 服务器？

一些 wwwroot 目录重定向到这样导航到网站服务 SPA 从那里？

我看到如果使用 Angular 模板来创建解决方案，它会创建一个 ClientApps/dist dir，也许可以使用该模板重新创建项目，然后在部署时将 Angular 构建转储到该目录中(因为 Angular 项目是在单独的 repo 中开发的)。

            // In production, the Angular files will be served from this directory
            services.AddSpaStaticFiles(configuration =>
            {
                configuration.RootPath = "ClientApp/dist";
            });

Answer 1

看到这个问题已经一个月了。希望你已经找到了解决办法。 @JokiesDing 评论非常重要。
我的开发和部署方法是在 Web API 项目中使用 SPA 应用程序并利用 Microsoft.AspNetCore.SpaServices.Extensions .以下是步骤:

创建一个 Angular 应用程序并将其放入您的应用程序目录中。例如，我通常在项目中创建一个 ClientApp 文件夹并将我的 angular 应用程序放在里面。

安装 Microsoft.AspNetCore.SpaServices.Extensions来自 Nuget

转到您的 Startup.cs并添加扩展方法

public void ConfigureServices(IServiceCollection services)
{
   //... whatever you have in your ConfigureServices method...

   //add this
   services.AddSpaStaticFiles(configuration =>
   {
      configuration.RootPath = "ClientApp/dist";
   });
}

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
    //... whatever you have in your configure method...

    //add this
    app.UseStaticFiles();
    if (!env.IsDevelopment())
    {
       app.UseSpaStaticFiles();
    }


   app.UseSpa(spa =>
   {
     // To learn more about options for serving an Angular SPA
     // see https://go.microsoft.com/fwlink/?linkid=864501
     spa.Options.SourcePath = "ClientApp";
     if (env.IsDevelopment())
     {
         spa.UseAngularCliServer(npmScript: "start");
     }
    });
}

奖金!如果你不想运行 npm run start每次构建时，您都可以将 webapi 指向 SPA 开发服务器。

 if (env.IsDevelopment())
 {
   spa.UseProxyToSpaDevelopmentServer("http://localhost:4200");
 }

有关引用，请参阅此入门模板
https://github.com/jasontaylordev/CleanArchitecture