Упражнение. Публикация 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 ветви" не вышестоящая ветвь. Хотите опубликовать эту ветвь? Нажмите кнопку "ОК"

Создать запрос на вытягивание

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

  1. Откройте браузер.

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

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

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

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

  5. Выберите ветвь main в раскрывающемся списке base.

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

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

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

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

Посмотрите, как выполняется сборка и публикация действия GitHub.

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

  1. Выберите меню "Действия"
  2. В меню "Рабочие процессы" выберите элемент рабочего процесса Статические веб-приложения Azure CI/CDScreenshot showing how to find the correct workflow.
  3. Выберите верхнюю ссылку в списке запусков действий.
  4. Нажмите ссылку Создать и развернуть задание.

Screenshot showing the build and deploy button on the workflow page.

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

Откройте URL-адрес предварительного просмотра.

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

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

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

Screenshot showing your angular web app.

Screenshot showing your react web app.

Screenshot showing your svelte web app.

Screenshot showing your vue web app.

Следующие шаги

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