Пока я делал работу, чтобы Устроить мое приложение для поиска Blazor На моем веб -сайте я понял, что мне нужно обновить конвейер развертывания, который я использую для своего блога. Используемый процесс был очень похож на один используется для веб -сайта DDD Sydney , но настраивался для использования с Хьюго. Поскольку он был настроен некоторое время назад, я использовал дизайнер пользовательского интерфейса в Azure Tipelines , не Ямл подход Так что это казалось прекрасной возможностью для капитального ремонта.
Но если я собираюсь пойти на капитальный ремонт и порт в Ямл, я решил, что пришло время узнать что -то, что было в моем отставании, Действия GitHub , в конце концов, я широко использовал Azure Tipвей, так почему бы не узнать что -то новое и сравнить/сопоставить два продукта?
Движущиеся части
С помощью моего веб -сайта есть три часа, которые мне нужно обрабатывать, создавая статический веб -сайт с использованием Hugo, создавая приложение Blazor Webassembly и развертывание на статических веб -сайтах Azure при обновлении Azure CDN. Я постараюсь разбить эту статью на эти три части, чтобы, если один из них не имеет отношения к вам, будет легко сосредоточиться на частях, которые вам нужны больше всего.
Мое первое действие
Если вы еще не работали с действиями GitHub, они появляются под новой вкладкой в вашем репозитории под названием Действия Анкет Благодаря действиям GitHub вы создаете рабочий процесс, который будет работать на нескольких различных запускаемых событиях в GitHub, создаваемых вопросах, поднятых PR, Commits подтолкнули и многие другие Анкет Есть руководство, по которому вы можете следовать в пользовательском интерфейсе GitHub, чтобы начать работу, но если вы хотите начать в редакторе, первое, что вам нужно сделать, это создать новую папку в вашем репо, .github/Workflows и добавьте к нему файл yaml. Этот файл можно назвать что угодно, если у него есть .yml или .yaml Расширение, моя названа непрерывная интеграция. Myml Анкет
Отсюда мы можем определить метаданные о нашем рабочем процессе:
name: Build and Deploy Website
Переменные среды:
env:
OUTPUT_PATH: ${{ github.workspace }}/.output
И Что запускает рабочий процесс:
on:
push:
branches:
- master
Это дает нам начало так:
name: Build and Deploy Website
env:
OUTPUT_PATH: ${{ github.workspace }}/.output
on:
push:
branches:
- master
В котором мы можем затем создать Работа , которые являются вещи Наш рабочий процесс делает.
jobs:
job_name:
runs-on:
steps:
Забегает похож на бассейн В Azure Tipelines и используется для указания платформы, на которой будет работать рабочий процесс (Linux, MacOS или Windows). После этого мы определяем несколько шаги Для того, что делает наша работа, указав действия для использования с рынка или команд для запуска.
Шаги часто имеют использует Директива, которая указывает действие, чтобы запустить шаг «задачи» под. Это либо получит что -то на рынке действий, либо пользовательское действие в вашем GIT Repo.
Мой коллега Тирни Кирен имеет Фантастическое вступительное гид Что вы должны проверить, чтобы понять строительные блоки (я сам использовал их в качестве ссылки при создании этого рабочего процесса!).
А с обработкой грунтовки. Давайте начнем создавать задания для каждой части, которую нам нужно справиться.
Краткое изложение терминологии
Просто суммируйте некоторые из новых терминов, с которыми мы были представлены:
- Действия GitHub — продукт, который мы используем из GitHub
- Действия — вещи, которые мы можем получить с рынка (или построить себя), которые определяют, что мы можем сделать
- Рабочий процесс — серия переменных среды, рабочих мест и шагов, предпринятых, когда происходит событие
- Работа — Что делает наш рабочий процесс
- Шаги — задача, выполняемая заданием с использованием действия
Создание статического веб -сайта
Мой блог использует Хьюго Простой статический генератор веб -сайтов, написанный в Голанге, который состоит из одного двоичного файла. Весь контент, который мне нужен для моего блога, находится в моем GitHub Repo И я даже держу там бинар Хьюго, так что легко клонировать и управлять. Так что это действительно просто, но давайте посмотрим, как это сделать с помощью действий GitHub.
Начнем с определения работы для этого рабочего процесса:
jobs:
build_hugo:
runs-on: ubuntu-latest
Имя работы build_hugo , Мне нравится называть вещи с префиксом для их роли ( build или развернуть ) и роль, которую он выполняет, но соглашение об именах зависит от вас, просто убедитесь, что это имеет смысл, когда вы смотрите на это через 2 месяца!
Я указал, что мы собираемся использовать Ubuntu-Latest Изображение как нашу базу, потому что Хьюго может работать на Linux, и это простое изображение для использования.
Эта работа — это задача «непрерывная интеграция», что означает, что она нуждается в доступе к «материалам» в нашем репозитории GIT, поэтому первый шаг, который мы захотим выполнить, — это GIT Checkout , и для этого мы можем использовать Действия/проверка@v1 Действие (Примечание: я прикрепляю версию к v1 ):
build_hugo:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v1
Это действие не требует ничего, кроме как использоваться для того, чтобы оформление заказа произошла в Мастер , но если вы используете его с PR, вы можете настроить его. Для этого проверки Действие документации Анкет
Строительство Хьюго в действии
Учитывая, что у меня есть бинар Hugo в репо, я мог бы просто запустить это в качестве сценария оболочки, но я решил посмотреть, смогу ли я сделать это «больше действий», и я был указан на Mizeiris/actions-hugo Анкет Это предварительно созданное действие, предназначенное для работы с Хьюго.
Вывод информации с шага
Когда мы используем действие Hugo, нам нужно дать ему версию Hugo, которую мы хотим использовать (что оно загрузит для нас), и я подумал, что, поскольку у меня есть бинар Hugo, почему бы не спросить, какая это версия? Давайте добавим еще один шаг к нашей работе, который запускает скрипт на оболочке по умолчанию:
build_hugo:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v1
- name: Get Hugo Version
id: hugo-version
run: |
HUGO_VERSION=$(./hugo version | sed -r 's/^.*v([0-9]*\.[0-9]*\.[0-9]*).*/\1/')
echo "::set-output name=HUGO_VERSION::${HUGO_VERSION}"
Это управляет ./hugo Версия команда дать мне довольно многословную строку, которая передается уродливой sed Regex для создания переменной среды, доступной на этом этапе. Но Поскольку нам понадобится на другом шаге, мы должны превратить его в шаг, и мы делаем это с этой линией:
echo "::set-output name=HUGO_VERSION::${HUGO_VERSION}"
Если вы использовали Azure Tipelines, это похоже на ## vso [task.setVariable] Некоторая стоимость Странность, которую вы, возможно, использовали.
Другая информация, которая вам нужна на шаге, — это id , как это то, как вы можете ссылаться на это с других шагов.
Генерирование вывода Hugo
С версией Hugo в руках мы можем теперь генерировать вывод HTML:
- name: Setup Hugo
uses: peaceiris/actions-hugo@v2.3.0
with:
hugo-version: "${{ steps.hugo-version.outputs.HUGO_VERSION }}"
- name: Build
run: hugo --minify --source ./src --destination ${{ env.OUTPUT_PATH }}
Настройка Хьюго Шаг использует наше действие на рынке ( mizeiris/actions-hugo@v2.3.0 ) и устанавливает версию, оглядываясь назад на предыдущий шаг. Затем мы запускаем шаг сборки, используя лейка двоичный из действия для генерации выходных файлов. Поскольку содержание моего сайта не в основе репо, он находится в SRC Папка, я указываю -Проблема Плаг и переопределите вывод по умолчанию, чтобы использовать переменную среды, созданную в самом верхней части рабочего процесса.
Создание артефакта
Работа состоит из многих шагов, которые выполняются последовательно, поэтому вы можете выполнить сборку и выпустить все с одной работы, но я предпочитаю разделить их на четко определенные задания, что прояснит этапы моего рабочего процесса. Поскольку каждая работа работает на новой виртуальной машине, нам нужен какой -то способ получить артефакты, которые создаются для использования в будущих работах. Для этого мы будем использовать Действия/upload-artifact@v1 Действие:
- name: Publish website output
uses: actions/upload-artifact@v1
with:
name: website
path: ${{ env.OUTPUT_PATH }}
- name: Publish blog json
uses: actions/upload-artifact@v1
with:
name: json
path: ${{ env.OUTPUT_PATH }}/index.json
Опять же, используя аналогию с Azure Tipvelines, это похоже на Publishpipelineartifact Задача, где мы указываем название артефакта и местоположение на диске. Артефакты упакованы как молния для вас, будь то один файл или каталог, поэтому вам не нужно делать какое -либо архивирование, если вы не хотите чего -то особенного, но тогда вы все равно получите его.
Вы также можете заметить, что я публикую файл JSON, это версия моего блога JSON, которая будет использоваться для создания моего индекса поиска.
Но, что касается нашего статического веб -сайта, мы можем развернуть его в Azure. Вы найдете этот полный трубопровод Работа Здесь, на моем GitHub
Создание нашего поискового приложения
Другая часть приложения, которое мы должны создать, — это приложение поиска и индекс поиска, который является Blazor Webassembly Приложение и приложение консоли.
Для этого я буду использовать две отдельные задания, одну для создания пользовательского интерфейса и одной для создания индекса.
Построение блазора
Как это работа «непрерывная интеграция», например, build_hugo , так что это начнется с GIT Checkout , используя Действия/проверка@v1 Действие:
build_search_ui:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v1
Построить с .net Есть удобный Действия/Setup-Dotnet Действие, которое мы можем захватить, и это должно знать, какую версию .NET скачать в виртуальную машину вашей работы. Я собираюсь добавить новую переменную среды в верхнюю часть нашего файла (поскольку мы будем использовать ту же версию в build_search_index Работа в ближайшее время):
DOTNET_VERSION: "3.1.100-preview3-014645"
Тогда это выглядит довольно похоже на Azure Tipelines:
build_search_ui:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v1
- uses: actions/setup-dotnet@v1
with:
dotnet-version: ${{ env.DOTNET_VERSION }}
- name: Build search app
run: dotnet build --configuration Release
working-directory: ./Search
- name: Publish search UI
run: dotnet publish --no-build --configuration Release --output ${{ env.OUTPUT_PATH }}
working-directory: ./Search/Search.Site.UI
У нас есть шаги для настройки версии .net, запустить Dotnet Build и, наконец, Dotnet Publish (пользовательского интерфейса) И тогда мы можем упаковать выходы (о которых мы узнаем ранее ):
- name: Package search UI
uses: actions/upload-artifact@v1
with:
name: search
path: ${{ env.OUTPUT_PATH }}/Search.Site.UI/dist/_framework
Blazor Dod ( github link ), на наш индекс поиска.
Создание индекса поиска
Эта работа будет зависеть от артефакта, который происходит от build_hugo Поэтому нам нужно сказать, что действия GitHub ждали этого, чтобы завершить. Если мы этого не сделаем, наш рабочий процесс будет выполнять все наши работы параллельно, для этого мы добавим список зависимостей:
build_search_index:
runs-on: ubuntu-latest
needs: build_hugo
steps:
- uses: actions/checkout@v1
- uses: actions/setup-dotnet@v1
with:
dotnet-version: ${{ env.DOTNET_VERSION }}
Мы будем использовать то же самое Действия/Оформление и Действия/Setup-Dotnet Здесь, поскольку мы в конечном итоге собираемся использовать Dotnet Run , но нам нужно будет получить файл JSON для создания индекса. Для этого мы можем использовать Действия/загрузка-артифакт Анкет
build_search_index:
runs-on: ubuntu-latest
needs: build_hugo
steps:
- uses: actions/checkout@v1
- uses: actions/setup-dotnet@v1
with:
dotnet-version: ${{ env.DOTNET_VERSION }}
- name: Download index source
uses: actions/download-artifact@v1
with:
name: json
path: ${{ env.OUTPUT_PATH }}
Что круто Действия/загрузка-артифакт Это то, что это также распаковывает за Zip для вас, так что формат архивирования не то, что вам нужно, чтобы беспокоиться о себе!
Теперь мы можем построить индекс и опубликовать его как артефакт:
build_search_index:
runs-on: ubuntu-latest
needs: build_hugo
steps:
- uses: actions/checkout@v1
- uses: actions/setup-dotnet@v1
with:
dotnet-version: ${{ env.DOTNET_VERSION }}
- name: Download index source
uses: actions/download-artifact@v1
with:
name: json
path: ${{ env.OUTPUT_PATH }}
- name: Build search index
run: dotnet run
working-directory: ./Search/Search.IndexBuilder
- name: Publish search index
uses: actions/upload-artifact@v1
with:
name: search-index
path: ./Search/Search.IndexBuilder/index.zip
Вы заметите, что я загружаю zip в качестве артефакта, поэтому он будет «двойным архивированием», но это потому, что архив — это то, что приложение пользовательского интерфейса будет загружать с моего сайта, так что это не проблема.
И с этим последнее из заданий по сборке завершено ( github link ).
Развертывание на статических веб -сайтах Azure
Для моего сайта я использую Статические веб -сайты Azure Как дешевый хост. Оказывается, что для этого уже есть действие GitHub, SEEDOOR/Azure-Static-Website-Deploy Что делает вещи очень легко развертываться.
Это предварительное действие будет развернуть ваши файлы в $ web Контейнер в вашей учетной записи хранилища, согласно стандартному подходу со статическими веб -сайтами, но я не использую $ web Контейнер напрямую, вместо этого у меня есть мой сайт в подкаталоге, в котором используется номер сборки Azure Tipvelines. Это позволяет мне откатить версии, если это необходимо, или когда я сломаю вещи, различаю изменения. Итак, вместо этого действия Я собираюсь использовать Azure CLI, чтобы сделать развертывание.
Давайте начнем создавать работу:
deploy_website:
runs-on: ubuntu-latest
needs: [build_search_ui, build_search_index]
env:
STORAGE_NAME: aaronpowellstaticwebsite
CDN_NAME: aaronpowell
CDN_PROFILE_NAME: aaronpowell
RG_NAME: personal-website
Это работа «непрерывная доставка», поэтому я префикс его с помощью развернуть , он также имеет зависимости от завершения строить_ Работа, которые определены в потребности свойство. Я решил не ставить build_hugo в потребности , поскольку это обеспечивается необходимостью завершить build_search_index , Но я мог бы изменить это в будущем, так что это немного менее непрозрачно, какова зависимые рабочие места.
Я также создал некоторые переменные среды, необходимые в Azure, в основном потому, что мне не нравятся встроенные магические строки. Они создаются на этой работе, а не на вершине рабочего процесса, поскольку они используются только в этой работе.
Теперь это на ступеньках.
Работа с Azure в действиях
Microsoft предоставила Некоторые действия что вы можете использовать. На момент написания работы нет ни одного для работы с хранением или CDN, мы должны сделать это через CLI, но прежде чем мы сможем сделать это, нам нужно войти в Azure, используя Azure/Login :
steps:
- uses: azure/login@v1
with:
creds: ${{ secrets.AZURE_CREDENTIALS }}
Чтобы использовать это, вам нужно создать принципал сервиса Azure, а затем хранить его как Секретная переменная Для вашего рабочего процесса (нет, не вписывайте свои учетные данные Azure, это просто плохо).
Далее нам нужно скачать несколько артефактов, используя Действия/загрузка-артифакт :
steps:
- uses: azure/login@v1
with:
creds: ${{ secrets.AZURE_CREDENTIALS }}
- name: Download website
uses: actions/download-artifact@v1
with:
name: website
path: ${{ env.OUTPUT_PATH }}
- name: Download search UI
uses: actions/download-artifact@v1
with:
name: search
path: ${{ env.OUTPUT_PATH }}/_framework
- name: Download search index
uses: actions/download-artifact@v1
with:
name: search-index
path: ${{ env.OUTPUT_PATH }}
Я подлый и загружаю их все в одну и ту же папку, и, поскольку нет никаких столкновений с именем файла, виртуальной машины моей работы будет иметь структуру веб -сайта, как я хочу!
Пришло время загрузить файлы в хранилище:
- name: Deploy to Azure Storage
run: az storage blob upload-batch --source ${{ env.OUTPUT_PATH }} --destination \$web/${GITHUB_SHA} --account-name ${STORAGE_NAME}
Я использую Перегрузка Команда на CLI, чтобы выполнить объемную загрузку, которая быстрее, чем проходить через каждый файл индивидуально. При публикации с использованием Azure Tipelines папка в $ web Контейнер был номером сборки, но с действиями GitHub нет номера сборки, есть только SHA коммита, который вызвал действие, к которому мы можем получить доступ, используя $ {Github_sha} Анкет Это означает, что я не могу последовательно найти, что является последним развертыванием, просматривая учетную запись хранения, но более очевидно, что привержено, что связано с тем, что развертывание!
Исправление наше приложение WASM
Когда вы загружаете файлы в хранилище Azure, он попытается выработать тип файла MIME и установить его надлежащим образом. Большую часть времени это работает, за исключением случаев, когда это не так, и Webassembly, кажется, является одним из тех краевых случаев в данный момент, .wasm Файлы дают тип MIME Приложение/Октет-поток Но это должно быть Приложение/WASM , в противном случае браузер отклонит файл.
Но это легко исправить с помощью Azure CLI!
- name: Update wasm pieces
run: az storage blob update --container-name \$web/${GITHUB_SHA}/_framework/wasm --name "mono.wasm" --content-type "application/wasm" --account-name ${STORAGE_NAME}
Мы можем запустить Blob Update и изменить контент-тип Хранится, так что это обслуживается правильно.
Обновление Azure CDN
Последние обновления веб -сайта загружаются, файлы имеют правильные типы, поэтому осталось одну вещь, сообщите Azure CDN, чтобы начать использовать новые обновления.
Опять же, нет существующего действия (на момент написания), поэтому нам придется использовать CLI. Первым шагом является обновление конечной точки CDN, чтобы использовать новую папку:
- name: Update CDN endpoint
run: az cdn endpoint update --name ${CDN_NAME} --origin-path /${GITHUB_SHA} --profile-name ${CDN_PROFILE_NAME} --resource-group ${RG_NAME}
И тогда мы очистим кэш CDN, чтобы новые файлы отправлялись нашим читателям:
- name: Purge CDN
run: az cdn endpoint purge --profile-name ${CDN_PROFILE_NAME} --name ${CDN_NAME} --resource-group ${RG_NAME} --content-paths "/*"
Здесь мы делаем жесткий удар и просто удаляем все из кеша, но если бы вы использовали его в других сценариях (или имел некоторый интеллект вокруг того, какие файлы были изменения), вы могли бы установить разные Палаты контента И чистка будет быстрее.
Но вот как мы можем развернуть статический веб -сайт и обновить CDN с действий GitHub ( github Link ).
Вывод
В этом посте мы видели кучу разных вещей с действиями GitHub. Мы видели, как использовать некоторые действия, предоставленные командой действий, чтобы проверить наш исходный код и работать с артефактами. Затем мы использовали некоторые сторонние действия для работы с Hugo и Azure.
Мы увидели, как определить переменные, которые доступны во всем рабочем процессе, поставив их на вершину рабочего процесса, определили некоторые для конкретных заданий (например, наша информация о лазуре), выводя их с одного шага на другую на работе или даже имеют учетные данные имеется в наличии.
Вы можете увидеть полный файл рабочего процесса yaml На моем GitHub и проверьте прошлые пробеги например, из недавнего сообщения в блоге Анкет
Оригинал: «https://dev.to/azure/implementing-github-actions-for-an-azure-static-website-488h»