Развёртывание

Как развернуть приложение Nuxt у любого хостинг-провайдера.

Приложение Nuxt можно развернуть на Node.js, статическом хостинге, в serverless- или edge/CDN-средах.

Если вы ищете список облачных провайдеров, которые поддерживают Nuxt, см. раздел Хостинг-провайдеры.

Сервер Node.js

Используйте сервер Node.js, который Nitro собирает под развёртывание на любом Node-хостинге.

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

Точка входа

При запуске nuxt build с node-server предустановкой результатом будет точка входа, которая стартует готовый к запуску сервер Node.

Терминал
node .output/server/index.mjs

Так запускается production-сервер Nuxt; по умолчанию он слушает порт 3000.

Учитываются такие переменные окружения времени выполнения:

  • NITRO_PORT или PORT (по умолчанию - 3000)
  • NITRO_HOST или HOST (по умолчанию - '0.0.0.0')
  • NITRO_SSL_CERT и NITRO_SSL_KEY — при наличии обоих Nitro поднимется в режиме HTTPS. В продакшене обычно достаточно обратного прокси (nginx, Cloudflare и т.п.) с терминацией TLS; встроенный HTTPS в Nitro чаще нужен для локальных проверок.

PM2

PM2 — менеджер процессов для Node.js: удобно держать Nuxt-приложение на VPS или виртуальной машине.

Чтобы использовать pm2, используйте ecosystem.config.cjs:

ecosystem.config.cjs
module.exports = {
  apps: [
    {
      name: 'NuxtAppName',
      port: '3000',
      exec_mode: 'cluster',
      instances: 'max',
      script: './.output/server/index.mjs',
    },
  ],
}

Режим кластера

Вы можете использовать NITRO_PRESET=node_cluster, чтобы повысить производительность многопроцессорной обработки с помощью модуля Node.js cluster.

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

Узнайте больше

Узнать больше документация Nitro для предустановки на node-server.

Статический хостинг

На статическом хостинге Nuxt обычно разворачивают так:

  • SSG с ssr: true: маршруты пререндерятся при сборке (по умолчанию у nuxt generate). Дополнительно создаются /200.html и /404.html для SPA-fallback на динамические пути и 404 — при необходимости их нужно согласовать с настройками хостинга.
  • ssr: false: чистый статический SPA — в HTML остаётся пустой <div id="__nuxt"></div>. SEO от серверного HTML почти не получите; лучше оставить SSR и обернуть проблемные фрагменты в <ClientOnly>, если они не могут рендериться на сервере.
Узнать больше Пререндеринг Nuxt.

Рендеринг только на стороне клиента

Если пререндер маршрутов не нужен, в nuxt.config задайте ssr: false: nuxt generate соберёт .output/public/index.html и клиентские бандлы, как у классического Vue SPA.

nuxt.config.ts
export default defineNuxtConfig({
  ssr: false,
})

Хостинг-провайдеры

Nuxt можно развернуть у нескольких облачных провайдеров с минимальными настройками:

Узнать больше Deploy.

Пресеты

Помимо Node.js и статического хостинга, Nuxt можно собрать под готовые пресеты Nitro с минимальной настройкой.

Вы можете явно задать нужный пресет в файле nuxt.config.ts:

nuxt.config.ts
// @errors: 2353
export default defineNuxtConfig({
  nitro: {
    preset: 'node-server',
  },
})

... или используйте переменную окружения NITRO_PRESET при запуске nuxt build:

Терминал
NITRO_PRESET=node-server nuxt build

🔎 Проверьте развертывание Nitro на наличие всех возможных предустановок развертывания и провайдеров.

CDN-прокси

В большинстве случаев Nuxt нормально работает со сторонним контентом, который не создаёт сам Nuxt. Но иногда такой контент вызывает проблемы — в частности из‑за опций Cloudflare «Minification and Security».

Убедитесь, что в Cloudflare сняты / отключены следующие опции — иначе возможны лишние перерисовки или ошибки гидратации в продакшене.

  1. Скорость → Настройки → Оптимизация контента → отключить «Rocket Loader™»
  2. Безопасность → Настройки → отключить «Email Address Obfuscation» (маскировка адресов электронной почты)

С такими настройками Cloudflare не будет внедрять в приложение Nuxt скрипты с нежелательными побочными эффектами.

Разделы в интерфейсе Cloudflare периодически переименовывают — при отсутствии пункта воспользуйтесь поиском по настройкам.