Vercel

Зачем нужно

Vercel — платформа для деплоя фронтенд-приложений. Подключаешь GitHub-репозиторий — и каждый push автоматически деплоит сайт. Zero-config для Next.js, React, Vue, Svelte и других фреймворков. Бесплатный план покрывает учебные и pet-проекты.

Где используется

  • Фронтенд-проекты — деплой React, Vue, Angular, Svelte
  • Next.js — нативная поддержка SSR, ISR, API Routes
  • Portfolio — хостинг персонального сайта
  • RS School проекты — быстрый деплой для ревью

Deployment из GitHub

Шаг 1: Подключение репозитория

  1. Зайди на vercel.com → Sign up with GitHub
  2. New Project → Import Git Repository
  3. Выбери репозиторий → Configure Project
  4. Vercel автоматически определит фреймворк
  5. Deploy

Шаг 2: Автоматический деплой

Push to main → Vercel auto-build → Production URL
                                    https://my-app.vercel.app

Push to branch → Vercel auto-build → Preview URL
                                      https://my-app-git-feature-user.vercel.app

PR created → Vercel auto-build → Preview URL + comment in PR

Настройки сборки (Build Settings)

Фреймворк Build Command Output Directory
React (CRA) npm run build build
Vite npm run build dist
Next.js npm run build .next()
Vue CLI npm run build dist
Angular npm run build dist/project-name

Serverless Functions

Vercel позволяет создавать серверные функции без отдельного бэкенда.

project/
├── api/                ← серверные функции
│   ├── hello.js        ← GET /api/hello
│   ├── users.js        ← GET /api/users
│   └── posts/
│       └── [id].js     ← GET /api/posts/:id
├── src/
└── package.json

// api/hello.js
export default function handler(req, res) {
  res.status(200).json({ message: 'Hello from Vercel!' });
}

// api/posts/[id].js — динамический роут
export default function handler(req, res) {
  const { id } = req.query;
  res.status(200).json({ postId: id });
}

// api/data.js — разные HTTP-методы
export default function handler(req, res) {
  if (req.method === 'GET') {
    res.json({ items:  });
  } else if (req.method === 'POST') {
    const body = req.body;
    res.status(201).json({ created: body });
  } else {
    res.status(405).json({ error: 'Method not allowed' });
  }
}

Environment Variables

Через Dashboard

Project Settings → Environment Variables

Variable Name     Value              Environment
VITE_API_URL      https://api.com    Production
VITE_API_URL      https://staging    Preview
DATABASE_URL      postgres://...     Production
API_SECRET        sk-xxx             Production, Preview

Через CLI

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

# Добавить переменную
vercel env add API_KEY production

# Список переменных
vercel env ls

# Скачать .env для локальной разработки
vercel env pull .env.local

В коде (Vite)

// Переменные с префиксом VITE_ доступны в клиентском коде
const apiUrl = import.meta.env.VITE_API_URL;

// Серверные переменные (serverless functions)
const dbUrl = process.env.DATABASE_URL; // без VITE_

Preview Deployments

Каждый PR автоматически получает уникальный URL для просмотра.

PR #42: feature/dark-mode
→ Preview: https://my-app-git-feature-dark-mode-user.vercel.app

PR #43: fix/header-bug
→ Preview: https://my-app-git-fix-header-bug-user.vercel.app

Vercel добавляет комментарий в PR с ссылкой на preview.

Custom Domain

Подключение домена

  1. Project Settings → Domains
  2. Введи домен: mysite.com
  3. Добавь DNS-записи у регистратора:
Type    Name    Value
A       @       76.76.21.21
CNAME   www     cname.vercel-dns.com

vercel.json() — конфигурация

{
  "rewrites": [
    { "source": "/api/(.*)", "destination": "/api/$1" },
    { "source": "/(.*)", "destination": "/index.html" }
  ],
  "redirects": [
    { "source": "/old-page", "destination": "/new-page", "permanent": true }
  ],
  "headers": [
    {
      "source": "/api/(.*)",
      "headers": [
        { "key": "Access-Control-Allow-Origin", "value": "*" }
      ]
    }
  ]
}

Vercel CLI

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

# Логин
vercel login

# Деплой из текущей директории
vercel

# Деплой в production
vercel --prod

# Локальная разработка с Vercel-фичами
vercel dev

Частые ошибки

Ошибка Проблема Решение
Build failed Ошибка сборки Проверь логи в Dashboard
404 на SPA-роутах Нет rewrites Добавь rewrite "/(.*)" → /index.html"
Env variables не видны Нет префикса VITE_ Добавь VITE_ для клиентских переменных
Serverless function timeout Долгий запрос (>10s free) Оптимизируй запрос, используй кэш
Не обновляется Кэш Redeploy без кэша в Dashboard

Практика

  1. Задеплой React/Vite приложение на Vercel из GitHub
  2. Настрой environment variables для API URL
  3. Создай serverless function /api/hello
  4. Открой preview deployment для PR
  5. Подключи кастомный домен (или поддомен)

Связанные темы

Ресурсы