Выпуская .NET Core 2.1 с angular 7 в Azure Web Apps - пытается запустить 'ng serve' - PullRequest
0 голосов
/ 27 ноября 2018

Я только начал создавать новый проект .NET Core 2.1 с Angular 7. Запуск его локально работает отлично, в веб-приложениях Azure он не запускается (хотя я не уверен, должен ли он «запускаться» в первый раз).place).

Путь dist index.html: /ClientApp/dist/ClientApp/index.html

Когда я изменяю «Виртуальные приложения и каталоги» в настройках приложениявеб-приложения на сайт / wwwroot / ClientApp / dist / ClientApp, затем он запускается, но затем не может вызвать фактические методы .NET Core API.Он также не может загрузить ресурсы, когда они находятся в одной папке.

Почему это прекрасно работает локально, а не в рабочей среде.Я проведу вас по деталям конфигурации, вы можете обнаружить проблему.

Angular.json

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "ClientApp": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "prefix": "app",
      "schematics": {
        "@schematics/angular:component": {
          "styleext": "less"
        }
      },
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/ClientApp",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "node_modules/bootstrap/dist/css/bootstrap.css",
              "src/styles.less"
            ],
            "scripts": [
              "node_modules/jquery/dist/jquery.min.js",
              "node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"
            ]
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "2mb",
                  "maximumError": "5mb"
                }
              ]
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "ClientApp:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "ClientApp:build:production"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "ClientApp:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.spec.json",
            "karmaConfig": "src/karma.conf.js",
            "styles": [
              "src/styles.less"
            ],
            "scripts": [],
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ]
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "src/tsconfig.app.json",
              "src/tsconfig.spec.json"
            ],
            "exclude": [
              "**/node_modules/**"
            ]
          }
        }
      }
    },
    "ClientApp-e2e": {
      "root": "e2e/",
      "projectType": "application",
      "prefix": "",
      "architect": {
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "ClientApp:serve"
          },
          "configurations": {
            "production": {
              "devServerTarget": "ClientApp:serve:production"
            }
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": "e2e/tsconfig.e2e.json",
            "exclude": [
              "**/node_modules/**"
            ]
          }
        }
      }
    }
  },
  "defaultProject": "ClientApp"
}

Startup.cs (простопо умолчанию)

    public void ConfigureServices(IServiceCollection services)
    {            services.AddMvc().SetCompatibilityVersion(CompatibilityVersion.Version_2_1);
        ....
        // In production, the Angular files will be served from this directory
        services.AddSpaStaticFiles(configuration =>
        {
            configuration.RootPath = "ClientApp/dist";
        });

         ...
    }

     public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory)
    {
        ....
        if (env.IsDevelopment())
        {
            app.UseDeveloperExceptionPage();
        }
        else
        {
            app.UseExceptionHandler("/Error");
            app.UseHsts();
        }

        app.UseHttpsRedirection();
        app.UseStaticFiles();
        app.UseSpaStaticFiles();

        app.UseMvc(routes =>
        {
            routes.MapRoute(
                name: "default",
                template: "{controller}/{action=Index}/{id?}");
        });

        app.UseSpa(spa =>
        {
            // To learn more about options for serving an Angular SPA from ASP.NET Core,
            // see https://go.microsoft.com/fwlink/?linkid=864501

            spa.Options.SourcePath = "ClientApp";

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

VSTS / AzureDevOps:

Сборка:

  • содержит задачу .NET Core Build, то естьуказывает на csproj.
  • Содержит задачу публикации .NET Core:

publish task

Релиз:

  • Просто стандартная конфигурация развертывания:

release config

Первая ошибка:

Error.Произошла ошибка при обработке вашего запроса.Идентификатор запроса: | a1396e11-481dfbf3c3c010dc.

Переключение режима разработки в среду разработки отобразит более подробную информацию об ошибке, которая произошла.

Среду разработки не следует включать в развернутых приложениях, так какв результате конфиденциальная информация от исключений будет отображаться для конечных пользователей.Для локальной отладки среду разработки можно включить, установив для переменной среды ASPNETCORE_ENVIRONMENT значение Development и перезапустив приложение.

Итак, я делаю то, что запрашиваю, и переключаю в режим разработки, добавляя ASPNETCORE_ENVIRONMENT = Разработка.

Затем появляется эта ошибка, в основном говоря, что она хочет запустить приложение с помощью сборки npm (а затем выполнить ng serve).Но проект уже собран и готов к работе, почему он хочет запустить другой веб-сервер (на веб-сервере) так, как он это делал бы при разработке?

При обработке запроса произошло необработанное исключение.AggregateException: произошла одна или несколько ошибок.(Произошла одна или несколько ошибок. («Запуск» сценария NPM завершился без указания того, что Angular CLI прослушивал запросы. Вывод ошибки: «npm» не распознается как внутренняя или внешняя команда,

Теперь я могу, конечно, установить angular-cli, но это не кажется правильным, не так ли? Внутри Startup.cs он говорит, что такое sourcePath, и на самом деле естькомментарий, рассказывающий мне о производственной среде. Почему мое приложение не работает как обычно?

ОБНОВЛЕНИЕ 1:

После комментария Кирка Ларкина отключение среды разработки и включение журналов,это было произведено:

2018-11-27 12:17:03.259 +00:00 [Debug] Microsoft.AspNetCore.StaticFiles.StaticFileMiddleware: The request path / does not match a supported file type
2018-11-27 12:17:03.259 +00:00 [Debug] Microsoft.AspNetCore.StaticFiles.StaticFileMiddleware: The request path / does not match a supported file type
2018-11-27 12:17:03.607 +00:00 [Debug] Microsoft.AspNetCore.Builder.RouterMiddleware: Request did not match any routes.
2018-11-27 12:17:03.609 +00:00 [Debug] Microsoft.AspNetCore.StaticFiles.StaticFileMiddleware: The request path /index.html does not match an existing file
2018-11-27 12:17:03.628 +00:00 [Error] Microsoft.AspNetCore.Diagnostics.ExceptionHandlerMiddleware: An unhandled exception has occurred while executing the request.
System.InvalidOperationException: The SPA default page middleware could not return the default page '/index.html' because it was not found, and no other middleware handled the request.
Your application is running in Production mode, so make sure it has been published, or that you have built your SPA manually. Alternatively you may wish to switch to the Development environment.

   at Microsoft.AspNetCore.SpaServices.SpaDefaultPageMiddleware.<>c__DisplayClass0_0.<Attach>b__1(HttpContext context, Func`1 next)
   at Microsoft.AspNetCore.Builder.UseExtensions.<>c__DisplayClass0_1.<Use>b__1(HttpContext context)
   at Microsoft.AspNetCore.StaticFiles.StaticFileMiddleware.Invoke(HttpContext context)
   at Microsoft.AspNetCore.Builder.RouterMiddleware.Invoke(HttpContext httpContext)
   at Microsoft.AspNetCore.Cors.Infrastructure.CorsMiddleware.Invoke(HttpContext context)
   at Microsoft.AspNetCore.Cors.Infrastructure.CorsMiddleware.Invoke(HttpContext context)
   at Microsoft.AspNetCore.Cors.Infrastructure.CorsMiddleware.Invoke(HttpContext context)
   at Microsoft.AspNetCore.Cors.Infrastructure.CorsMiddleware.Invoke(HttpContext context)
   at Microsoft.AspNetCore.Cors.Infrastructure.CorsMiddleware.Invoke(HttpContext context)
   at Microsoft.AspNetCore.Cors.Infrastructure.CorsMiddleware.Invoke(HttpContext context)
   at Microsoft.AspNetCore.StaticFiles.StaticFileMiddleware.Invoke(HttpContext context)
   at Microsoft.AspNetCore.StaticFiles.StaticFileMiddleware.Invoke(HttpContext context)
   at Microsoft.AspNetCore.Diagnostics.ExceptionHandlerMiddleware.Invoke(HttpContext context)
2018-11-27 12:17:03.721 +00:00 [Debug] Microsoft.AspNetCore.StaticFiles.StaticFileMiddleware: The request path /Error does not match a supported file type
2018-11-27 12:17:03.721 +00:00 [Debug] Microsoft.AspNetCore.StaticFiles.StaticFileMiddleware: The request path /Error does not match a supported file type
2018-11-27 12:17:03.727 +00:00 [Debug] Microsoft.AspNetCore.Routing.Tree.TreeRouter: Request successfully matched the route with name '(null)' and template 'Error'.
2018-11-27 12:17:03.744 +00:00 [Debug] Microsoft.AspNetCore.Mvc.Razor.Internal.RazorViewCompiler: Initializing Razor view compiler with compiled view: '/Pages/Error.cshtml'.
2018-11-27 12:17:03.744 +00:00 [Debug] Microsoft.AspNetCore.Mvc.Razor.Internal.RazorViewCompiler: Initializing Razor view compiler with compiled view: '/Pages/_ViewImports.cshtml'.
2018-11-27 12:17:03.745 +00:00 [Trace] Microsoft.AspNetCore.Mvc.Razor.Internal.RazorViewCompiler: Located compiled view for view at path '/Pages/Error.cshtml'.
2018-11-27 12:17:03.820 +00:00 [Trace] Microsoft.AspNetCore.Mvc.Razor.Internal.RazorViewCompiler: Could not find a file for view at path '/Pages/_ViewStart.cshtml'.
2018-11-27 12:17:03.828 +00:00 [Trace] Microsoft.AspNetCore.Mvc.Razor.Internal.RazorViewCompiler: Could not find a file for view at path '/_ViewStart.cshtml'.
2018-11-27 12:17:03.900 +00:00 [Information] Microsoft.AspNetCore.Mvc.RazorPages.Internal.PageActionInvoker: Route matched with {page = "/Error", action = "", controller = ""}. Executing action /Error

Он говорит, что не может найти index.html или любой поддерживаемый тип файла. Я сейчас пытаюсь обновить ht Startup.cs и указать ClientApp / dist / ClientApp для rootPath.Perhabs, который помогает

1 Ответ

0 голосов
/ 27 ноября 2018

После комментария @ KirkLarkin я смог найти решение.Мне просто нужно было изменить rootPath на местоположение index.html

public void ConfigureServices(IServiceCollection services)
{            services.AddMvc().SetCompatibilityVersion(CompatibilityVersion.Version_2_1);
    ....
    // In production, the Angular files will be served from this directory
    services.AddSpaStaticFiles(configuration =>
    {
        configuration.RootPath = "ClientApp/dist/ClientApp";//change here
    });

     ...
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...