На данный момент не секрет, что 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.
- Новинка - ›Интернет и мобильные устройства -› Интернет-приложение
- Заполните обязательные поля:
- После нажатия кнопки «Создать» у вас должно быть создано веб-приложение Azure.
На следующих шагах мы настроим наш конвейер Azure DevOps CI / CD для передачи приложения Angular во вновь созданное веб-приложение Azure. Начните с создания нового определения сборки в Azure DevOps:
- Сборка и выпуск - ›Сборки -› Новое
- Добавьте задачу npm для установки пакетов npm, необходимых для приложения Angular
3. Добавьте еще одну задачу npm для создания приложения и создания ресурсов для публикации на веб-сервере:
4. Добавьте задачу публикации артефактов, которая генерирует артефакты, которые будут предоставлены позже в качестве входных данных для нашего определения выпуска:
Настройка конвейера компакт-дисков с помощью Azure DevOps
Последний шаг - добавить конвейер компакт-дисков, который будет развертывать артефакты, созданные сборкой, в веб-приложении Azure. В этой демонстрации я упрощаю конвейер выпуска, развертывая артефакты непосредственно в производственной среде. В реальном приложении вы, вероятно, создадите несколько сред перед выпуском в производство (разработка, контроль качества, этапы и т. Д.):
Производственная среда включает одну задачу, которая развертывает приложение Angular в веб-приложении Azure:
Вот и все! Теперь у вас есть полнофункциональный конвейер CI / CD, который развернет ваше приложение Angular в веб-приложении Azure при следующей регистрации кода.