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

  • Статья

В этом руководстве описано, как развернуть Next.js созданный статический веб-сайт для Статические веб-приложения Azure. Дополнительные сведения о Next.js особенности см. в файле сведений о начальном шаблоне.

Предварительные требования

1. Настройка приложения Next.js

Для создания приложения можно использовать начальный репозиторий вместо выполнения команд в интерфейсе командной строки Next.js. Начальный репозиторий содержит существующее приложение Next.js, которое поддерживает динамические маршруты.

Для начала создайте репозиторий в учетной записи GitHub из репозитория шаблонов.

  1. Перейдите на сайт https://github.com/staticwebdev/nextjs-starter/generate.

  2. Присвойте репозиторию имя nextjs-starter

  3. Затем клонируйте новый репозиторий на компьютер. Обязательно замените <YOUR_GITHUB_ACCOUNT_NAME> именем своей учетной записи.

    git clone http://github.com/<YOUR_GITHUB_ACCOUNT_NAME>/nextjs-starter

  4. Перейдите к недавно клонированному приложению Next.js.

    cd nextjs-starter

  5. Установите зависимости.

    npm install

  6. Запустите приложение Next.js в разработке.

    npm run dev

  7. Перейдите на страницу http://localhost:3000 , чтобы открыть приложение, где вы увидите следующий веб-сайт, открытый в предпочитаемом браузере:

Запуск приложения Next.js

Щелкнув платформу или библиотеку, вы увидите страницу со сведениями о выбранном элементе:

Страница сведений

2. Создание статического приложения

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

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

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

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

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

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

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

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

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

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

    Свойство Значение
    Организация Выберите соответствующую организацию GitHub.
    Репозиторий Выберите nextjs-starter.
    Ветвь Выберите Main.

  9. В разделе Сведения о сборке, выберите вариант Пользовательская в поле Предварительно заданные параметры сборки. Добавьте следующие значения в качестве конфигурации сборки.

    Свойство Значение
    Расположение приложения Введите / в текстовое поле.
    Расположение API Оставьте это поле пустым.
    Расположение вывода Введите в поле значение out.

3. Просмотр и создание

  1. Выберите Просмотр и создание , чтобы проверить правильность сведений.

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

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

  4. В окне Обзор щелкните ссылку на URL-адрес, чтобы открыть развернутое приложение.

Если веб-сайт не загрузится сразу, сборка все еще выполняется. Чтобы проверить состояние рабочего процесса Actions, перейдите к панели мониторинга Actions для репозитория:

https://github.com/<YOUR_GITHUB_USERNAME>/nextjs-starter/actions

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

Теперь все изменения, внесенные в ветвь main, запускают новую сборку и развертывание вашего веб-сайта.

4. Синхронизация изменений

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

Вернитесь в терминал и выполните команду git pull origin main.

Настройка статической отрисовки

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

  1. Откройте репозиторий в Visual Studio Code.

  2. Перейдите к файлу GitHub Actions, который Статические веб-приложения Azure добавлен в репозиторий:.github/workflows/azure-static-web-apps-<your site ID>.yml

  3. Обновите задание сборки и развертывания , чтобы задать для переменной IS_STATIC_EXPORT среды значение true:

        - name: Build And Deploy
        id: swa
        uses: azure/static-web-apps-deploy@latest
        with:
          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_TOKEN }}
          repo_token: ${{ secrets.GITHUB_TOKEN }} # Used for GitHub integrations (i.e. PR comments)
          action: "upload"
          app_location: "/" # App source code path
          api_location: "" # Api source code path - optional
          output_location: "" # Built app content directory - optional
        env: # Add environment variables here
          IS_STATIC_EXPORT: true

  4. Зафиксируйте изменения в Git и отправьте их в GitHub.

    git commit -am "Configuring static site generation" && git push

После завершения сборки сайт будет статически отрисован.

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

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

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

Дальнейшие действия

Настройка личного домена