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

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

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

Примечание.

Задача конвейера Статические веб-приложения в настоящее время работает только на компьютерах Linux.

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

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

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

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

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

  1. Войдите в Bitbucket.

  2. Перейдите к https://bitbucket.org/repo/import началу процесса импорта.

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

  4. Рядом с меткой Project нажмите кнопку "Создать проект".

  5. Введите MyStaticWebApp.

  6. Выберите "Импортировать репозиторий " и подождите, пока веб-сайт создает репозиторий.

Установка основной ветви

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

  1. Выберите параметры репозитория.
  2. Разверните раздел Дополнительно.
  3. В раскрывающемся списке убедитесь, что в раскрывающемся списке выбрана метка main branch.
  4. Если вы внесли изменения, нажмите кнопку "Сохранить изменения".
  5. Выберите Назад.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  2. Выберите элемент меню "Источник".

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

  4. Выберите конвейеры.

  5. Выберите текстовую ссылку "Создать первый конвейер".

  6. На карточке конвейера starter нажмите кнопку "Выбрать".

  7. Введите следующий YAML в файл конфигурации.

    pipelines:
  branches:
   main:
    - step: 
        name: Deploy to test
        deployment: test
        script:
          - chown -R 165536:165536 $BITBUCKET_CLONE_DIR
          - pipe: microsoft/azure-static-web-apps-deploy:main
            variables:
                APP_LOCATION: '$BITBUCKET_CLONE_DIR/src'
                OUTPUT_LOCATION: '$BITBUCKET_CLONE_DIR/src'
                API_TOKEN: $deployment_token

    Примечание.

    В этом примере для параметра задано microsoft/azure-static-web-apps-deploy:mainзначение pipe . Замените main нужным именем ветви, если вы хотите, чтобы конвейер работал с другой ветвью.

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

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

    Свойство Description Пример Обязательное поле
    app_location Расположение кода приложения. Введите / , находится ли исходный код приложения в корне репозитория или /app код приложения находится в каталоге с именем app. Да
    api_location Расположение кода Функций Azure. Введите /api , находится ли код API в папке с именем api. Если в папке не обнаружено ни одного приложения Функций Azure, в процессе сборки сбой не произойдет, и в рабочем процессе предполагается, что API не нужен. No
    output_location Расположение выходного каталога сборки относительно app_location. Если исходный код приложения находится в /app, а скрипт сборки выводит файлы в папку /app/build, установите build в качестве значения output_location. No

Затем определите значение переменной API_TOKEN .

  1. Выберите " Добавить переменные".
  2. В поле "Имя" введите deployment_token, которая соответствует имени в рабочем процессе.
  3. В поле "Значение" вставьте значение маркера развертывания, которое вы задали на предыдущем шаге.
  4. Установите флажок "Защищенный".
  5. Выберите Добавить.
  6. Выберите "Зафиксировать файл " и вернитесь на вкладку конвейеров.

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

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

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

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

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

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

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

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

  1. Выберите группу ресурсов static-web-apps-bitbucket в разделе "Обзор ".
  2. Выберите "Удалить группу ресурсов" в верхней части обзора группы ресурсов.
  3. Введите имя группы ресурсов static-web-apps-bitbucket в диалоговом окне подтверждения "static-web-apps-bitbucket"?
  4. Выберите команду Удалить.

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

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

Добавление API