Несколько недель назад на ng-conf я объявил о запуске vscodecandothat.com — проекте, над которым я работала вместе с Сарой Драснер, чтобы сосредоточить все мои любимые советы по VS Code в коллекцию коротких, беззвучных видеоклипов. Это сродни сайту, полному GIF-файлов, за исключением без 600-мегабайтной полезной нагрузки и аварийной вкладки браузера.

Сара разработала и построила сайт с помощью Vue. Я собрал видеоклипы с чрезмерными упоминаниями о мопсах.

Мы с Сарой работаем в команде Azure, поэтому это был хороший шанс для нас использовать собственные инструменты здесь, в Microsoft, для работы с реальным приложением. В этой статье я расскажу, как мы осуществляем непрерывную доставку с помощью vscodecandothat.com, и как вы можете сделать это самостоятельно, используя те же инструменты, которые мы используем.

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

Непрерывное то или иное

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

Для наших целей «Непрерывная доставка» означает, что процесс создания и развертывания сайта полностью автоматизирован. Вот как это выглядит в реальной жизни:

• Разработчик проверяет код в главной ветке Github
• Сервер сборки извлекает код из Github
• Сервер сборки запускает сборку (скрипт npm)
• Сервер сборки создает контейнер Docker
• Сервер сборки перемещает контейнер Docker в реестр
• Берк находит источник запаха брокколи в своем офисе
• Веб-сайт загружает обновленный контейнер

Все это понял? По сути мы собираемся автоматизировать все, что вы обычно делаете как разработчик, так что проверка кода на Github – это все, о чем вам придется беспокоиться. И Господь знает, что это очень трудно.

Впервые за свои 4 года программирования и использования git я правильно сделал git rebase —interactive без необходимости стирать, хранить или принудительно разрушать вещи. #Жизненные цели

— Шон Ларкин (廖秒恩) (@TheLarkInn) 29 апреля 2018 г.

Ладно, начнем сначала. Первое, что нам нужно сделать это посмотреть на программу, чтобы увидеть, как она работает. И как это работает, так это «В Docker, вы все».

Запуск Vue на Docker

vscodecandothat.com полностью управляется интерфейсом. Это все HTML, JavaScript и CSS в браузере. В этом случае все, что мы хотим сделать, это обслуживать index.html страница из dist папку. Мы используем веб-сервер nginx.

Когда вы просто обслуживаете статические активы, Dockerfile очень прост…

FROM nginx
WORKDIR /app
# Copy in the static build assets
COPY dist/ /app/
# Copy in the nginx config file
COPY misc/nginx.conf /etc/nginx/nginx.conf
# All files are in, start the web server
CMD ["nginx"]

Сара создала файл конфигурации nginx, который мы просто копируем при создании контейнера. Поскольку вы не хотите заниматься настройкой nginx (OMG, вы этого не хотите), Сара опубликовала свой конфигурационный файл в сущности.

nginx — это черный ящик отчаяния

— Дэйв Геддес (@geddski) 28 августа 2014 г.

Я использую расширение Docker для VS Code, чтобы видеть все свои изображения и контейнеры и управлять ими. Я не боюсь терминала, но мой мозг помнит только столько флагов.

Теперь нам нужен реестр, к которому можно подтолкнуть контейнер. Для этого мы собираемся настроить контейнерные службы Azure (ACR).

Вы можете создать ACR репозиторий из веб-портала, но чтобы доказать, что я не боюсь терминала, мы сделаем это с помощью Azure CLI.

Во-первых, нам нужна группа ресурсов. Я назвал свой vsCodeCanDoThat.

az group create — name vsCodeCanDoThat — location eastus

Теперь создайте репозиторий ACR. Я назвал свой «hollandcr».

az acr create --resource-group vsCodeCanDoThat --name hollandcr --sku Basic

Теперь мы можем переместить наше изображение к нему, обозначив его путем реестра контейнеров Azure.

hollandcr.azurecr.io/vscodecandothat:latest

В видео вы можете посмотреть, как я вошел в реестр контейнеров Azure из терминала. Это важно, поскольку ваш push не удастся, если вы не войдете в систему.

Хорошо теперь нам нужен сайт для размещения нашего контейнера. Для этого мы используем службу приложений Azure.

Создание службы приложений

Сначала создайте план обслуживания Linux. Для этого вам понадобится имя программы и группа ресурсов.

Поэтому

az appservice plan create -n appName -g resourceGroupName --is-linux -l "South Central US" --sku S1 --number-of-workers 1

Становится

az appservice plan create -n vsCodeCanDoThatSP -g vsCodeCanDoThat --is-linux -l "South Central US" --sku S1 --number-of-workers 1

Теперь создайте веб-приложение и наведите его на контейнер, который был перемещен в реестр AKS. Для этого требуется 4 параметра.

• План обслуживания
• Группа ресурсов
• Название программы (вы еще не определили это)
• Образ Docker, который вы нажали раньше

az webapp create -n vsCodeCanDoThatSP -g vsCodeCanDoThatRG -p vscodecandothat -i hollandcr.azurecr.io/vscodecandothat:latest

И все это. Вы получите URL-адрес, и вы сможете открыть его и увидеть, как работает ваш сайт.

Теперь мы хотим автоматизировать все, что мы только что сделали. Мы никогда не хотим снова проходить любой из этих шагов.

Первое, что мы сделаем, это настроим наш сайт для непрерывного развертывания из нашего реестра контейнеров.

Если вы используете расширение App Service для VS Code, все ваши сайты Azure будут отображаться прямо в редакторе. Вы можете просто щелкнуть правой кнопкой мыши и сказать «Открыть на портале».

Выберите пункт меню «Docker Container»…

На этой странице вы увидите контейнер, который вы настроили из терминала. Внизу есть опция, чтобы включить непрерывное развертывание.

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

Поэтому кое-что из этого мы уже автоматизировали. Как только мы нажмем изображение, оно будет развернуто. Нам ничего не нужно делать, кроме толкать. Но мы не хотим давить на это. Мы хотим, чтобы кто-то другой.

А кто это будет делать? Работы вот кто. Или кого? ИЛИ КОГО. К счастью, я больше не учу английскую среднюю школу. Однажды мне это удалось и этого было достаточно.

Настройка сервера сборки

Это момент, когда я говорю вам, что мы собираемся использовать Visual Studio Team Services (VSTS). Тогда вы скажете: Visual Studio? Я не использую .NET”. И я говорю: «Я знаю, это запутано».

Нам нужна система, специально разработанная для автоматизации сборки и развертывания. Это именно то, чем есть / делает VSTS. Кроме того, это бесплатно для 5 пользователей или меньше (в пространстве проекта), и «бесплатно» – это единственное слово в моем языке любви. Единственное слово, кроме «пиво».

Создайте учетную запись VSTS, если у вас ее нет. После этого вы попадаете на экран приборной панели.

Отсюда вы хотите создать новый командный проект.

Дайте своему проекту название и описание, которые никому не помогут. Оставьте контроль версий Git.

На следующем экране вы найдете URL-адрес Git для проверки кода. Но у нас уже есть Github, поэтому просто проигнорируйте это и выберите параметр или создать код из внешнего хранилища.

Авторизуйте VSTS на Github и выберите…

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

Теперь мы начнем добавлять шаги для выполнения VSTS для создания и развертывания. Выдержка из контроля источников уже происходит, поэтому первое, что нам нужно сделать, это запустить npm install на нашем коде. Для этого добавьте задание к «фазе 1». В нашем сборнике/развертывании есть только 1 этап.

Найдите npm и добавьте задачу npm.

По умолчанию вы получаете npm install задача, а это именно то, чего мы хотим. Вам не нужно добавлять никаких параметров в эту задачу.

Дальше мы будем запускать npm run build команда, которая создаст рабочий экземпляр нашей программы Vue со всей магией Webpacking. Для этого добавьте еще одно задание npm. На этот раз измените название на npm run build. Установите для «команды» значение «пользовательский», а для «команды и аргументы» значение «выполнить сборку».

Прекрасно! Мы получили сборник, теперь мы готовы его докеризировать. Добавьте новое задание и найдите Docker.

Это большой экран, потому вот изображение, а затем мы рассмотрим основные моменты.

• Вы выбираете «Регистр контейнеров Azure»
• Укажите свою подписку на Azure
• Укажите название реестра (которое мы создали ранее)
• Установите «Имя изображения» на $(Build.Repository.Name)
• Обязательно поставьте флажок «Включить последний тэг»

Наконец мы хотим нажать изображение. Добавьте другую задачу Docker. В этот раз установите для параметра «Действие» значение «Нажать изображение». Установите «Имя изображения» на $(Build.Repository.Name) — по-прежнему.

НЕ ВЫБИРАЙТЕ ДЕЙСТВИЕ «НАЖМИТЬ ИЗОБРАЖЕНИЕ».. Если вы это сделаете, ваша конструкция терпит неудачу, и вы будете обвинять Бога и все человечество, прежде чем поймете, что выбрали неправильное действие. Не спрашивайте меня, откуда я это знаю.

И это все для определения определения Build. Теперь можно нажать «Сохранить и поставить в очередь» вверху. Убедитесь, что вы выбрали агент «Hosted Linux Preview». Для задач Docker требуется агент Linux.

Теперь сядьте и ждите, пока начнется сборник. Если вы все сделали правильно, теперь вы настроили полностью автоматизированную систему сборки и развертывания для Vue, которая использует Docker и Azure. Это наиболее модных слов, которые я когда-либо сжимал в одно предложение.

Разворачивайтесь и будьте счастливы

Кажется, что это очень трудно настроить, но как только вы получите его так, как вы хотите все, что вам нужно сделать, это проверить код в вашем репозитории Github и все это развертывание вручную? происходит автоматически. Ваши клиенты любят вас. Ваши разработчики полюбят вас. Черт, даже вы можете полюбить вас.

Надеюсь, вам это пригодится. Я собираюсь обновлять свое резюме всеми этими модными словами.