• Введение
  • Предпосылка
  • Начать новый проект
  • Первая синхронизация с Azure
  • Настройка развертывания
  • Вывод

Введение

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

На самом деле, есть как минимум два способа, как это сделать. Первый — настроить продолжение интеграции для проекта. Это хороший и мощный инструмент, но требует слишком много времени для настройки. Так что, если вам нужно что-то простое и быстрое — это не для вас. Второй способ – использовать Куду.

Предпосылка

Вам понадобится учетная запись node, npm, GitHub и какой-нибудь фронтенд-проект. В этом примере я создам новый проект Angular 5, используя @angular/cli. Кроме того, вам понадобится учетная запись Azure для размещения вашего приложения. Если у вас его нет, вы можете создать новую учетную запись и получить немного бесплатных денег только для экспериментов.

Начать новый проект

Если у вас уже есть интерфейсный проект и весь персонал, упомянутый ранее, просто пропустите этот шаг. Если нет — начнем с самого начала.

Перейдите на Github и создайте новый репозиторий. Затем клонируйте его в свою локальную рабочую область и создайте там новый файл index.html с любым содержимым, которое вы хотите. Это делается только для проверки правильности работы основного механизма синхронизации. Зафиксируйте свой index.html и отправьте его на удаленный компьютер.

Первая синхронизация с Azure

Теперь пришло время синхронизировать ваш репозиторий с Azure. Откройте Azure.Portal и создайте новое WebApp.

Не стесняйтесь выбирать любой тарифный план, который вы хотите, это не имеет значения. Когда это будет сделано, выберите свой веб-сайт и нажмите меню «Параметры развертывания».

Здесь вам нужно выбрать GitHub в качестве источника, указать свои учетные данные и выбрать удаленный репозиторий, с которым вы хотите синхронизироваться. После этого Azure клонирует ваш репозиторий, поместит все файлы в папку wwwroot и начнет обслуживать статические файлы с помощью сервера IIS. Поскольку у нас есть файл index.html в корне репозитория, он будет дан по умолчанию, и сейчас вы должны его увидеть.

Простейшая синхронизация сделана. Если вам нужно, вы можете добавить некоторые js, изображения и т. д. вручную, и все должно работать нормально. Но мы можем сделать намного лучше.

Автоматизировать настройку развертывания

Вернитесь в свой локальный репозиторий и установите @angular/cli, если у вас его нет.

npm install -g angular\cli

Затем переключитесь в локальную папку репозитория и создайте новый проект angular.

ng new app

Теперь перейдите в папку приложения и запустите новое приложение.

cd app
ng serve

Ваше приложение должно подняться и быть тестируемым на http://localhost:4200. Проверьте это и пойдем дальше.

Прямо сейчас у нас есть репозиторий, который синхронизируется с вашим веб-приложением Azure и новым проектом Angular 5. Но если вы зафиксируете это прямо сейчас, вы увидите свой первый файл index.html. Это происходит потому, что по умолчанию Azure копирует только файлы из вашего репозитория и ничего больше. Итак, нам нужно предоставить некоторую дополнительную информацию о нашем процессе развертывания. К счастью, это не сложно.

Во-первых, нам нужно добавить в корневой файл с именем .deployment следующий текст:

[config]
command = build.cmd

Это укажет Azure выполнить файл build.cmd после того, как вы зафиксируете что-то новое в репозитории. А там можно делать что хочешь. Это чистый файл командной строки, который может делать почти все, что вам нужно. Разве это не круто?

Таким образом, мы можем написать собственный сценарий развертывания или изменить существующий. Но если мы будем делать это вручную, это займет некоторое время и будет не очень эффективно. Теперь пришло время для Куду. Под капотом Azure использует его для синхронизации вашего кода и вашей папки публикации. Так что мы также можем использовать Kudu для наших нужд. Возьмите файл build.cmd из моего репозитория и давайте посмотрим на него.

По умолчанию build.cmd содержит несколько разделов.

  • Проверьте предварительные условия (узел должен быть установлен)
  • Установка переменных. Наиболее важным для нас является DEPLOYMENT_TARGET — место, куда будут помещаться артефакты сборки.
  • Шаги сборки (не определены в исходном скрипте Kudu, но уже созданы здесь)
  • Процесс развертывания
  • Раздел регистрации ошибок

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

Добавьте это после шага настройки

@echo "installing ui dependencies"
cd ./app
call npm ci
@echo "building ui"
call npm run build
@echo "returning back to root"
cd ..

Просто обычный и простой код. Никакой магии. Второй и последний шаг — изменить сценарий развертывания. Поскольку у нас нет сервера для обслуживания статики, нам нужно разместить ресурсы под wwwroot. Просто измените это:

call :ExecuteCmd "%KUDU_SYNC_CMD%" -v 50 -f "%DEPLOYMENT_SOURCE%" -t "%DEPLOYMENT_TARGET%" -n "%NEXT_MANIFEST_PATH%" -p "%PREVIOUS_MANIFEST_PATH%" -i ".git;.hg;.deployment;build.cmd;app;node_modules;"

к этому:

call :ExecuteCmd "%KUDU_SYNC_CMD%" -v 50 -f "%DEPLOYMENT_SOURCE%\dist" -t "%DEPLOYMENT_TARGET%" -n "%NEXT_MANIFEST_PATH%" -p "%PREVIOUS_MANIFEST_PATH%" -i ".git;.hg;.deployment;build.cmd;app;node_modules;"

Я знаю, что это выглядит немного запутанно, но это всего лишь вызов Куду (не связывайтесь с Ктулху) с несколькими параметрами. Это действительно не страшно. И это все.

Теперь зафиксируйте и отправьте свой код, подождите несколько минут, и ваше приложение будет создано и развернуто в Azure. Теперь вы можете настроить некоторые предварительные условия для отправки в ветку master (например, тесты, стиль кода и т. д.), и всякий раз, когда вы обновляете master — ваше приложение будет доставлено и развернуто.

Вывод

Настройка развертывания из GitHub в Azure:

  • Довольно просто
  • Не требует специальных знаний — только bash или cmd
  • Держит все под вашим контролем

Рабочий пример можно найти в моем репозитории. Надеюсь это поможет!