Поделиться через

Руководство. Развертывание репозиториев GitLab на Статические веб-приложения Azure

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

Из этого руководства вы узнаете, как:

  • Импорт репозитория в GitLab
  • Создание Статического веб-приложения
  • Настройка репозитория GitLab для развертывания в Статические веб-приложения Azure

Необходимые компоненты

Создание репозитория

В этой статье используется репозиторий GitHub в качестве источника для импорта кода в репозиторий GitLab.

  1. Войдите в учетную запись GitLab и перейдите на страницу https://gitlab.com/projects/new#import_project

  2. Выберите репозиторий по URL-адресу.

  3. В поле URL-адрес репозитория Git введите URL-адрес репозитория для выбранной платформы.

  4. В поле "Слизь проекта" введите my-first-static-web-app.

  5. Выберите "Создать проект" и подождите некоторое время, пока репозиторий настроен.

Создание Статического веб-приложения

Теперь, когда репозиторий создан, можно создать статическое веб-приложение на портале Azure.

  1. Переход на портал Azure.

  2. Выберите Создать ресурс.

  3. Выполните поиск по запросу Статические веб-приложения.

  4. Выберите Статические веб-приложения.

  5. Нажмите кнопку создания.

  6. В разделе "Основы" начните с настройки нового приложения.

    Параметр Значение
    Подписка Azure. Выберите свою подписку Azure.
    Группа ресурсов Выберите ссылку "Создать" и введите static-web-apps-gitlab.
    Имя. Введите my-first-static-web-app.
    Тип плана Выберите Бесплатно.
    Исходный код Выберите Другой.

  7. Выберите Review + create (Просмотреть и создать).

  8. Нажмите кнопку создания.

  9. Выберите Перейти к ресурсу.

  10. Щелкните Manage deployment token (Управление маркером развертывания).

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

  12. Нажмите кнопку "Закрыть " в окне "Управление маркером развертывания".

Создание задачи конвейера в GitLab

Теперь, когда у вас есть маркер развертывания, вы добавите задачу рабочего процесса, отвечающую за создание и развертывание сайта при внесении изменений.

Добавление маркера развертывания

При выполнении следующих действий убедитесь, что выбран * раздел сред. Оно может показаться значением allпо умолчанию, но необходимо выбрать раскрывающийся список и вручную.*

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

  2. Выберите Параметры.

  3. Выберите CI/CD.

  4. Рядом с разделом "Переменные" выберите "Развернуть".

  5. Выберите "Добавить переменную".

  6. В поле "Ключ" введите DEPLOYMENT_TOKEN.

  7. В поле "Значение" вставьте значение маркера развертывания, которое вы задали на предыдущем шаге.

  8. Выберите "Добавить переменную".

Добавить файл

  1. Вернитесь на главный экран репозитория в GitLab.

  2. Нажмите кнопку "Изменить " и выберите веб-интегрированную среду разработки.

  3. Убедитесь, что в раскрывающемся списке ветвь выбрана основная ветвь.

  4. Создайте новый файл с именем .gitlab-ci.yml в корне репозитория. (Убедитесь, что расширение файла равно .yml.)

  5. Введите следующий YAML в файл.

    variables:
  API_TOKEN: $DEPLOYMENT_TOKEN
  APP_PATH: '$CI_PROJECT_DIR/src'

deploy:
  stage: deploy
  image: registry.gitlab.com/static-web-apps/azure-static-web-apps-deploy
  script:
    - echo "App deployed successfully."

    Следующие свойства конфигурации используются в файле .gitlab-ci.yml для настройки статического веб-приложения.

    Переменная $CI_PROJECT_DIR сопоставляется с корневым расположением корневой папки репозитория во время процесса сборки.

    Свойство Description Пример Обязательное поле
    APP_PATH Расположение кода приложения. Введите $CI_PROJECT_DIR/ , находится ли исходный код приложения в корне репозитория или $CI_PROJECT_DIR/app если код приложения находится в папке с именем app. Да
    API_PATH Расположение кода Функций Azure. Введите $CI_PROJECT_DIR/api , находится ли код приложения в папке с именем api. No
    OUTPUT_PATH Расположение выходной папки сборки относительно .APP_PATH Если исходный код приложения находится в $CI_PROJECT_DIR/app, а скрипт сборки выводит файлы в папку $CI_PROJECT_DIR/app/build, установите $CI_PROJECT_DIR/app/build в качестве значения OUTPUT_PATH. No
    API_TOKEN Маркер API для развертывания. API_TOKEN: $DEPLOYMENT_TOKEN Да

  6. Зафиксируйте изменения в главной ветви и закройте веб-интегрированную среду разработки.

  7. Вернитесь на сайт и выберите пункты меню "Общие конвейеры> CI/CD>", чтобы просмотреть ход развертывания.

После завершения развертывания вы можете просмотреть веб-сайт.

Просмотр веб-сайта

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

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

В окне обзора службы "Статические веб-приложения" отображается ряд ссылок, которые помогут вам взаимодействовать с веб-приложением.

  1. Вернитесь в статическое веб-приложение в портал Azure.

  2. Перейдите в окно обзора .

  3. Выберите ссылку под меткой URL-адреса . Веб-сайт загружается на новой вкладке.

Очистка ресурсов

Если вы не собираетесь продолжать использовать это приложение, можно удалить экземпляр Статические веб-приложения Azure и все связанные службы, удалив группу ресурсов.

  1. Выберите группу ресурсов static-web-apps-gitlab в разделе "Обзор ".

  2. Выберите "Удалить группу ресурсов" в верхней части обзора группы ресурсов.

  3. Введите имя группы ресурсов static-web-apps-gitlab в диалоговом окне подтверждения "static-web-apps-gitlab"?

  4. Выберите команду Удалить.

На удаление группы ресурсов может потребоваться несколько минут.

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

Добавление API