Ваш CI/CD пайплайн для JAMstack буксує?
Збірка вашого SPA на React займає 15 хвилин, після деплою ламаються посилання через невірні редиректи, а прев'ю для пулл-реквестів доводиться налаштовувати вручну? Ми стикалися з цим десятки разів. Наша команда (5+ років досвіду з Netlify та 50+ налаштованих проектів) вирішує такі проблеми за пару годин. Гарантуємо: після нашої конфігурації середній час збірки скоротиться до 2–3 хвилин, а прев'ю гілок з'являтиметься за хвилину.
Ми — інженери, які щодня працюють з Netlify, Vercel та Cloudflare Pages. Налаштуємо деплой під ключ: від початкового підключення репозиторію до продакшен-деплою з кастомним доменом, SSL та моніторингом.
Які проблеми ми вирішуємо при деплої на Netlify
Помилки збірки через несумісність оточення
Node.js версія не та, npm cache засмічений, або білд-скрипти використовують глобальні залежності. У netlify.toml ми жорстко фіксуємо версію Node, NPM_FLAGS та оточення: NODE_VERSION = \"20\", NPM_FLAGS = \"--prefer-offline\".
Повільний деплой та перевищення лімітів
Стандартна збірка без кешування може займати 10+ хвилин. Ми використовуємо Netlify Large Media для зображень, а кеш node_modules зберігаємо між збірками. Нижче — порівняння лімітів Free та Pro:
| Параметр | Free | Pro |
|---|---|---|
| Build minutes/місяць | 300 | 1000 (можна докупити) |
| Functions timeout | 10 сек | 26 сек |
| Bandwidth/місяць | 100 GB | 500 GB |
| Concurrent builds | 1 | 5 |
Netlify автоматично скасовує збірку, якщо вона триває більше 15 хвилин. — Netlify Documentation
Неправильні редиректи та заголовки
SPA вимагають перенаправлення всіх маршрутів на index.html, інакше — 404. Проксі на API часто забувають. Наша конфігурація netlify.toml покриває ці випадки:
[[redirects]] from = \"/*\" to = \"/index.html\" status = 200 [[redirects]] from = \"/api/*\" to = \"https://api.example.com/:splat\" status = 200 force = true Як ми налаштовуємо деплой за 30 хвилин (реальний кейс)
Проект: SPA на Vue 3 з контактною формою та кастомним API на Netlify Functions. Спочатку деплой через GitHub Pages — ручний, без прев'ю. Що зробили:
- Створили netlify.toml з розділенням на контексти (production, branch-deploy, deploy-preview).
- Налаштували функцію contact.ts для відправки листів через Resend.
- Підключили GitHub Actions для деплою — тільки на push в main та develop.
- Увімкнули Netlify Forms як fallback для збору даних.
Результат: деплой автоматичний, прев'ю для PR — за 1 хвилину, економія 4 годин ручної роботи на тиждень. Netlify налаштовується швидше Vercel у 2–3 рази для статичних сайтів.
Конфігурація netlify.toml (повна)
Повний конфігураційний файл netlify.toml
[build] command = \"npm run build\" publish = \"dist\" functions = \"netlify/functions\" [build.environment] NODE_VERSION = \"20\" NPM_FLAGS = \"--prefix=/dev/null\" # SPA: редирект усіх маршрутів на index.html [[redirects]] from = \"/*\" to = \"/index.html\" status = 200 # Проксі API [[redirects]] from = \"/api/*\" to = \"https://api.example.com/:splat\" status = 200 force = true # Кастомні заголовки [[headers]] for = \"/*\" [headers.values] X-Frame-Options = \"DENY\" X-Content-Type-Options = \"nosniff\" Referrer-Policy = \"strict-origin-when-cross-origin\" [[headers]] for = \"/assets/*\" [headers.values] Cache-Control = \"public, max-age=31536000, immutable\" # Split testing (A/B) [context.deploy-preview] command = \"npm run build:preview\" [context.branch-deploy] command = \"npm run build:staging\" Netlify Functions для контактної форми
// netlify/functions/contact.ts import type { Handler, HandlerEvent } from '@netlify/functions'; export const handler: Handler = async (event: HandlerEvent) => { if (event.httpMethod !== 'POST') { return { statusCode: 405, body: 'Method Not Allowed' }; } const { name, email, message } = JSON.parse(event.body || '{}'); // Відправка через Nodemailer або Resend await sendEmail({ name, email, message }); return { statusCode: 200, body: JSON.stringify({ success: true }), headers: { 'Content-Type': 'application/json' }, }; }; Альтернатива: вбудовані форми Netlify
Підходять, коли не потрібна кастомна валідація або інтеграція з CRM.
<form name=\"contact\" method=\"POST\" data-netlify=\"true\" netlify-honeypot=\"bot-field\"> <input type=\"hidden\" name=\"form-name\" value=\"contact\"> <p class=\"hidden\"> <label>Don't fill this: <input name=\"bot-field\"></label> </p> <input type=\"text\" name=\"name\" required> <input type=\"email\" name=\"email\" required> <textarea name=\"message\" required></textarea> <button type=\"submit\">Відправити</button> </form> Подані дані доступні в Netlify Dashboard → Forms. Сповіщення налаштовуються там же (email, Slack webhook).
GitHub Actions + Netlify CLI
name: Deploy to Netlify on: push: branches: [main, develop] jobs: deploy: runs-on: ubuntu-latest steps: - uses: actions/checkout@v4 - run: npm ci && npm run build - name: Deploy to Netlify run: | npx netlify-cli deploy \\ --dir=dist \\ --site=${{ secrets.NETLIFY_SITE_ID }} \\ --auth=${{ secrets.NETLIFY_AUTH_TOKEN }} \\ ${{ github.ref == 'refs/heads/main' && '--prod' || '' }} Чому Netlify Functions не підходять для важких обчислень?
Обмеження за часом виконання (10 секунд на безкоштовному плані, 26 на Pro) не дозволяє використовувати їх для обробки відео, генерації PDF або складних ETL-завдань. Для таких випадків ми підключаємо зовнішні сервіси: AWS Lambda, Google Cloud Functions або спеціалізовані черги. Netlify Functions ідеальні для легких API-проксі, відправки пошти та вебхуків.
Netlify vs Vercel vs Cloudflare Pages: що обрати?
| Критерій | Netlify | Vercel | Cloudflare Pages |
|---|---|---|---|
| Підтримка Serverless | Функції (10-26 сек) | Edge Functions (50ms) | Workers (10ms CPU) |
| Вбудовані форми | Так | Ні | Ні |
| Конфігурація | netlify.toml (гнучко) | vercel.json (простіше) | wrangler.toml |
| Оптимальний стек | Статика, SPA, Gatsby | Next.js, Nuxt | JAMstack, Workers |
| Безкоштовний ліміт builds | 300 хв/міс | 6000 хв/міс | 500 builds/міс |
Netlify виграє в простоті налаштування форм та редиректів, Vercel — в продуктивності Edge Functions, Cloudflare — в глобальній мережі та ціні.
Процес роботи
- Аналіз — вивчаємо поточний репозиторій, білд-скрипти, залежності.
- Проектування — визначаємо контексти (production, staging, preview), змінні оточення, функції.
- Реалізація — пишемо netlify.toml, функції, CI/CD (GitHub Actions / GitLab CI).
- Тестування — деплой в preview-оточення, перевірка редиректів, заголовків та часу збірки.
- Запуск — перемикання DNS, перевірка SSL, моніторинг логів.
Строки та вартість
Налаштування типового проекту (SPA/статика) — 4–8 годин. Для проектів з кастомними функціями та інтеграціями — до 16 годин. Вартість розраховується індивідуально після аудиту вашого репозиторію. В середньому проект окупається за рахунок прискорення деплою в 3–5 разів. Економія часу на ручному деплої може становити до $800–1200 на місяць при середньому рівні розробника.
Що входить в роботу
- Робоча конфігурація netlify.toml з розділенням по контекстах.
- Налаштування кастомного домену Netlify та автоматичний SSL.
- Розробка до 5 Netlify Functions (контактні форми, API-проксі).
- Інтеграція з GitHub Actions / GitLab CI.
- Документація з підтримки (як додати нову функцію, як змінити змінні).
- 2 тижні безкоштовної підтримки після деплою.
Чому варто довірити налаштування нам?
- 5+ років досвіду роботи з Netlify та JAMstack-проектами.
- 50+ успішних налаштувань деплою для React, Vue, Angular та Gatsby.
- Сертифіковані спеціалісти з Netlify та CI/CD (GitHub Actions, GitLab CI).
- Гарантія стабільності — після деплою фіксуємо всі параметри, і вони не змінюються без вашого відома.
Зв'яжіться з нами для аудиту вашого поточного деплою — розберемо проблемні місця та запропонуємо оптимізацію. Замовте налаштування Netlify під ключ і забудьте про ручні деплої назавжди.