Настройка деплоя на Vercel: конфигурация, Serverless, CI/CD

Настройка деплоя сайта на 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 дают готовую ссылку для ревью ещё до мержа. Это исключает «а на локале работало».

Мы сократили время откатов на 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 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.

Почему Vercel выигрывает у традиционного хостинга?

Один из клиентов после миграции на 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 под ваш проект.