Развертывание сайта Gatsby в Статические веб-приложения Azure

В этой статье показано, как создать и развернуть веб-приложение Gatsby в службе Статические веб-приложения Azure. Конечным результатом будет новый сайт Статических веб-приложений (со связанными действиями GitHub), позволяющий управлять процессом сборки и публикации приложения.

В этом руководстве описано следующее:

  • Создание приложения Gatsby
  • Настройка сайта Статических веб-приложений Azure
  • Развертывание приложения Gatsby в Azure

Если у вас еще нет подписки Azure, создайте бесплатную учетную запись Azure, прежде чем начинать работу.

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

Создание приложения Gatsby

Создайте приложение Gatsby с помощью интерфейса командной строки (CLI) Gatsby.

  1. Откройте окно терминала.

  2. Используйте программу npx для создания приложения с помощью интерфейса командной строки Gatsby. Это может занять несколько минут.

    npx gatsby new static-web-app
    
  3. Перейдите к только что созданному приложению

    cd static-web-app
    
  4. Инициализируйте репозиторий Git.

    git init
    git add -A
    git commit -m "initial commit"
    

Примечание.

Если вы используете последнюю версию Gatsby, может потребоваться изменить package.json, чтобы включить "engines": { "node": ">=18.0.0" },

Отправьте приложение в GitHub.

Для создания нового ресурса Статических веб-приложений Azure необходим репозиторий на сайте GitHub.

  1. Создайте пустой репозиторий GitHub (не создавая файл сведений) со страницы https://github.com/new с именем gatsby-static-web-app.

  2. Затем добавьте только что созданный репозиторий GitHub в локальный репозиторий в качестве удаленного. В следующей команде не забудьте добавить имя пользователя GitHub вместо заполнителя <YOUR_USER_NAME>.

    git remote add origin https://github.com/<YOUR_USER_NAME>/gatsby-static-web-app
    
  3. Отправьте локальный репозиторий на сайт GitHub.

    git push --set-upstream origin main
    

Развертывание веб-приложения

Ниже описано, как создать новое статическое приложение сайта и развернуть его в рабочей среде.

Создание приложения

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

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

  3. Найдите Статические веб-приложения.

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

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

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

    Свойство Значение
    Подписка Имя подписки Azure.
    Группа ресурсов my-gatsby-group
    Имя my-gatsby-app
    Тип плана Бесплатно
    Область для API Функций Azure и промежуточных сред Выберите ближайший к вам регион.
    Источник GitHub
  7. Выберите Войти по учетным данным GitHub и выполните аутентификацию с помощью GitHub.

  8. Введите следующие значения GitHub.

    Свойство Значение
    Предприятие Выберите нужную организацию GitHub.
    Репозиторий Выберите gatsby-static-web-app.
    Ветвь Выберите Main.

    Примечание.

    Если вы не видите репозитории, возможно, потребуется авторизовать Статические веб-приложения Azure на GitHub. Перейдите к репозиторию GitHub и перейдите к Параметры приложениям>, авторизованным Приложение OAuth>, выберите Статические веб-приложения Azure и выберите "Предоставить". Чтобы предоставить разрешения для репозиториев организации, необходимо быть владельцем организации.

  9. В разделе Сведения о сборке выберите Gatsby из раскрывающегося списка Варианты сборки и сохраните значения по умолчанию.

Проверка и создание

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

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

  3. После завершения развертывания выберите "Перейти к ресурсу".

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

    Deployed application

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

Если вы не собираетесь использовать это приложение в дальнейшем, вы можете удалить ресурс статического веб-приложения, выполнив следующие действия:

  1. Откройте портал Azure .
  2. На панели поиска вверху найдите приложение по имени, которое вы указали ранее.
  3. Щелкните приложение.
  4. Нажмите кнопку Удалить.
  5. Нажмите кнопку Да, чтобы подтвердить действие удаления.

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