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

Налаштування розгортання сайту на Vercel

Vercel — платформа для розгортання фронтенд-додатків і Serverless Functions. Нативна інтеграція з Next.js (один натиск на кнопку), автоматичні Preview Deployments для кожного PR, глобальний CDN.

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

# Установка CLI
npm install -g vercel

# Розгортання з поточної директорії
vercel

# Розгортання з настройками
vercel --prod          # production
vercel --env preview   # staging

vercel.json

{
    "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

// 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 для Vercel

# .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": {
        "password": "preview-password"
    }
}

Обмеження Vercel

• Serverless Functions: максимум 10 секунд виконання (Pro: 60 сек)
• Не підходить для додатків з постійними з'єднаннями (WebSocket) — використовуйте Edge Runtime або окремий сервер
• Бекенд на PHP/Laravel — недоступно (тільки Node.js/Python/Go через Serverless)

Терміни реалізації

Підключення Next.js/React-проекту до Vercel: 4–8 годин включаючи настройку змінних і доменів.