Выберите правильную угловую среду на основе .Net Core - PullRequest
4 голосов
/ 08 апреля 2019

Я создал .Net Core Web Api с Angular ClientApp с шаблонами из Visual Studio.

При сборке проекта также создается приложение Angular с параметрами, установленными в разделе .csproj , например,

<Target Name="PublishRunWebpack" AfterTargets="ComputeFilesToPublish">
    <!-- As part of publishing, ensure the JS resources are freshly built in production mode -->
    <Exec WorkingDirectory="$(SpaRoot)" Command="npm install" />
    <Exec WorkingDirectory="$(SpaRoot)" Command="npm run build -- --prod" />
    <Exec WorkingDirectory="$(SpaRoot)" Command="npm run build:ssr -- --prod" Condition=" '$(BuildServerSideRenderer)' == 'true' " />

    <!-- Include the newly-built files in the publish output -->
    <ItemGroup>
      <DistFiles Include="$(SpaRoot)dist\**; $(SpaRoot)dist-server\**" />
      <DistFiles Include="$(SpaRoot)node_modules\**" Condition="'$(BuildServerSideRenderer)' == 'true'" />
      <ResolvedFileToPublish Include="@(DistFiles->'%(FullPath)')" Exclude="@(ResolvedFileToPublish)">
        <RelativePath>%(DistFiles.Identity)</RelativePath>
        <CopyToPublishDirectory>PreserveNewest</CopyToPublishDirectory>
      </ResolvedFileToPublish>
    </ItemGroup>
  </Target>

(Этот раздел был автоматическигенерируется при создании нового проекта)

Тем не менее, у меня нет выбора, какой файл environment.ts из Angular следует использовать во время сборки, что усложняет сборку для различных целей развертывания.

Есть ли способ установить этот файл динамически во время сборки?например,

  • appsettings.json должен собираться с environment.ts
  • appsettings.Development.json должен собиратьсяс environment.dev.ts
  • appsettings.Production.json следует собирать с environment.prod.ts
  • и т. д..

Это будет гарантировать, что каждая сборка dotnet и соответствующая ей сборка Angular будут иметь правильные значения окружения для api-url, версии и т. Д. *

Или есть другой(более чистый?) метод использования / переопределения переменных среды для приложения Angular?

Это значения, которые должны быть обменены во время сборки

export const environment = {
    production: false,
    dataServiceURI: 'https://localhost:5001/data',
    version: 'localhost'
};

Поскольку localhost: 5001 не является приемлемым вариантом впродукт например

Ответы [ 2 ]

5 голосов
/ 11 мая 2019

Я просто хотел бы предоставить комплексное решение, потому что мне потребовалось довольно много времени, чтобы спасти вас сейчас:).

Моя цель состояла в том, чтобы иметь разные конфигурации среды для разных компаний,поскольку веб-приложение будет использоваться различными компаниями с небольшими изменениями (включение / отключение модулей, изменение логотипа, изменение цвета темы и т. д.).

  1. Настройка launchSettings.json (в рамках вашего веб-проекта всвойства).Добавьте следующий код под profiles:
"Staging": {
 "commandName": "IISExpress",
 "launchBrowser": true,
 "environmentVariables": {
   "ASPNETCORE_ENVIRONMENT": "Staging"
 },
 "applicationUrl": "https://localhost:5001;http://localhost:5000"
}

Где Staging - это имя, если вы хотите имя среды.Это обеспечит возможность выбора этой конфигурации в Start в Visual Studio.

Для получения дополнительной информации: прочтите это

Добавьте собственный файл appsettings.Staging.json в корневой каталог решения для пользовательских настроек приложения.Хотя это в основном важно для локального тестирования, потому что в вашем CI / CD вы, вероятно, захотите настроить замен .Если вы хотите использовать конкретный appsettings.Staging.json в производственной среде, установите ASPNETCORE_ENVIRONMENT на Staging на сервере (для службы приложений Azure в разделе Конфигурация => Настройки приложения).

В вашем Startup.cs добавьте следующий else if блок.

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");
    }
    else if (env.EnvironmentName == "Staging")
    {
#if DEBUG
        spa.UseAngularCliServer(npmScript: "start-stagingdebug");
#endif
    }
});

Обратите внимание на #if DEBUG, это необходимо, потому что вы не хотите выполнять это наразвернутая среда, однако для локального запуска angular вам нужно это вызвать, иначе вы получите страницу с ошибкой.Как вы можете заметить, я добавляю debug к имени среды, я объясню позже.На данный момент вы должны понимать, что env.IsDevelopment() будет ложным, и поэтому вам придется работать, чтобы убедиться, что ваше угловое приложение все еще будет собираться и обслуживаться при локальном запуске приложения.

Измените angular.json, под architect => build => configurations, добавьте 2 новые конфигурации:
"staging": {
  "fileReplacements": [
    {
      "replace": "src/environments/environment.ts",
      "with": "src/environments/environment.toptechneut.ts"
    },
    {
      "replace": "src/assets/img/logo-icon.png",
      "with": "src/assets/img/staging/logo-icon.png"
    },
  ],

  "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"
    }
  ]
},
"stagingdebug": {
  "fileReplacements": [
    {
      "replace": "src/environments/environment.ts",
      "with": "src/environments/environment.toptechneut.ts"
    },
    {
      "replace": "src/assets/img/logo-icon.png",
      "with": "src/assets/img/staging/logo-icon.png"
    },
  ]
}

Если вам немного известно о angular.json, вы заметите, что вstaging Я делаю конфигурацию для производственной среды, я буду следить за тем, чтобы мой CI / CD вызывал это (или когда я опубликую свое приложение через VS2017).Для локального тестирования у меня есть другая конфигурация stagingdebug, так что она по-прежнему сохраняет исходные карты, и я могу отлаживать свой код при локальном запуске.

Добавьте ваш файл environment.staging.ts в папку environments для параметров, зависящих от среды.Подробнее об этом, читайте это

измените ваш package.json, под scripts, я добавил эти сценарии:

"start-staging": "ng serve --configuration staging",
"start-stagingdebug": "ng serve --configuration stagingdebug",
"build-staging": "ng build --configuration staging",
"build-stagingdebug": "ng build --configuration stagingdebug",

То же самое здесь: для локальной разработки я называю конфигурацию с добавлением debug.

На данный момент вы должны иметь возможность перейти на новую конфигурацию в Visual Studio и работать в соответствии сВаши новые конфигурации среды!

visual studio choose different config to start

Измените ваш .csproj, спасибо за это pjominet.Обратите внимание, что еще раз, это только для публикации вашего веб-приложения, а не для локальной отладки.
<Target Name="PublishRunWebpack" AfterTargets="ComputeFilesToPublish">
<!-- As part of publishing, ensure the JS resources are freshly built in production mode -->
 <Exec WorkingDirectory="$(SpaRoot)" Command="npm install" />

 <Exec WorkingDirectory="$(SpaRoot)" Command="npm run build-core" />
 <Exec WorkingDirectory="$(SpaRoot)" Command="npm run buildprod" Condition="'$(Configuration)' == 'Release'" />
 <Exec WorkingDirectory="$(SpaRoot)" Command="npm run build-staging" Condition="'$(Configuration)' == 'Staging'" />
 <Exec WorkingDirectory="$(SpaRoot)" Command="npm run build:ssr -- --prod" Condition=" '$(BuildServerSideRenderer)' == 'true' " />
  <!--rest below here-->

Я изменил мой, чтобы вызвать правильный script, который я определил в моем package.jsonпотому что по какой-то причине мой CI не принимал дополнительные команды за ним, пока я использовал ответ pjominet.

Если вы используете DevOps Azure, вам просто нужно изменить значение переменной BuildConfiguration на Staging.Если вы выполнили все шаги, то это должно быть успешно построено.

azure devops build config

5 голосов
/ 17 апреля 2019

Я вроде как нашел решение, манипулируя * .csproj в конце концов.

СОВЕТ: Для ясности эта проблема применима, только когда вы создали свой проект с Visual Studio .Net Core Web Api with Angular Template, которыйсоздает объединенный веб-API с проектом clientapp

После того, как я узнал, что могу добавить пользовательские конфигурации сборки для dotnet build, я добавил следующие строки в блок <Target Name="PublishRunWebpack" AfterTargets="ComputeFilesToPublish">:

<Exec WorkingDirectory="$(SpaRoot)" Command="npm run build-prod" Condition="'$(Configuration)' == 'Release'" />
<Exec WorkingDirectory="$(SpaRoot)" Command="npm run build-staging" Condition="'$(Configuration)' == 'Staging'" />

и в package.json добавьте в сценарии:

"scripts": {
        "build-staging": "ng build --configuration=staging",
        "build-prod": "ng build --configuration=production",
    },

То, что он делает, находится на разных конфигурациях сборки, установленных атрибутом Condition, npm run build вызывается с соответствующей / подходящей средой.

Другой, возможно, более простой подход, состоит в том, чтобы иметь два конвейера сборки, один для npm и углового приложения, а другой для веб-интерфейса dotnet.При этом вы можете захотеть удалить весь сборочный SPA-файл из * .csproj, иначе он соберет приложение дважды.

Или просто сначала создайте 2 отдельных проекта и избавьте себя от хлопот:)

РЕДАКТИРОВАТЬ:

Как указано Command="npm run build --configuration=production" (например, построить с параметрами Mutliple)не подхватывается CI / CD.Поэтому использование предопределенных сценариев из package.json - правильный путь:)

...