Деплой Next.js и React: продакшен на VPS

Руководство по развёртыванию Next.js и React приложений на VPS. Настройка Node.js, сборка и запуск Next.js, менеджер процессов PM2, обратный прокси Nginx, переменные окружения и основы CI/CD.

Время чтения: 16 мин Веб-хостинг / Приложения

nextjsreactnodejspm2nginxdeployvpsjavascriptci-cd

Деплой Next.js и React: производственная среда на VPS

Next.js — самый популярный фреймворк для современных React-приложений. Запуск Next.js на собственном VPS вместо платформ вроде Vercel даёт экономию средств, полный контроль и возможности настройки. Это руководство проведёт вас через развёртывание Next.js приложения на VPS шаг за шагом.

Установка Node.js (через nvm)

hljs bash

# Установить nvm
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash
source ~/.bashrc

# Установить LTS-версию
nvm install --lts
nvm use --lts
nvm alias default node

node --version
npm --version

Перенос приложения на сервер

hljs bash

sudo mkdir -p /var/www/mynextapp
sudo chown $USER:$USER /var/www/mynextapp
cd /var/www
git clone https://github.com/user/mynextapp.git
cd mynextapp
npm install

Переменные окружения

hljs env

NODE_ENV=production
NEXT_PUBLIC_API_URL=https://api.example.com
DATABASE_URL=postgresql://user:password@localhost:5432/mydb
NEXTAUTH_SECRET=ваш-секретный-ключ
NEXTAUTH_URL=https://example.com

Переменные с префиксом NEXT_PUBLIC_ видны в браузере. Не используйте этот префикс для конфиденциальной информации.

Сборка Next.js и Standalone вывод

hljs javascript

// next.config.js
const nextConfig = {
  output: 'standalone',
  images: {
    domains: ['example.com'],
  },
};

module.exports = nextConfig;

hljs bash

# Создать производственную сборку
npm run build

Управление процессами с PM2

hljs javascript

// ecosystem.config.js
module.exports = {
  apps: [
    {
      name: 'mynextapp',
      script: '.next/standalone/server.js',
      cwd: '/var/www/mynextapp',
      instances: 'max',
      exec_mode: 'cluster',
      env: {
        NODE_ENV: 'production',
        PORT: 3000,
        HOSTNAME: '0.0.0.0'
      },
      max_memory_restart: '1G',
      autorestart: true
    }
  ]
};

hljs bash

# Скопировать статические файлы для standalone сборки
cp -r .next/static .next/standalone/.next/static
cp -r public .next/standalone/public

# Запустить приложение
pm2 start ecosystem.config.js
pm2 startup
pm2 save

Конфигурация обратного прокси Nginx

hljs nginx

server {
    listen 80;
    server_name example.com www.example.com;

    location /_next/static/ {
        alias /var/www/mynextapp/.next/static/;
        expires 1y;
        add_header Cache-Control "public, immutable";
    }

    location / {
        proxy_pass http://localhost:3000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_cache_bypass $http_upgrade;
    }

    gzip on;
    gzip_types text/plain text/css application/json application/javascript;
    client_max_body_size 50M;
}

hljs bash

sudo ln -s /etc/nginx/sites-available/mynextapp /etc/nginx/sites-enabled/
sudo nginx -t && sudo systemctl reload nginx

SSL-сертификат

hljs bash

sudo apt install certbot python3-certbot-nginx -y
sudo certbot --nginx -d example.com -d www.example.com

Основы CI/CD (GitHub Actions)

hljs yaml

name: Deploy to VPS
on:
  push:
    branches: [main]
jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Deploy to server
        uses: appleboy/ssh-action@master
        with:
          host: ${{ secrets.SERVER_HOST }}
          username: ${{ secrets.SERVER_USER }}
          key: ${{ secrets.SSH_PRIVATE_KEY }}
          script: |
            cd /var/www/mynextapp
            git pull origin main
            npm install
            npm run build
            cp -r .next/static .next/standalone/.next/static
            cp -r public .next/standalone/public
            pm2 reload mynextapp

Ручной рабочий процесс деплоя

hljs bash

cd /var/www/mynextapp
git pull origin main
npm install
npm run build
cp -r .next/static .next/standalone/.next/static
cp -r public .next/standalone/public
pm2 reload mynextapp

На серверах REXE для Next.js рекомендуется минимум 1 ГБ ОЗУ. Большим приложениям может потребоваться 2 ГБ+ ОЗУ во время сборки. Используйте кластерный режим PM2 для полного использования ядер CPU.

Заключение

Ваше Next.js приложение теперь работает в производственной среде на VPS, управляется PM2, находится за обратным прокси Nginx и защищено SSL. Настройте CI/CD pipeline с GitHub Actions для автоматического деплоя при каждом push.

Деплой Next.js и React: продакшен на VPS

Содержание

Деплой Next.js и React: производственная среда на VPS

Установка Node.js (через nvm)

Перенос приложения на сервер

Переменные окружения

Сборка Next.js и Standalone вывод

Управление процессами с PM2

Конфигурация обратного прокси Nginx

SSL-сертификат

Основы CI/CD (GitHub Actions)

Ручной рабочий процесс деплоя

Заключение

Связанные статьи

Деплой Node.js приложения: PM2 и Nginx

Деплой PHP приложения: LAMP и LEMP стек

Установка и оптимизация WordPress: руководство для VPS