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

Question

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

1. Angluar 8 SPA
2. 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目录，也许可以使用该模板重新创建项目，然后在部署时将 Angular 构建转储到该目录中（因为 Angular 项目是在单独的 repo 中开发的）。

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

Answer 1

看到这个问题已经一个月了。希望您已经找到解决方案。@JokiesDing 的评论非常切题。

我的开发和部署方法是将 SPA 应用程序放在 Web API 项目中并利用Microsoft.AspNetCore.SpaServices.Extensions. 步骤如下：

1. 创建一个 Angular 应用程序并将其放入您的应用程序目录中。例如，我通常在项目内创建一个 ClientApp 文件夹，并将我的 Angular 应用程序放入其中。
2. Microsoft.AspNetCore.SpaServices.Extensions从 Nuget安装
3. 转到您的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");
     }
    });
}

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

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

如需参考，请参阅此入门模板 https://github.com/jasontaylordev/CleanArchitecture