Vue.js хостинг: офшорный VPS для Vue и Nuxt приложений

Выбор между Vue SPA и Nuxt SSR влияет на архитектуру деплоя:

• Vue SPA (Vite build): результат сборки - статические HTML, CSS, JS файлы. Деплоится как статика через Nginx - самый простой вариант. Не требует Node.js в production, сервер только отдаёт файлы. SEO ограничен (контент рендерится на клиенте).
• Nuxt SSR: требует Node.js-процесс в production (Nitro сервер). Страницы рендерятся на сервере, хорошие позиции в SEO. Нужен PM2 для управления процессом и Nginx как обратный прокси.
• Nuxt Static (nuxt generate): генерирует статические HTML-страницы во время сборки. Деплоится как статика, но с правильным HTML для SEO. Оптимален для сайтов с редкими обновлениями контента.

Для большинства проектов Nuxt SSR на VPS - оптимальный баланс между SEO, производительностью и возможностями.

Деплой Vue SPA (Vite) на VPS - простейший сценарий:

1. Соберите проект: npm run build - результат в директории dist/
2. Скопируйте содержимое dist/ на VPS в /var/www/your-app/
3. Настройте Nginx для отдачи статических файлов и SPA-маршрутизации:

location / {
  root /var/www/your-app;
  try_files $uri $uri/ /index.html;
}

Строчка try_files с /index.html критична для Vue Router - без неё прямые ссылки на маршруты возвращают 404. Let's Encrypt обеспечивает HTTPS через Certbot. CI/CD автоматизирует деплой новых версий через rsync или SCP.

Nuxt 3 использует Nitro как универсальный сервер. Для self-hosted VPS:

1. Установите target в nuxt.config.ts: nitro: { preset: 'node-server' }
2. Соберите: npm run build - результат в .output/
3. Запустите: node .output/server/index.mjs на порту 3000 (по умолчанию)
4. PM2 управляет процессом и обеспечивает автозапуск: pm2 start .output/server/index.mjs --name nuxt
5. Nginx проксирует внешние запросы на localhost:3000

Nuxt DevTools в development-режиме не активны в production - они не влияют на производительность prod-сборки. Nuxt Content Module и другие модули работают в self-hosted режиме без изменений.

SSR добавляет сложность в управление состоянием: состояние должно инициализироваться на сервере и передаваться на клиент без гидрации-мисматчей:

• Pinia (Nuxt 3): официальный модуль @pinia/nuxt автоматически сериализует состояние сервера в HTML и восстанавливает на клиенте. Нет дополнительной конфигурации для базовых сценариев.
• Нет глобальных синглтонов: в SSR каждый запрос должен создавать новый экземпляр store. Nuxt делает это автоматически через request-scoped stores.
• Чувствительные данные: не кладите токены аутентификации в state SSR - они будут в HTML и видны клиенту. Используйте httpOnly cookies для сессий.
• Lazy hydration: компоненты ниже fold можно гидрировать лениво через defineAsyncComponent для ускорения Time to Interactive.