Пошук уроків, статей та іншого контенту
Розгорнете Next.js на VPS, налаштуєте процес запуску та забезпечите автоматичний перезапуск застосунку.
Для розгортання Next.js на VPS знадобляться:
VPS із Linux, наприклад Ubuntu;
доступ через SSH;
встановлені Node.js та npm;
код застосунку на сервері;
домен, якщо застосунок має бути доступний за доменним ім’ям;
PM2 для керування процесом Next.js.
У production Next.js працює у два етапи:
застосунок збирається командою npm run build;
зібрана версія запускається командою npm start.
Під час розробки використовується next dev, але цей режим не призначений для production.
Під’єднайтеся до сервера через SSH:
ssh deploy@SERVER_IPОновіть список пакетів і встановлені пакети:
sudo apt update
sudo apt upgrade -yПеревірте, чи встановлені Node.js та npm:
node --version
npm --versionЯкщо Node.js ще немає, встановіть актуальну LTS-версію. Версія Node.js має відповідати вимогам вашої версії Next.js.
Після встановлення перевірте:
node --version
npm --versionСтворимо окремий каталог для застосунку:
sudo mkdir -p /var/www/next-app
sudo chown -R "$USER":"$USER" /var/www/next-app
cd /var/www/next-appДалі завантажте код проєкту. Наприклад, якщо код зберігається в Git-репозиторії:
git clone REPOSITORY_URL .Якщо репозиторій уже клонований, перейдіть до нього та отримайте останні зміни:
git pullУ проєкті повинен бути файл блокування залежностей, наприклад package-lock.json. Для production встановлюйте залежності командою npm ci:
npm cinpm ci встановлює саме ті версії, які записані у lock-файлі. Це робить встановлення передбачуваним.
Змінні середовища, потрібні під час запуску, зазвичай зберігають у файлі .env.production.
Наприклад:
DATABASE_URL=postgresql://user:password@localhost:5432/app
API_SECRET=replace-with-a-secret
NEXT_PUBLIC_API_URL=https://example.com/apiСтворіть файл на сервері:
nano .env.productionВміст .env.production не потрібно додавати до Git-репозиторію. Переконайтеся, що файл виключений у .gitignore.
Змінні з префіксом NEXT_PUBLIC_ можуть потрапити до клієнтського JavaScript-коду. Не зберігайте в них паролі, токени чи інші секрети.
Після зміни змінних середовища застосунок потрібно зібрати та перезапустити. Для змін, які використовуються під час збірки, особливо важливо виконати npm run build повторно.
Переконайтеся, що у package.json є стандартні scripts:
{
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start"
}
}Виконайте production-збірку:
npm run buildПід час збірки Next.js:
перевіряє та компілює код;
створює оптимізовані сторінки й ресурси;
формує каталог .next;
готує застосунок до запуску через next start.
Якщо збірка завершилася з помилкою, застосунок не варто запускати. Спочатку виправте помилку та повторіть команду.
Перевірити production-режим без PM2 можна так:
npm startЗа замовчуванням Next.js буде доступний на порту 3000. Зупинити процес можна комбінацією Ctrl+C.
Для перевірки з самого VPS виконайте в іншій SSH-сесії:
curl http://localhost:3000Порт можна змінити змінною PORT:
PORT=4000 npm startPM2 — менеджер процесів Node.js. Він дає змогу:
запускати Next.js у фоновому режимі;
автоматично перезапускати застосунок після помилки;
зберігати журнали;
запускати застосунок після перезавантаження VPS.
Встановіть PM2 глобально:
sudo npm install --global pm2Перевірте встановлення:
pm2 --versionПерейдіть до каталогу застосунку:
cd /var/www/next-appЗапустіть production-версію:
pm2 start npm --name next-app -- startУ цій команді:
npm — програма, яку запускає PM2;
--name next-app — ім’я процесу;
-- start — передача команди start програмі npm.
Переглянути запущені процеси можна командою:
pm2 statusПереглянути журнали застосунку:
pm2 logs next-appВідкрити журнал лише за останні рядки:
pm2 logs next-app --lines 100Застосунок тепер працює у фоновому режимі та доступний на VPS через порт 3000.
Для повторюваних запусків зручно створити файл ecosystem.config.cjs у корені проєкту:
module.exports = {
apps: [
{
name: 'next-app',
script: 'npm',
args: 'start',
cwd: '/var/www/next-app',
env: {
NODE_ENV: 'production',
PORT: 3000
},
instances: 1,
autorestart: true,
watch: false,
max_memory_restart: '500M'
}
]
};Основні параметри:
name — ім’я процесу в PM2;
script — команда, яку запускає PM2;
args — аргументи для цієї команди;
cwd — каталог проєкту;
autorestart — автоматичний перезапуск після завершення або помилки;
watch: false — вимкнення стеження за файлами у production;
max_memory_restart — перезапуск, якщо процес перевищить заданий ліміт пам’яті.
Запустіть застосунок через конфігурацію:
pm2 delete next-app
pm2 start ecosystem.config.cjsПеревірте стан:
pm2 statusСамого autorestart недостатньо. Він перезапускає процес після помилки, але PM2 також потрібно налаштувати на запуск під час старту операційної системи.
Виконайте:
pm2 startupPM2 виведе команду, яку потрібно виконати з sudo. Скопіюйте та виконайте саме команду, яку він надрукує.
Після цього збережіть поточний список процесів:
pm2 saveТепер PM2 знає, що процес next-app потрібно відновити після перезавантаження VPS.
Перевірити це можна перезавантаженням сервера:
sudo rebootПісля повторного підключення перевірте:
pm2 statusПроцес next-app має бути запущений автоматично.
Типовий порядок оновлення застосунку такий:
cd /var/www/next-app
git pull
npm ci
npm run build
pm2 restart next-app --update-envПрапорець --update-env змушує PM2 повторно застосувати змінні середовища з конфігурації.
Якщо використовується ecosystem.config.cjs, можна перезапустити застосунок так:
pm2 reload ecosystem.config.cjs --update-envКоманда reload намагається виконати оновлення з мінімальним простоєм. Для одного процесу результат зазвичай подібний до звичайного перезапуску.
Після оновлення перевірте журнали:
pm2 logs next-app --lines 100Без додаткових налаштувань застосунок доступний за адресою на кшталт:
http://SERVER_IP:3000Для production зазвичай використовують Nginx як reverse proxy:
клієнт → Nginx:80/443 → Next.js:3000Nginx приймає HTTP-запити на стандартному порту та передає їх локальному процесу Next.js.
Встановіть Nginx:
sudo apt install nginx -yСтворіть конфігурацію сайту:
sudo nano /etc/nginx/sites-available/next-appДодайте конфігурацію:
server {
listen 80;
server_name example.com www.example.com;
location / {
proxy_pass http://127.0.0.1:3000;
proxy_http_version 1.1;
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;
}
}Замініть example.com на власний домен.
Увімкніть конфігурацію:
sudo ln -s /etc/nginx/sites-available/next-app /etc/nginx/sites-enabled/next-appПеревірте конфігурацію Nginx:
sudo nginx -tЯкщо перевірка успішна, перезапустіть Nginx:
sudo systemctl reload nginxТепер домен має передавати запити до Next.js на локальний порт 3000.
Застосунок при цьому не потрібно запускати на зовнішній мережевій адресі: Nginx звертається до нього через 127.0.0.1.
Основні команди для діагностики:
pm2 status
pm2 logs next-app
curl http://localhost:3000
sudo systemctl status nginx
sudo nginx -tЯкщо сайт не відкривається, перевірте:
чи запущений процес у PM2;
чи слухає Next.js порт 3000;
чи немає помилок у pm2 logs;
чи правильно вказаний proxy_pass;
чи домен вказує на IP-адресу VPS;
чи успішно проходить перевірку конфігурація Nginx.
next dev у productionnext dev призначений для розробки. Він повільніший, використовує режим розробника та не є production-запуском.
Для VPS використовуйте:
npm run build
npm startКоманда npm start очікує наявність production-збірки. Якщо каталог .next відсутній або застарів, виконайте:
npm run buildЯкщо PM2 запущений не з каталогу проєкту, він може не знайти package.json або .next.
Використовуйте cwd у ecosystem.config.cjs або запускайте команду з кореня проєкту.
Запуск через npm start у звичайній SSH-сесії прив’язаний до цієї сесії. Для фонового запуску використовуйте PM2:
pm2 start npm --name next-app -- startПеревірте, чи були виконані обидві команди:
pm2 startup
pm2 savepm2 startup налаштовує системний запуск PM2, а pm2 save зберігає список процесів.
Після зміни .env.production виконайте повторну збірку та перезапуск:
npm run build
pm2 restart next-app --update-envЦе зазвичай означає, що Nginx не може під’єднатися до Next.js. Перевірте процес і порт:
pm2 status
curl http://127.0.0.1:3000Якщо curl не отримує відповідь, проблема в Next.js або PM2, а не в Nginx.
Для розгортання Next.js на VPS потрібно:
встановити Node.js та npm;
завантажити код проєкту;
встановити залежності через npm ci;
створити production-збірку командою npm run build;
запустити застосунок через npm start;
передати керування процесом PM2;
виконати pm2 startup і pm2 save;
за потреби налаштувати Nginx як reverse proxy;
під час оновлення виконувати встановлення залежностей, збірку та перезапуск PM2.
Базова послідовність оновлення виглядає так:
git pull
npm ci
npm run build
pm2 restart next-app --update-env