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

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

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

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

Node.js-сервер

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

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

Точка входа

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

Terminal
node .output/server/index.mjs

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

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

  • 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',
    },
  ],
}

Режим 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.

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

Если не нужен пререндеринг, в 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
// @errors: 2353
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 > Optimization > Content Optimization — выключить «Rocket Loader™»
  2. Speed > Optimization > Image Optimization — выключить «Mirage»
  3. Scrape Shield — выключить «Email Address Obfuscation»

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

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