Налаштування деплою сайту на Vercel під ключ
Уявіть: ви запускаєте деплой Vercel, але на проді вилазить помилка, якої не було на локалі. Hydration mismatch, неправильні змінні оточення, або PR-рев'ю затягується через відсутність готового прев'ю-посилання. Ми стикалися з цим десятки разів і знаємо, як налаштувати Vercel так, щоб деплой перестав бути вузьким місцем. В одному проєкті з Next.js 14 ми оптимізували Serverless Functions, розбивши монолітну функцію на кілька мікросервісів — це скоротило час відповіді API на 40% і зменшило холодний старт з 3 секунд до 200 мс. Додатково це знизило витрати на Serverless Functions приблизно на $200 на місяць.
Ми — команда інженерів з 5+ років досвіду розробки на 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 — це модель виконання в хмарі, де постачальник хмарних послуг динамічно керує виділенням та налаштуванням серверів. (Wikipedia: Serverless computing). 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 деплоить в 5 разів швидше за традиційний хостинг. Деплой займає 2-5 хвилин проти 5-30 хвилин. Preview Deployments доступні автоматично, а Serverless Functions вбудовані. CDN охоплює 100+ точок. Ціна — безкоштовний старт, Pay-as-you-go, тоді як традиційний хостинг має фіксовану плату.
Один з клієнтів після міграції на Vercel скоротив витрати на інфраструктуру з $800 до $400 на місяць, тобто на 50%. Звертайтеся до нас за консультацією — підберемо оптимальну конфігурацію.
Що входить в роботу?
- Аудит поточного репозиторію та конфігурації збірки
- Налаштування 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 годин. Точну оцінку дамо після аналізу вашого репозиторію. Вартість робіт — від $500, що вже включає налаштування під ключ.
Оцініть ваш проект безкоштовно — пишіть нам. Ми налаштуємо Vercel за 2 дні для типових проєктів. До послуг входить: конфігурація, змінні, домен, CI/CD. Замовте налаштування — і забудьте про проблеми з оточеннями. Зв'яжіться з нами для консультації: ми допоможемо налаштувати Vercel під ваш проєкт.