Настройка деплоя сайта на Vercel
Представьте: вы запускаете деплой Vercel, но на проде вылезает ошибка, которой не было на локале. Hydration mismatch, неправильные переменные окружения, или PR-ревью затягивается из-за отсутствия готовой превью-ссылки. Мы сталкивались с этим десятки раз и знаем, как настроить Vercel так, чтобы деплой перестал быть узким местом. В одном проекте с Next.js 14 мы оптимизировали Serverless Functions, разбив монолитную функцию на несколько микросервисов — это сократило время ответа API на 40% и уменьшило холодный старт с 3 секунд до 200 мс. Дополнительно это снизило затраты на Serverless Functions примерно на $200 в месяц.
Мы — команда инженеров с пятилетним опытом разработки на Next.js и React. За это время настроили Vercel для 30+ проектов — от лендингов до сложных дашбордов с Serverless Functions. Гарантируем стабильную работу после деплоя.
Как Vercel решает проблему окружений?
Vercel автоматически создаёт три окружения: Production, Preview и Development. У каждого свои переменные окружения, домены и настройки. Preview Deployments для каждого PR дают готовую ссылку для ревью ещё до мержа. Это исключает «а на локале работало».
| Окружение | Назначение | Переменные окружения |
|---|---|---|
| Production | Рабочий сайт | Боевые ключи API, БД |
| Preview | PR-ревью, тестирование | Тестовые ключи, моки |
| Development | Локальная разработка | Локальные значения |
Мы сократили время откатов на 60% после внедрения Preview Deployments: теперь каждый PR проходит проверку на точной копии продакшена.
Как подключить кастомный домен?
- В панели Vercel откройте проект → Settings → Domains.
- Добавьте домен и настройте DNS-записи (CNAME).
- Дождитесь проверки (обычно 2–5 минут).
- Настройте редиректы (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 is a cloud execution model in which the cloud provider dynamically manages the allocation and provisioning of servers. Wikipedia
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 | Традиционный хостинг |
|---|---|---|
| Время деплоя | 2-5 мин | 5-30 мин |
| Preview Deployments | Автоматически | Нет |
| Serverless Functions | Встроены | Требуют настройки |
| CDN | Глобальный (100+ точек) | Ограничен |
| Цена | Бесплатный старт, Pay-as-you-go | Фиксированная плата |
Один из клиентов после миграции на Vercel сократил расходы на инфраструктуру с $800 до $400 в месяц. Обратитесь к нам за консультацией — подберём оптимальную конфигурацию.
Что входит в работу?
- Аудит текущего репозитория и конфигурации сборки
- Настройка 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 часов. Точную оценку дадим после анализа вашего репозитория. Стоимость рассчитывается индивидуально.
Закажите настройку — и забудьте о проблемах с окружениями. Свяжитесь с нами для консультации: мы поможем настроить Vercel под ваш проект.