如何在IIS上使用ASP.NET Core 3.1 API部署Angular SPA? [英] How to deploy Angular SPA with ASP.NET Core 3.1 API on IIS?

问题描述

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

Should be simple scenario I imagine; have

1. Angluar 8 SPA
2. ASP .NET Core 3.1 Web API

要在具有IIS的Windows Server上进行部署，请通读以下内容:

Want to deploy on Windows Server with IIS have read through: Host ASP.NET Core on Windows with IIS

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

Want to with reccomended default In-process hosting model

但是如何结合Angular SPA和.net核心Web API?我可以在IIS的新站点下的Web api上运行良好，该站点从发布输出中提供文件，但是将SPA放在哪里?

But how to combine the Angular SPA and .net core web api? I can get the web api running fine under a new site in IIS serving files from publish output but where to put my SPA?

• 将Angular内置到发布输出中吗?
• 为Web API创建子应用程序，但是IIS然后添加了一个别名，这样我的路由如api/blah变为alias/api/blah
• 使用其他hostinmodel和代理到在不同端口上运行的Kestrel服务器吗?
• 某些wwwroot目录要重定向到，以便从那里导航到网站可提供SPA?

• Mix Angular build in with the publish output?
• Create sub application for Web API but IIS then adds an alias so my routes like api/blah become alias/api/blah
• Use the other hostinmodel and proxy to Kestrel server running on different port?
• Some wwwroot dir to redirect to so navigating to website serves SPA from there?

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

I see if using the Angular template to create solution it creates a ClientApps/dist dir, maybe could recreate the project with that template then dump the Angular build in that dir on deploy (since Angular project developed in separate repo).

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

推荐答案

看到这个问题已经一个月了.希望您找到了解决方案. @JokiesDing评论很正确.

Seeing this question is already a month old. Hopefully you have found a solution. @JokiesDing comment is pretty much on point.

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

My approach with development and deployment is to have the SPA application inside the Web API project and utilize Microsoft.AspNetCore.SpaServices.Extensions. Here are the steps:

1. 创建一个Angular应用程序并将其放在您的应用程序目录中.例如，我通常在项目内部创建一个ClientApp文件夹，并将我的角度应用程序放置在其中.
2. 从Nuget安装Microsoft.AspNetCore.SpaServices.Extensions
3. 转到您的Startup.cs并添加扩展方法

1. Create an Angular Application and put it inside your application directory. For example, I usually create an ClientApp Folder inside the project and place my angular app inside.
2. Install Microsoft.AspNetCore.SpaServices.Extensions from Nuget
3. Go to your Startup.cs and add the extension methods

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");
     }
    });
}

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

1. Bonus! if you don't want to run npm run start everytime you build, you can point the webapi to the SPA dev server.

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

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

For Reference see this starter template https://github.com/jasontaylordev/CleanArchitecture

这篇关于如何在IIS上使用ASP.NET Core 3.1 API部署Angular SPA?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！