На данный момент не секрет, что Angular CLI является предпочтительным методом разработки приложений Angular из-за его простоты и мощности одновременно. Одним из основных преимуществ использования Angular CLI является то, что он скрывает большую часть церемонии, связанной с созданием приложения Angular (выбор руководства по стилю, настройка файла package.json, настройка системы сборки на стороне клиента, настройка модуля тестирование, подготовка кода к производству и т. д.).

Все это замечательно, но у разработчиков, которые привыкли работать с Azure, всегда была одна проблема, заключающаяся в том, что интерфейс командной строки Angular не предоставляет много информации о публикации в Azure. Это сделано намеренно, поскольку интерфейс командной строки Angular пытается не задумываться о том, как вы будете размещать свое приложение. В этом посте я покажу вам, как создать конвейер CI / CD с помощью Azure DevOps, который развернет ваше приложение Angular в веб-приложении Azure. Я предполагаю, что вы уже настроили Angular CLI на своем компьютере и что вы уже создали приложение Angular. Я также предполагаю, что вы уже выполнили необходимые шаги по внедрению своего кода в Azure DevOps.

Сборка приложения

Как упоминалось выше, я не буду вдаваться в подробности создания нового приложения Angular с использованием Angular CLI, но я хотел бы указать, что нам нужно будет добавить файл web.config в src папка, чтобы дать указание нашему базовому веб-серверу в Azure перезаписать весь входящий запрос для обслуживания нашего файла index.html:

<configuration>
<system.webServer>
<staticContent>
<mimeMap fileExtension=".json" mimeType="application/json" />
<remove fileExtension=".woff"/>
<mimeMap fileExtension=".woff" mimeType="application/font-woff" />
<mimeMap fileExtension=".woff2" mimeType="font/woff2" />
</staticContent>
<rewrite>
<rules>
<rule name="Angular" stopProcessing="true">
<match url=".*" />
<conditions logicalGrouping="MatchAll">
<add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
<add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
</conditions>
<action type="Rewrite" url="/" />
</rule>
</rules>
</rewrite>
</system.webServer>
</configuration>

Нам также нужно будет проинструктировать Angular CLI включить файл web.config как часть ресурсов, которые будут включены при сборке нашего приложения. Мы можем добиться этого, добавив его в массив assets в файле angular.json нашего проекта:

"assets": [
   "src/favicon.ico",
   "src/assets",
   "src/web.config"
]

Следующим шагом является создание веб-приложения Azure, в котором будет размещено наше приложение Angular. Вы можете подписаться на бесплатную или платную учетную запись и войти в портал Azure.

  1. Новинка - ›Интернет и мобильные устройства -› Интернет-приложение

  1. Заполните обязательные поля:

  1. После нажатия кнопки «Создать» у вас должно быть создано веб-приложение Azure.

На следующих шагах мы настроим наш конвейер Azure DevOps CI / CD для передачи приложения Angular во вновь созданное веб-приложение Azure. Начните с создания нового определения сборки в Azure DevOps:

  1. Сборка и выпуск - ›Сборки -› Новое
  2. Добавьте задачу npm для установки пакетов npm, необходимых для приложения Angular

3. Добавьте еще одну задачу npm для создания приложения и создания ресурсов для публикации на веб-сервере:

4. Добавьте задачу публикации артефактов, которая генерирует артефакты, которые будут предоставлены позже в качестве входных данных для нашего определения выпуска:

Настройка конвейера компакт-дисков с помощью Azure DevOps

Последний шаг - добавить конвейер компакт-дисков, который будет развертывать артефакты, созданные сборкой, в веб-приложении Azure. В этой демонстрации я упрощаю конвейер выпуска, развертывая артефакты непосредственно в производственной среде. В реальном приложении вы, вероятно, создадите несколько сред перед выпуском в производство (разработка, контроль качества, этапы и т. Д.):

Производственная среда включает одну задачу, которая развертывает приложение Angular в веб-приложении Azure:

Вот и все! Теперь у вас есть полнофункциональный конвейер CI / CD, который развернет ваше приложение Angular в веб-приложении Azure при следующей регистрации кода.