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

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

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

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

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

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

• Учетная запись Azure с активной подпиской. Если ее нет, можно создать учетную запись бесплатно.
• Учетная запись GitHub. Если ее нет, можно создать учетную запись бесплатно.
• Установленная программа установки Git. Если у вас его нет, можно установить Git.
• Установленный компонент Node.js.

Создание приложения 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.

   

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

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

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

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

Добавить личный домен