Как развернуть Angular SPA с ASP. NET Core 3.1 API в IIS? - PullRequest
Новая
       57

Как развернуть Angular SPA с ASP. NET Core 3.1 API в IIS?

2 голосов
/ 28 мая 2020

Думаю, должен быть простой сценарий; иметь

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

Хотите развернуть на Windows сервере с IIS. Прочтите: Хост ASP. NET Ядро на Windows с IIS

in-process hosting model

Хотите с рекомендованным значением по умолчанию Модель внутрипроцессного хостинга

Но как совместить Angular SPA и. net core web api? Я могу заставить веб-api нормально работать на новом сайте в файлах обслуживания IIS из вывода publi sh, но где разместить мой SPA?

  • Mix Angular, встроенный с publi sh output?
  • Создать дополнительное приложение для веб-API, но затем IIS добавляет псевдоним, чтобы мои маршруты, такие как api/blah, стали alias/api/blah
  • Использовать другую модель хоста и прокси-сервер для сервера Kestrel, работающего на другом порту ?
  • Какой-то wwwroot каталог для перенаправления, чтобы переход на веб-сайт служил SPA оттуда?

Я вижу, используется ли шаблон Angular для создания решения, он создает ClientApps/dist dir, возможно, можно воссоздать проект с этим шаблоном, а затем выгрузить сборку Angular в этот каталог при развертывании (поскольку проект Angular разработан в отдельном репо). 

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

1 Ответ

1 голос
/ 30 июня 2020

Увидеть этот вопрос уже месяц. Надеюсь, вы нашли решение. Комментарий @JokiesDing в значительной степени уместен.

Мой подход к разработке и развертыванию заключается в том, чтобы иметь приложение SPA внутри проекта веб-API и использовать Microsoft.AspNetCore.SpaServices.Extensions. Вот шаги:

  1. Создайте приложение Angular и поместите его в каталог вашего приложения. Например, я обычно создаю папку ClientApp внутри проекта и помещаю в нее свое приложение angular. project directory
  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. 
 if (env.IsDevelopment())
 {
   spa.UseProxyToSpaDevelopmentServer("http://localhost:4200");
 }

Для справки см. этот начальный шаблон https://github.com/jasontaylordev/CleanArchitecture

...