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

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

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

Список облачных провайдеров с поддержкой Nuxt — в разделе Провайдеры хостинга.

Node.js-сервер

Пресет Node.js в Nitro позволяет развернуть приложение на любом Node-хостинге.

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

Точка входа

После nuxt build с пресетом Node результат — готовый к запуску сервер:

Terminal
NODE_ENV=production node .output/server/index.mjs

Сервер по умолчанию слушает порт 3000.

Set NODE_ENV=production when running the server. Some dependencies (notably Vue Router) only strip development-only warnings when this is set, so leaving it unset can flood your logs with messages like [Vue Router warn]: No match found for location with path … on unmatched routes.

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

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

PM2

PM2 — удобный вариант для запуска Nuxt на своём сервере или VM.

Пример ecosystem.config.cjs:

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

Режим cluster

Переменная NITRO_PRESET=node_cluster включает многопроцессный режим через cluster Node.js.

По умолчанию нагрузка распределяется между воркерами по round robin.

Дополнительно

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

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

Развернуть Nuxt на статическом хостинге можно двумя способами:

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

Резервные статические страницы

Nuxt может сгенерировать две резервные страницы для статических хостов:

  • 200.html — заглушка одностраничного приложения (SPA). Настройте хостинг на её отдачу для несопоставленных маршрутов, если хотите, чтобы URL обрабатывала клиентская маршрутизация.
  • 404.html — заглушка «страница не найдена». Настройте хостинг на её отдачу для маршрутов, которые должны сохранять статус 404.

nuxt generate и nuxt build --prerender создают эти файлы автоматически. Если вы используете nuxt build с route rules для пререндеринга выбранных маршрутов, добавьте резервную страницу явно:

nuxt.config.ts
export default defineNuxtConfig({
  routeRules: {
    '/200.html': { prerender: true },
  },
})

Одни провайдеры используют 200.html, другие — 404.html, третьи позволяют настроить оба. После деплоя проверьте настройки статических заглушек или переадресаций у вашего хостинг-провайдера.

Узнать больше Пререндеринг в Nuxt.

Только клиентский рендеринг

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

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

Провайдеры хостинга

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

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

Пресеты

Кроме Node.js и статики, Nuxt поддерживает ряд пресетов с минимальной конфигурацией.

Пресет задаётся в nuxt.config.ts:

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

…или переменной окружения при nuxt build:

Terminal
NITRO_PRESET=node-server nuxt build

Список пресетов и провайдеров: Nitro deployment.

Прокси и CDN

Обычно Nuxt нормально работает с контентом от сторонних сервисов. Но некоторые настройки (например «Minification and Security» в Cloudflare) могут ломать приложение.

В Cloudflare рекомендуется отключить:

  1. Speed > Settings > Content Optimization — отключить «Rocket Loader™»
  2. Security > Settings — отключить «Email Address Obfuscation»

Так Cloudflare не будет внедрять скрипты в Nuxt и вызывать лишний ре-рендер или ошибки гидрации.

Расположение этих опций в панели Cloudflare может меняться.