Як переїхати з Vercel/Netlify на VPS

Для успішного migrate from vercel netlify на власний сервер достатньо орендувати VPS з характеристиками від 2 ГБ RAM та 2 vCPU (вартістю від $6–10/міс), налаштувати Docker-контейнеризацію для Next.js або SvelteKit та використовувати Nginx як реверс-проксі — це дозволить скоротити витрати на хостинг у 5–10 разів при збереженні високої продуктивності.

Чому розробники обирають migrate from vercel netlify у 2026 році?

Переїзд з популярних PaaS-платформ (Platform as a Service) на власні віртуальні сервери продиктований не лише економією, а й прагненням до повного контролю над інфраструктурою. Основна проблема Vercel та Netlify полягає у "невидимих" лімітах. Як тільки ваш проєкт виходить за межі хобі-тарифу, ви стикаєтеся з величезними рахунками за пропускну здатність (Bandwidth), час виконання Serverless-функцій та кількість оптимізованих зображень.

Vercel migration часто стає необхідністю, коли вартість Bandwidth досягає $40 за кожні додаткові 100 ГБ. Водночас сучасний VPS пропонує терабайти трафіку за фіксовану вартість. Якщо ви вже стикалися з подібними проблемами, можливо, вам буде корисним досвід тих, хто здійснив переїзд з Heroku на VPS, оскільки логіка оптимізації витрат тут ідентична.

Основні причини для міграції:

• Вартість трафіку: На VPS ви платите за порт або фіксований обсяг (наприклад, 4–10 ТБ), тоді як на Edge-платформах кожен гігабайт понад ліміт коштує в десятки разів дорожче.
• Cold Starts (холодні старти): Serverless-функції засинають за відсутності трафіку. На VPS ваш Node.js додаток запущений 24/7, забезпечуючи миттєвий відгук.
• Обмеження середовища: На Vercel ви обмежені часом виконання функції (зазвичай 15–30 секунд на Pro-тарифі). На VPS ви можете запускати тривалі фонові завдання, парсери або ML-скрипти.
• Vendor Lock-in: Використання специфічних фішок (Edge Middleware, Image Optimization API) прив'язує вас до платформи. Перехід на jamstack vps архітектуру робить проєкт переносним.

Порівняння витрат: Jamstack платформи проти VPS

Щоб зрозуміти реальну вигоду, яку дає netlify migration, розглянемо таблицю характеристик і цін. Ми порівняємо типовий проєкт на Next.js із середнім трафіком (500 ГБ/міс) та необхідністю оптимізації 5000 зображень.

Для багатьох команд хостинг для MVP-стартапу починається саме з Vercel через зручність, але економічно обґрунтованим рішенням для масштабування залишається VPS. При зростанні трафіку різниця в ціні може досягати сотень і тисяч доларів на місяць.

Технічна підготовка до Vercel migration для Next.js

Next.js — це флагманський фреймворк Vercel, але він чудово працює на будь-якому сервері. Ключ до успішної міграції — використання режиму standalone. За замовчуванням Next.js при збірці створює величезну папку .next, яка потребує наявності всіх node_modules. Режим standalone збирає лише необхідні файли, зменшуючи розмір Docker-образу з 1 ГБ до 150–200 МБ.

Налаштування next.config.js

Додайте наступну опцію у ваш конфігураційний файл:

module.exports = {
  output: 'standalone',
}

Після запуску команди npm run build, Next.js створить папку .next/standalone, всередині якої буде знаходитися файл server.js. Це самодостатній Node.js додаток, який не потребує встановленого Next.js у системі — достатньо лише Node.js рантайму.

Оптимізація зображень без Vercel

Vercel автоматично оптимізує зображення через свій API. При переїзді на jamstack vps вам потрібно переконатися, що в проєкті встановлена бібліотека sharp. Next.js автоматично виявить її та використовуватиме ресурси вашого процесора для стиснення та конвертації картинок у WebP/AVIF.

npm install sharp

Майте на увазі, що це створить навантаження на CPU. Якщо у вас тисячі важких зображень, обирайте тарифи з потужними ядрами. Про те, як процесор впливає на продуктивність важких додатків, можна почитати у статті про Bare-metal vs VPS для ML, де детально розібрані питання навантаження на обчислювальні потужності.

Покроковий процес Netlify migration: SvelteKit та Nuxt.js

Міграція проєктів на SvelteKit або Nuxt аналогічна, але потребує зміни адаптера. В екосистемі Jamstack ці фреймворки часто використовують adapter-auto або adapter-netlify. Для VPS вам знадобиться adapter-node.

Для SvelteKit:

1. Встановіть адаптер: npm i -D @sveltejs/adapter-node.
2. Змініть svelte.config.js:

   import adapter from '@sveltejs/adapter-node';
   export default {
     kit: {
       adapter: adapter()
     }
   };

3. Зберіть проєкт: npm run build.
4. Запустіть сервер: node build/index.js.

Для Nuxt.js:

Nuxt за замовчуванням чудово працює в Node.js середовищі. Вам достатньо виконати npm run build і запустити результат командою node .output/server/index.mjs. Важливо правильно передати змінні оточення, такі як PORT and HOST, щоб додаток був доступний ззовні Docker-контейнера або через Nginx.

Налаштування оточення: Docker, PM2 та Nginx

Щоб ваш jamstack vps працював стабільно, не можна просто запустити node server.js у консолі. Вам потрібна система управління процесами та вебсервер для обробки SSL та кешування.

Варіант 1: Використання Docker (рекомендовано)

Docker ізолює залежності та спрощує деплой. Приклад мінімального Dockerfile для Next.js проєкту:

FROM node:20-alpine AS runner
WORKDIR /app
ENV NODE_ENV production
COPY .next/standalone ./
COPY .next/static ./.next/static
COPY public ./public
EXPOSE 3000
CMD ["node", "server.js"]

Варіант 2: Використання PM2

Якщо ви віддаєте перевагу запуску без контейнерів, використовуйте PM2. Він забезпечить автоматичний перезапуск додатка при збоях або після перезавантаження сервера.

npm install pm2 -g
pm2 start .next/standalone/server.js --name "my-app"
pm2 save
pm2 startup

Налаштування Nginx як Reverse Proxy

Nginx прийматиме вхідний трафік на 80/443 портах і перенаправлятиме його на ваш Node.js додаток (порт 3000). Це критично важливо для безпеки та продуктивності. При виборі сервера зверніть увагу на обсяг трафіку, докладніше про це в матеріалі Bandwidth VPS: TB/міс vs unmetered.

server {
    listen 80;
    server_name yourdomain.com;

    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_cache_bypass $http_upgrade;
    }
}

Автоматизація CI/CD: заміна Vercel Deployments

Одна з головних причин любові до Vercel — автоматичний деплой по пушу в Git. При migrate from vercel netlify на VPS цей функціонал легко налаштовується через GitHub Actions або GitLab CI.

Приклад Workflow для GitHub Actions:

1. Build: Збірка проєкту та створення Docker-образу.
2. Push: Відправка образу в Docker Hub або GitHub Container Registry.
3. Deploy: Підключення к VPS по SSH та виконання команди docker compose pull && docker compose up -d.

Це займає трохи більше часу на початкове налаштування, але дає вам повний контроль над процесом. Ви можете додати етапи тестування, перевірки безпеки та сповіщення в Telegram без обмежень по хвилинах збірки, які є на безкоштовних і навіть платних тарифах PaaS.

Оптимізація продуктивності: Edge-кешування на своєму VPS

Багато хто боїться, що при vercel migration вони втратять перевагу Edge-мережі (роздача контенту з найближчої до користувача точки). Однак це легко вирішується використанням Cloudflare у режимі проксі.

• Cloudflare CDN: Безкоштовно кешує статичні файли (JS, CSS, зображення) на своїх Edge-вузлах.
• Nginx Caching: Ви можете налаштувати мікро-кешування на стороні сервера для динамічних сторінок, що дозволить витримувати тисячі запитів на секунду навіть на слабкому VPS.
• Brotli Compression: Увімкніть стиснення Brotli в Nginx, щоб зменшити розмір даних, що передаються, більше, ніж це робить стандартний Gzip.

Для проєктів, що потребують мінімальних затримок і високої обчислювальної потужності, наприклад, для ігрових серверів, вибір інфраструктури ще критичніший. Про те, як підбирати сервери під високі навантаження, можна дізнатися з огляду кращих серверів під Minecraft, де вимоги до CPU та RAM максимально високі.

Безпека та моніторинг після міграції

Переїжджаючи з Netlify, ви берете на себе відповідальність за безпеку ОС. Мінімальний чек-ліст:

1. UFW (Firewall): Закрийте всі порти, крім 80, 443 та вашого кастомного порту для SSH.
2. Fail2Ban: Захистіть сервер від брутфорс-атак на SSH.
3. SSL: Використовуйте Certbot для отримання безкоштовних сертифікатів Let's Encrypt з автопродовженням.
4. Моніторинг: Встановіть Uptime Kuma або використовуйте прості скрипти для перевірки доступності вашого додатка.

На відміну від закритих платформ, тут ви бачите реальне завантаження системи, можете аналізувати логи Nginx у реальному часі та оперативно реагувати на аномальні сплески трафіку або спроби зламу.

Висновки

Міграція з Vercel або Netlify на VPS — це стратегічно правильний крок для будь-якого проєкту, який переріс стадію прототипу та потребує оптимізації витрат. Для більшості Fullstack-додатків на Next.js або Nuxt оптимальним вибором стане VPS з 4 ГБ RAM та сучасним NVMe-диском, що забезпечить стабільну роботу без переплат за "магію" Edge-платформ.