Публикация API с помощью GitHub Actions

Вы добавили API в веб-приложение, и они работают локально. Теперь пришло время опубликовать API и приложение в статических веб-приложениях Azure.

Когда вы создали экземпляр статических веб-приложений Azure и настроили его на отслеживание главной ветки, для вас было сгенерировано действие GitHub. Задача GitHub отслеживает изменения в ветке main вашего репозитория и, когда обнаруживает коммит или запрос на слияние в main, она собирает и публикует ваше приложение.

Вы можете вспомнить, как при создании ресурса статических веб-приложений Azure вы указали расположение папки для API. Вы указали значение apiпо умолчанию. Тем не менее, так как в то время у вас нет API в api папке, статические веб-приложения Azure не пытались опубликовать API.

Теперь все изменится.

Конфигурация GitHub Actions

Папка .github/workflows содержит файл действия GitHub. Файл содержит параметры расположения веб-приложения, API и артефактов сборки. Расположения, выбранные при создании ресурса статических веб-приложений Azure, теперь находятся в этом файле, как показано ниже.

app_location: 'angular-app' # App source code path
api_location: 'api' # Api source code path - optional
output_location: 'dist/angular-app' # Built app content directory - optional

app_location: 'react-app' # App source code path
api_location: 'api' # Api source code path - optional
output_location: 'build' # Built app content directory - optional

app_location: 'svelte-app' # App source code path
api_location: 'api' # Api source code path - optional
output_location: 'public' # Built app content directory - optional

app_location: 'vue-app' # App source code path
api_location: 'api' # Api source code path - optional
output_location: 'dist' # Built app content directory - optional

Для api_location установлено правильное значение, чтобы указывать на ваш API в папке api.

Активация действия GitHub

GitHub Actions готовы к созданию и публикации вашего веб-приложения и API после обнаружения изменений в основной ветке . Чтобы активировать GitHub Action, вы можете либо сделать коммит напрямую, либо создать пулл реквест в основную ветку. Изменения, обнаруженные на основной ветке , активируют GitHub Action для публикации приложения по тому же URL-адресу для вашего работающего веб-сайта.

URL-адреса предварительной версии

Иногда вы хотите просмотреть изменения на тестовом сайте перед публикацией на основном сайте. Статические веб-приложения Azure позволяют просматривать предварительный просмотр изменений с помощью URL-адресов предварительной версии. Вы можете создать URL-адрес предварительного просмотра, создав pull-реквест в ветку, которую отслеживает GitHub Action. Ваш динамический веб-сайт не затрагивается. Вместо этого создается новая промежуточная версия приложения. Если вернуться и проверить pull request на GitHub, вы увидите ссылку на стейджинг-версию, размещённую на вкладке «Беседа».

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

В настоящее время вы работаете в ветке API . Сделайте pull request из ветки api в главную ветку. При создании pull request на основе основной ветви , автоматическое действие в GitHub публикует приложение на предварительный URL.

После завершения создания и развертывания приложения бот GitHub добавляет комментарий в пулл-реквест, содержащий URL-адрес предварительной среды разработки. Вы можете выбрать эту ссылку, чтобы просмотреть промежуточные изменения.

Затем вы создадите pull request (пул-реквест) и посетите предварительную версию вашего приложения.