Next.js на власному сервері з розгортанням після git push

Коротко: щоб розмістити Next.js на власному сервері, встановіть панель розгортання на зразок Coolify і підключіть репозиторій GitHub. Після цього кожен git push збирає застосунок і публікує нову версію через HTTPS. За документацією Next.js, усі можливості працюють, якщо розгортати через сервер Node.js або контейнер Docker, тож ви не прив’язані до жодної окремої платформи.

Які можливості працюють на власному сервері?

Таблиця в офіційній документації коротка: сервер Node.js і Docker підтримують усі можливості, а статичний експорт обмежений. На одному сервері це на практиці означає таке:

• Серверні компоненти, маршрути API та потокові відповіді працюють із next start.
• next/image не потребує додаткового налаштування, а зображення обробляються на сервері.
• Кешування та інкрементальна статична регенерація (ISR) працюють самі на одному сервері з постійним диском. Якщо запускаєте кілька копій, кеш між ними доведеться ділити.
• Офіційна рекомендація — ставити перед Next.js зворотний проксі, а не відкривати його напряму. Для цього Coolify постачається з Traefik, і саме Traefik отримує й сертифікат.

Наскільки потужним має бути сервер?

Обсяг потрібної пам’яті визначає збірка, а не запущений застосунок. next build дає пік, а коли застосунок працює, йому потрібно значно менше. Сам Coolify також споживає пам’ять. Ось значення, які ми виміряли на справжніх серверах:

Малий проєкт — приклад застосунку Next.js від Coolify. Більший — чат-застосунок із ШІ на Next.js 16 із приблизно 85 пакетами, і на 2 ГБ під час перевірки TypeScript у нього закінчилася пам’ять. На сервері було 2 ГБ swap, а цифри показують найвищу точку. Використання диска після першої збірки становило 13-18 ГБ. Це наші власні вимірювання, і ваш проєкт відрізнятиметься. Якщо збірка не вдається через брак пам’яті, спершу збільште сервер, а пізніше, якщо вдасться, зменште його назад.

Крок за кроком

1. Підключіть репозиторій

Увійдіть у Coolify, відкрийте свій проєкт на сторінці Projects і натисніть New resource. Для публічного репозиторію оберіть Public Git Repository, введіть адресу й натисніть Check repository.

2. Додайте ключ, якщо репозиторій приватний

У лівому меню перейдіть до Private Keys у розділі Keys & Tokens і створіть ключ за допомогою Generate ED25519. Додайте відкритий ключ у Deploy keys на сторінці Settings репозиторію на GitHub. Потім через New resource оберіть Private Git Repository (with Deploy Key) і введіть [email protected]:user/project.git. Залиште для Build pack значення Railpack, який розпізнає Next.js, а порт лишається 3000. Coolify позначає Railpack як бета-версію, тож якщо виникнуть труднощі, оберіть власний Dockerfile.

3. Введіть змінні середовища

На сторінці Environment Variables перемкніться на Developer view і вставте вміст свого файлу .env. Тут важлива одна деталь: змінні, назви яких починаються з NEXT_PUBLIC_, записуються в код під час збірки. Коли змінюєте одну з них, натисніть Redeploy: панель бачить, що налаштування збірки змінилося, і збирає знову. Ніколи не давайте цей префікс ключу, який браузер не повинен бачити.

4. Підключіть свій домен

У свого постачальника домену створіть запис A, що вказує на IP-адресу сервера. У Coolify перейдіть на сторінку Domains, натисніть Add domain, оберіть протокол https, введіть домен, збережіть і розгорніть знову. Сертифікат запитується й поновлюється автоматично. Порти 80 і 443 мають бути відкриті.

5. Розгорніть

Натисніть Deploy. Сторінка Deployments показує журнал збірки наживо. Коли збірка завершиться, старий контейнер продовжує обслуговувати запити, доки новий не буде готовий.

Як git push перетворюється на розгортання?

Під час кожного push GitHub надсилає панелі підписаний запит. Панель перевіряє підпис і перебудовує застосунок для цієї гілки, а запит із поганим підписом відхиляється. Ось як це налаштувати:

1. На сторінці Webhooks застосунку скопіюйте Webhook URL із розділу GitHub, уведіть у Webhook secret випадкове значення завдовжки щонайменше 16 символів і збережіть.
2. На GitHub відкрийте Settings репозиторію, перейдіть до Webhooks і натисніть Add webhook.
3. Вкажіть адресу в Payload URL, а те саме значення — в Secret. Для Content type задайте application/json і залиште єдиною подією push.

Щоб перевірити:

git commit --allow-empty -m "deploy test"

git push

Нова збірка з’явиться на сторінці Deployments. На малому прикладі проєкту новий коміт запрацював за 41 секунду завдяки кешу збірки. GitHub має мати змогу дістатися до адреси панелі, а оскільки панель встановлюється з публічною адресою HTTPS, нічого додатково не потрібно.

Типові помилки

У варіанті Next.js від Seturack Coolify приходить уже встановленим: локальний сервер перевірено, вітальний майстер пропущено, а панель відкривається через HTTPS. Адреса й пароль з’являються у вашій панелі, а починаєте ви з підключення GitHub. Root-доступ у вас є, і якщо хочете, усім можна керувати з панелі. Щоденна резервна копія входить у ціну, а трафік необмежений. Розмір ви задаєте повзунками на сторінці Next.js VPS.

Готове до роботи в Seturack: Next.js, Coolify.