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

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

  • Статья

Next.js поддержку Статические веб-приложения Azure можно классифицировать как две модели развертывания:

Гибридные приложения Next.js (предварительная версия)

Статические веб-приложения поддерживает развертывание гибридных веб-сайтов Next.js. Это обеспечивает поддержку всех Next.js функций, таких как маршрутизатор приложений и компоненты сервера React.

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

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

Основные функции, доступные в предварительной версии:

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

Неподдерживаемые функции в предварительной версии

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

  • Выберите службы Azure: связанные API с помощью Функции Azure, службы приложение Azure, приложений контейнеров Azure или Azure Управление API.
  • Функции SWA CLI: локальная эмуляция и развертывание SWA CLI.
  • Поддержка частичных функций: следующие свойства в staticwebapp.config.json файле не поддерживаются:
    • Резервный вариант навигации не поддерживается.
    • Перезаписи маршрутов в приложении Next.js должны быть настроены в next.config.jsпределах .
    • Конфигурация в staticwebapp.config.json файле имеет приоритет над конфигурацией внутри next.config.js.
    • Настройка сайта Next.js должна обрабатываться с помощью next.config.js полной совместимости функций.
  • Пропуск сборки: для приложений Next.js, если skip_api_build=trueСтатические веб-приложения не удаляет зависимости разработки или добавляет острый пакет по умолчанию. Если вы хотите эти оптимизации, добавьте их в пользовательские шаги сборки перед передачей skip_app_build=true.
  • Добавочное статическое восстановление (ISR): кэширование изображений не поддерживается.

Примечание.

Максимальный размер приложения для гибридного приложения Next.js составляет 250 МБ. Используйте автономную функцию, Next.js для оптимизированных размеров приложений. Если это недостаточно, рассмотрите возможность использования статического HTML-файла, экспортированного Next.js , если размер приложения превышает 250 МБ.

Отрисовка на стороне сервера

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

Примечание.

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

  1. Перейдите в статическое веб-приложение в портал Azure.

  2. Выберите параметры , а затем API из бокового меню.

  3. Выберите " Настроить связанную серверную часть".

  4. Создайте новый план Служба приложений или выберите существующий план Служба приложений.

    Выбранный план Служба приложений должен использовать по крайней мере номер S1 S1.

  5. Щелкните Связать.

Статический экспорт HTML

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

Статические Next.js сайты размещаются в глобально распределенной сети Статические веб-приложения Azure для оптимальной производительности. Кроме того, можно добавить связанные серверные части для API.

Чтобы включить статический экспорт приложения Next.js, добавьте output: 'export' в следующую конфигурацию next.config.js.

/** @type {import('next').NextConfig} */
const nextConfig = {
  output: 'export',
 
  // Optional: Change the output directory `out` -> `dist`
  // distDir: 'dist',
}
 
module.exports = nextConfig

Необходимо также указать в output_location конфигурации GitHub Actions/Azure DevOps. По умолчанию это значение равно out Next.js по умолчанию. Если в конфигурации Next.js указано пользовательское расположение вывода, значение, указанное для сборки, должно соответствовать значению, настроенному в экспорте Next.js.

Если вы используете пользовательские скрипты сборки, установите значение IS_STATIC_EXPORTtrue в задаче Статические веб-приложения файла GitHub Actions/Azure DevOps YAML.

В следующем примере показано задание GitHub Actions, которое включено для статических экспортов.

      - 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: "out" # Built app content directory - optional
        env: # Add environment variables here
          IS_STATIC_EXPORT: true

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