Налаштування деплою на Vercel: конфігурація, Serverless, CI/CD під ключ

Налаштування деплою сайту на Vercel під ключ

Уявіть: ви запускаєте деплой Vercel, але на проді вилазить помилка, якої не було на локалі. Hydration mismatch, неправильні змінні оточення, або PR-рев'ю затягується через відсутність готового прев'ю-посилання. Ми стикалися з цим десятки разів і знаємо, як налаштувати Vercel так, щоб деплой перестав бути вузьким місцем. В одному проєкті з Next.js 14 ми оптимізували Serverless Functions, розбивши монолітну функцію на кілька мікросервісів — це скоротило час відповіді API на 40% і зменшило холодний старт з 3 секунд до 200 мс. Додатково це знизило витрати на Serverless Functions приблизно на $200 на місяць.

Ми — команда інженерів з 5+ років досвіду розробки на Next.js та React. За цей час налаштували Vercel для 30+ проєктів — від лендінгів до складних дашбордів з Serverless Functions. Гарантуємо стабільну роботу після деплою.

Як Vercel вирішує проблему оточень?

Vercel автоматично створює три оточення: Production, Preview та Development. У кожного свої змінні оточення, домени та налаштування. Preview Deployments для кожного PR дають готове посилання для рев'ю ще до мержу. Це виключає «а на локалі працювало».

Ми скоротили час відкатів на 60% після впровадження Preview Deployments: тепер кожен PR проходить перевірку на точній копії продакшену.

Як підключити кастомний домен?

1. У панелі Vercel відкрийте проєкт → Settings → Domains.
2. Додайте домен та налаштуйте DNS-записи (CNAME).
3. Дочекайтеся перевірки (зазвичай 2–5 хвилин).
4. Налаштуйте редиректи (www → без www) у vercel.json.

Налаштування Vercel: від підключення до продакшену

Підключення проєкту

# Встановлення CLI
npm install -g vercel

# Деплой з поточної директорії
vercel

# Деплой з налаштуваннями
vercel --prod          # production
vercel --env preview   # staging

Конфігурація vercel.json

Файл конфігурації vercel.json керує маршрутизацією, заголовками безпеки, регіонами та командами збірки. Нижче приклад для Vite-проєкту з проксі на API і жорсткими заголовками.

{
    "buildCommand": "npm run build",
    "outputDirectory": "dist",
    "installCommand": "npm ci",
    "framework": "vite",

    "rewrites": [
        { "source": "/api/(.*)", "destination": "https://api.example.com/$1" },
        { "source": "/(.*)", "destination": "/index.html" }
    ],

    "headers": [
        {
            "source": "/(.*)",
            "headers": [
                { "key": "X-Frame-Options", "value": "DENY" },
                { "key": "X-Content-Type-Options", "value": "nosniff" },
                { "key": "Strict-Transport-Security", "value": "max-age=31536000; includeSubDomains" }
            ]
        },
        {
            "source": "/assets/(.*)",
            "headers": [
                { "key": "Cache-Control", "value": "public, max-age=31536000, immutable" }
            ]
        }
    ],

    "regions": ["fra1", "iad1"]
}

Додавання Serverless Functions

Serverless computing — це модель виконання в хмарі, де постачальник хмарних послуг динамічно керує виділенням та налаштуванням серверів. (Wikipedia: Serverless computing). Serverless Functions на Node.js, Python, Go ідеальні для API-проксі, відправки листів, обробки вебхуків. Приклад функції відправки контактної форми через Resend:

// api/contact.ts (Vercel Edge Function)
import type { VercelRequest, VercelResponse } from '@vercel/node';

export default async function handler(req: VercelRequest, res: VercelResponse) {
    if (req.method !== 'POST') {
        return res.status(405).json({ error: 'Method not allowed' });
    }

    const { name, email, message } = req.body;

    // Відправити через Resend
    const response = await fetch('https://api.resend.com/emails', {
        method: 'POST',
        headers: {
            Authorization: `Bearer ${process.env.RESEND_API_KEY}`,
            'Content-Type': 'application/json',
        },
        body: JSON.stringify({
            from: '[email protected]',
            to: '[email protected]',
            subject: `Нове повідомлення від ${name}`,
            html: `<p>${message}</p>`,
        }),
    });

    return res.status(response.ok ? 201 : 500).json({ ok: response.ok });
}

Автоматизація з GitHub Actions

Для автоматизації деплою використовуємо GitHub Actions. При пуші в main деплоїться production, при відкритті PR — preview. Приклад workflow:

# .github/workflows/deploy.yml
name: Deploy to Vercel

on:
  push:
    branches: [main]
  pull_request:
    branches: [main]

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4

      - name: Deploy to Vercel
        uses: amondnet/vercel-action@v25
        with:
          vercel-token: ${{ secrets.VERCEL_TOKEN }}
          vercel-org-id: ${{ secrets.VERCEL_ORG_ID }}
          vercel-project-id: ${{ secrets.VERCEL_PROJECT_ID }}
          vercel-args: ${{ github.event_name == 'push' && '--prod' || '' }}

Змінні оточення для різних оточень

# Додати через CLI
vercel env add DATABASE_URL production
vercel env add API_KEY preview

# Переглянути
vercel env ls

У Vercel Dashboard → Project → Settings → Environment Variables. Різні значення для Production, Preview, Development. Не зберігайте ключі в коді — використовуйте сервісні акаунти.

Як налаштувати Preview Deployments?

Кожен PR автоматично отримує унікальний URL виду myapp-git-feature-branch-org.vercel.app. Корисно для рев'ю дизайну, QA-тестування. Можна додати Basic Auth на preview-оточення, вказавши поле authentication у vercel.json.

Як працюють Preview Deployments? Кожен PR автоматично деплоїться на унікальний URL з власним екземпляром додатку та ізольованими змінними оточен. Це дозволяє тестувати зміни в умовах, ідентичних продакшену, до мержу. Для приватності можна налаштувати Basic Auth.

Чому Vercel виграє у традиційного хостингу?

Vercel деплоить в 5 разів швидше за традиційний хостинг. Деплой займає 2-5 хвилин проти 5-30 хвилин. Preview Deployments доступні автоматично, а Serverless Functions вбудовані. CDN охоплює 100+ точок. Ціна — безкоштовний старт, Pay-as-you-go, тоді як традиційний хостинг має фіксовану плату.

Один з клієнтів після міграції на Vercel скоротив витрати на інфраструктуру з $800 до $400 на місяць, тобто на 50%. Звертайтеся до нас за консультацією — підберемо оптимальну конфігурацію.

Що входить в роботу?

• Аудит поточного репозиторію та конфігурації збірки
• Налаштування Vercel проєкту (змінні оточення, домени, SSL)
• Оптимізація Serverless Functions (розбиття, кешування, помилки)
• Налаштування CI/CD через GitHub Actions або GitLab CI
• Документація з деплою та архітектури
• Навчання команди роботі з Preview Deployments
• Підтримка протягом 2 тижнів після здачі

Обмеження Vercel

Vercel має кілька обмежень: Serverless Functions не можуть виконуватися більше 10 секунд (до 60 секунд на Pro-тарифі), не підтримуються постійні з'єднання WebSocket, а PHP-додатки (Laravel) не працюють у Serverless середовищі. Для таких сценаріїв краще використовувати традиційний хостинг або Edge Runtime.

Терміни та вартість

Підключення Next.js/React-проєкту до Vercel: 4–8 годин включаючи налаштування змінних та доменів. Для складних проєктів з кастомними функціями та CI/CD — до 12 годин. Точну оцінку дамо після аналізу вашого репозиторію. Вартість робіт — від $500, що вже включає налаштування під ключ.

Оцініть ваш проект безкоштовно — пишіть нам. Ми налаштуємо Vercel за 2 дні для типових проєктів. До послуг входить: конфігурація, змінні, домен, CI/CD. Замовте налаштування — і забудьте про проблеми з оточеннями. Зв'яжіться з нами для консультації: ми допоможемо налаштувати Vercel під ваш проєкт.

Ми регулярно стикаємося з ситуацією: «Сайт не відкривається» о 3 годині ночі — і виявляється, що disk full на VPS, тому що логи nginx не ротувалися півроку. Або сервер ліг під навантаженням у день запуску рекламної кампанії, тому що на shared хостингу стояв ліміт у 50 одночасних з'єднань. Налаштування хостингу та деплою — це не про «де дешевше», це про те, що відбувається в момент, коли щось іде не так. Наша команда допомагає уникнути таких інцидентів, проектуючи інфраструктуру з урахуванням реальних патернів навантаження.

Коли обирати Vercel та Netlify?

Vercel створений під Next.js — деплой в один push, preview deployments для кожного PR, автоматичний CDN, Edge Functions, ISR без конфігурації. Для фронтенд-проєктів та JAMstack це оптимальний вибір: немає операційного навантаження, time-to-deploy вимірюється хвилинами.

Обмеження реальні: Vercel Serverless Functions запускаються в us-east-1 за замовчуванням (latency для Європи +80–100ms), Function timeout 300 секунд на Pro, Bandwidth 1TB/місяць на Pro. Для важкого backend — потрібні воркери або окремий сервер.

Netlify ближчий до статики та Edge Functions на базі Deno Deploy. Build minutes — основне обмеження на безкоштовному тарифі.

Чому Docker — основа передбачуваного деплою?

«Працює на моїй машині» — класика. Docker вирішує це через контейнеризацію середовища. Але поганий Dockerfile створює нові проблеми.

Типова помилка: копіювати все в образ без .dockerignore, отримувати 800MB образ замість 80MB. node_modules всередині образу важить стільки ж. Правильно: multi-stage build.

FROM node:20-alpine AS builder
WORKDIR /app
COPY package*.json ./
RUN npm ci --only=production
COPY . .
RUN npm run build

FROM node:20-alpine AS runner
WORKDIR /app
COPY --from=builder /app/.next ./.next
COPY --from=builder /app/node_modules ./node_modules
COPY --from=builder /app/package.json ./package.json
EXPOSE 3000
CMD ["npm", "start"]

Підсумковий образ: 180MB замість 1.2GB. Час збірки CI скорочується через layer caching — якщо package.json не змінився, шар з npm ci береться з кешу.

Docker Compose для локальної розробки та простих продакшн-сценаріїв: застосунок + PostgreSQL + Redis в одній конфігурації. Для production на одному сервері — цілком робочий варіант, якщо немає вимог горизонтального масштабування.

Детальніше про контейнеризацію — Wikipedia: Docker.

Як налаштувати Nginx як reverse proxy?

Nginx перед застосунком — стандарт для VPS та виділених серверів. Основні функції: SSL termination, gzip, static files, rate limiting, upstream балансування.

Конфігурація, яку часто роблять неправильно: worker_processes auto — кількість процесів дорівнює числу CPU. worker_connections 1024 — це 1024 на кожний воркер-процес. При 4 CPU та 1024 connections = 4096 одночасних з'єднань. Для високонавантаженого сайту потрібно worker_connections 4096 та налаштування keepalive_timeout 65.

Для статичних ассетів з хешем в імені файлу:

location ~* \.(js|css|woff2|png|webp)$ {
    expires 1y;
    add_header Cache-Control "public, immutable";
}

immutable повідомляє браузеру: не перевіряй цей файл навіть при hard refresh. Правильно працює лише з content-hashed іменами файлів (що робить Vite/webpack за замовчуванням). Документація — Wikipedia: Nginx.

AWS: гнучкість та складність

EC2 + Auto Scaling Group — класика для горизонтального масштабування. AMI з попередньо встановленим застосунком, Launch Template, ASG з min/desired/max instances, Application Load Balancer. При CPU > 70% на 3 хвилини — scale out, при CPU < 30% на 15 хвилин — scale in. Health check через ALB виключає нездорові інстанси з ротації.

ECS Fargate — контейнери без управління EC2. Деплой Docker-образу, задаєте CPU/пам'ять (512 CPU units = 0.5 vCPU, від 512MB пам'яті), Fargate запускає. Дорожче Lambda, але немає cold start та немає timeout-обмежень. Підходить для long-running процесів, WebSocket-серверів, важких воркерів.

RDS для PostgreSQL з Multi-AZ: автоматичний failover за 1–2 хвилини при падінні primary. Read Replicas для масштабування читання. RDS Proxy для connection pooling — Lambda-функції не вміють тримати довгострокові з'єднання, проксі буферизує це.

Kubernetes: коли це виправдано

K8s додає значну операційну складність. Виправданий, коли: кілька команд деплоять незалежні сервіси, потрібне тонке налаштування ресурсів на сервіс, canary deployments та blue/green без простою — вимога.

AWS EKS, GKE або managed k8s від Hetzner (дешевше). Helm charts для стандартних сервісів. Horizontal Pod Autoscaler по CPU та custom metrics (RPS через Prometheus).

Для більшості стартапів та середніх проєктів — Kubernetes надмірний. ECS або Fly.io дають 80% можливостей при 20% операційної складності.

Моніторинг та alerting

Сервер без моніторингу — це очікування інциденту. Мінімальний стек: Prometheus + Grafana (або Grafana Cloud для managed), alerting на disk > 80%, memory > 85%, CPU > 90% за 5 хвилин, error rate > 1%. Uptime через Better Uptime або Upptime (self-hosted).

Logs: Loki + Grafana або CloudWatch Logs Insights. Структуровані JSON-логи (winston, pino) — обов'язково, інакше пошук по логах перетворюється на біль.

Що входить у налаштування хостингу

• Аудит поточної інфраструктури та профілювання навантаження
• Вибір цільової архітектури (VPS, AWS, serverless, Kubernetes)
• Налаштування CI/CD pipeline (GitHub Actions, GitLab CI) з автоматичним деплоєм
• IaC через Terraform або Pulumi (інфраструктура як код)
• Конфігурація Nginx, SSL-сертифікати, HTTP/2, brotli
• Моніторинг та алертинг (Prometheus + Grafana, PagerDuty)
• Документація runbooks та навчання команди

Додатково: пишіть, якщо потрібна міграція з поточного хостингу або інтеграція із зовнішніми сервісами.

Процес роботи

1. Аудит поточної інфраструктури (2–5 днів)
2. Вибір цільової архітектури з обґрунтуванням за навантаженням та бюджетом (1–3 дні)
3. Налаштування CI/CD pipeline (GitHub Actions, GitLab CI) (2–5 днів)
4. IaC через Terraform або Pulumi (3–10 днів)
5. Налаштування моніторингу та alerting (2–5 днів)
6. Документація runbooks та навчання команди (1–3 дні)

Наш досвід — 7 років на ринку, понад 50 проєктів, гарантія працездатності після деплою.

Терміни

• Базовий деплой на VPS з Docker + Nginx + CI/CD: 1–2 тижні.
• Налаштування AWS інфраструктури з Auto Scaling, RDS, CDN: 3–6 тижнів.
• Міграція на EKS з нуля: 6–12 тижнів.
• Налаштування Vercel/Netlify для JAMstack: 3–5 днів.

Вартість розраховується індивідуально залежно від складності та обсягу робіт. Отримайте консультацію — оцінимо вашу архітектуру за один день.