Настройка деплоя сайта на 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 часов включая настройку переменных и доменов.