Упражнение. Публикация API с помощью GitHub Actions

  • 4 мин

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

Отправка изменений в GitHub

Вы внесли изменения в API в предыдущем упражнении. Зафиксируйте эти изменения в ветви API и отправьте их в GitHub, выполнив следующие действия:

  1. В Visual Studio Code откройте палитру команд, нажав клавишу F1
  2. Введите и выберите Git: Зафиксировать все. Если Visual Studio Code предложит автоматически выполнить все изменения и зафиксировать их напрямую, нажмите кнопку "Да".
  3. Напишите сообщение для коммита, например изменения API
  4. Откройте палитру команд, нажав клавишу F1
  5. Введите и выберите Git: Push
  6. Если появится запрос с сообщением "Api" ветви нет вышестоящей ветви. Хотите опубликовать эту ветвь? Нажмите кнопку "ОК "

Создать pull-запрос

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

  1. Открытие браузера

  2. Перейдите в репозиторий

    https://github.com/<YOUR_GITHUB_USERNAME>/my-static-web-app-and-api

  3. Выберите ссылку "Запросы на вытягивание"

  4. Нажмите кнопку "Создать pull request"

  5. Выберите главную ветвь из раскрывающегося списка

  6. Выберите ветвь API из раскрывающегося списка сравнения

  7. Нажмите кнопку "Создать запрос на вытягивание"

  8. Снова нажмите вторую кнопку "Создать запрос на вытягивание "

Теперь активируется действие GitHub.

Наблюдайте за сборкой и публикацией GitHub Action

Вы можете остаться на странице репозитория в вашем браузере и наблюдать за ходом выполнения GitHub Action. Просмотрите ход выполнения, выполнив следующие действия:

  1. Выберите меню действий
  2. В меню "Рабочие процессы" выберите элемент рабочего процесса CI/CD статических веб-приложений Azure , показывающий, как найти правильный рабочий процесс.
  3. Выберите верхнюю ссылку в списке выполненных действий.
  4. Выберите ссылку задание на сборку и развертывание.

Снимок экрана: кнопка сборки и развертывания на странице рабочего процесса.

Вы можете увидеть ход выполнения действия GitHub по мере его сборки и публикации веб-приложения и API.

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

После успешного завершения действия GitHub можно просмотреть работающее приложение в браузере.

  1. Выберите меню "Запросы на вытягивание"
  2. Выберите запрос на слияние
  3. Выберите ссылку, следующую за сообщением Azure Static Web Apps: ваш тестовый сайт готов! Посетите его здесь

Обратите внимание, что URL-адрес предварительной версии содержит дефис, за которым следует число. Номер соответствует номеру запроса на вытягивание, который вы создали. Для каждого pull request вы получаете уникальный и постоянный URL-адрес предварительного просмотра. Регион также используется для формирования URL-адреса предварительного просмотра.

Скриншот, показывающий ваше веб-приложение на Angular.

Снимок экрана: веб-приложение React.

Снимок экрана: веб-приложение svelte.

Снимок экрана: веб-приложение vue.

Дальнейшие действия

Поздравляем, вы создали свой первый экземпляр Azure Static Web Apps с веб-приложением и API!