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

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

Сервер Node.js

Откройте для себя Node.js сервер, предварительно настроенный с помощью Nitro для развертывания на любом хостинге Node.

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

Точка входа

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

node .output/server/index.mjs

Это запустит ваш продакшен сервер Nuxt, который по умолчанию прослушивает порт 3000.

Он учитывает следующие переменные среды выполнения:

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

PM2

PM2 (Process Manager 2) - это быстрое и простое решение для размещения вашего Nuxt приложения на сервере или виртуальной машине.

Чтобы использовать pm2, используйте 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.

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

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

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

Существует два способа развертывания приложения Nuxt на любых статических сервисах хостинга:

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

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

Если вы не хотите предварительно рендерить свои роуты, другой способ использования статического хостинга — установить свойство ssr в false в файле nuxt.config. Команда nuxi generate после этого выведет точку входа .output/public/index.html и бандлы JavaScript, как классическое клиентское приложение Vue.js.

export default 
defineNuxtConfig
({
  
ssr
: false
})

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

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

Presets

Помимо серверов Node.js и услуг статического хостинга, проект Nuxt можно развернуть с помощью нескольких проверенных пресетов и минимального количества настроек.

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

export default 
defineNuxtConfig
({
  
nitro
: {
    
preset
: 'node-server'
  }
})

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

NITRO_PRESET=node-server nuxt build

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

CDN-прокси

В большинстве случаев Nuxt может работать со сторонним контентом, который не генерируется и не создается самим Nuxt. Но иногда такой контент может вызывать проблемы, особенно "Опции минификации и безопасности" Cloudflare.

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

1. Speed > Optimization > Content Optimization > Auto Minify: Uncheck JavaScript, CSS and HTML
2. Speed > Optimization > Content Optimization > Disable "Rocket Loader™"
3. Speed > Optimization > Image Optimization > Disable "Mirage"
4. Scrape Shield > Disable "Email Address Obfuscation"

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