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

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

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

Предпосылки

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

Вместо использования Next.js CLI для создания приложения можно использовать начальный репозиторий. Начальный репозиторий содержит существующее приложение 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. Перейдите на портал Azure.

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

  3. Поиск статических веб-приложений.

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

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

  6. На вкладке "Основные сведения" введите следующие значения.

    Недвижимость Ценность
    Subscription Название вашей подписки 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-адреса , чтобы открыть развернутое приложение.

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

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

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

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

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

При создании приложения сервис Azure Static Web Apps создал файл GitHub Actions в вашем репозитории. Синхронизация с сервером путем извлечения последней версии в локальный репозиторий.

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

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

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

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

  2. Перейдите в файл GitHub Actions, который Azure Static Web Apps добавил в ваш репозиторий .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. Нажмите кнопку "Да" , чтобы подтвердить действие удаления.

Дальнейшие шаги

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

  • Last updated on