Налаштування деплою на Netlify: збірка, домени, функції

Ваш 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:

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 — ручний, без прев'ю. Що зробили:

1. Створили netlify.toml з розділенням на контексти (production, branch-deploy, deploy-preview).
2. Налаштували функцію contact.ts для відправки листів через Resend.
3. Підключили GitHub Actions для деплою — тільки на push в main та develop.
4. Увімкнули Netlify Forms як fallback для збору даних.

Результат: деплой автоматичний, прев'ю для PR — за 1 хвилину, економія 4 годин ручної роботи на тиждень. Netlify налаштовується швидше Vercel у 2–3 рази для статичних сайтів.

Конфігурація 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 — в продуктивності Edge Functions, Cloudflare — в глобальній мережі та ціні.

Процес роботи

1. Аналіз — вивчаємо поточний репозиторій, білд-скрипти, залежності.
2. Проектування — визначаємо контексти (production, staging, preview), змінні оточення, функції.
3. Реалізація — пишемо netlify.toml, функції, CI/CD (GitHub Actions / GitLab CI).
4. Тестування — деплой в preview-оточення, перевірка редиректів, заголовків та часу збірки.
5. Запуск — перемикання 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 під ключ і забудьте про ручні деплої назавжди.

Ми регулярно стикаємося з ситуацією: «Сайт не відкривається» о 3 годині ночі — і виявляється, що disk full на VPS, тому що логи nginx не ротувалися півроку. Або сервер ліг під навантаженням у день запуску рекламної кампанії, тому що на shared хостингу стояв ліміт у 50 одночасних з'єднань. Налаштування хостингу та деплою — це не про «де дешевше», це про те, що відбувається в момент, коли щось іде не так. Наша команда допомагає уникнути таких інцидентів, проектуючи інфраструктуру з урахуванням реальних патернів навантаження.

Коли обирати Vercel та Netlify?

Vercel створений під Next.js — деплой в один push, preview deployments для кожного PR, автоматичний CDN, Edge Functions, ISR без конфігурації. Для фронтенд-проєктів та JAMstack це оптимальний вибір: немає операційного навантаження, time-to-deploy вимірюється хвилинами.

Обмеження реальні: Vercel Serverless Functions запускаються в us-east-1 за замовчуванням (latency для Європи +80–100ms), Function timeout 300 секунд на Pro, Bandwidth 1TB/місяць на Pro. Для важкого backend — потрібні воркери або окремий сервер.

Netlify ближчий до статики та Edge Functions на базі Deno Deploy. Build minutes — основне обмеження на безкоштовному тарифі.

Чому Docker — основа передбачуваного деплою?

«Працює на моїй машині» — класика. Docker вирішує це через контейнеризацію середовища. Але поганий Dockerfile створює нові проблеми.

Типова помилка: копіювати все в образ без .dockerignore, отримувати 800MB образ замість 80MB. node_modules всередині образу важить стільки ж. Правильно: multi-stage build.

FROM node:20-alpine AS builder
WORKDIR /app
COPY package*.json ./
RUN npm ci --only=production
COPY . .
RUN npm run build

FROM node:20-alpine AS runner
WORKDIR /app
COPY --from=builder /app/.next ./.next
COPY --from=builder /app/node_modules ./node_modules
COPY --from=builder /app/package.json ./package.json
EXPOSE 3000
CMD ["npm", "start"]

Підсумковий образ: 180MB замість 1.2GB. Час збірки CI скорочується через layer caching — якщо package.json не змінився, шар з npm ci береться з кешу.

Docker Compose для локальної розробки та простих продакшн-сценаріїв: застосунок + PostgreSQL + Redis в одній конфігурації. Для production на одному сервері — цілком робочий варіант, якщо немає вимог горизонтального масштабування.

Детальніше про контейнеризацію — Wikipedia: Docker.

Як налаштувати Nginx як reverse proxy?

Nginx перед застосунком — стандарт для VPS та виділених серверів. Основні функції: SSL termination, gzip, static files, rate limiting, upstream балансування.

Конфігурація, яку часто роблять неправильно: worker_processes auto — кількість процесів дорівнює числу CPU. worker_connections 1024 — це 1024 на кожний воркер-процес. При 4 CPU та 1024 connections = 4096 одночасних з'єднань. Для високонавантаженого сайту потрібно worker_connections 4096 та налаштування keepalive_timeout 65.

Для статичних ассетів з хешем в імені файлу:

location ~* \.(js|css|woff2|png|webp)$ {
    expires 1y;
    add_header Cache-Control "public, immutable";
}

immutable повідомляє браузеру: не перевіряй цей файл навіть при hard refresh. Правильно працює лише з content-hashed іменами файлів (що робить Vite/webpack за замовчуванням). Документація — Wikipedia: Nginx.

AWS: гнучкість та складність

EC2 + Auto Scaling Group — класика для горизонтального масштабування. AMI з попередньо встановленим застосунком, Launch Template, ASG з min/desired/max instances, Application Load Balancer. При CPU > 70% на 3 хвилини — scale out, при CPU < 30% на 15 хвилин — scale in. Health check через ALB виключає нездорові інстанси з ротації.

ECS Fargate — контейнери без управління EC2. Деплой Docker-образу, задаєте CPU/пам'ять (512 CPU units = 0.5 vCPU, від 512MB пам'яті), Fargate запускає. Дорожче Lambda, але немає cold start та немає timeout-обмежень. Підходить для long-running процесів, WebSocket-серверів, важких воркерів.

RDS для PostgreSQL з Multi-AZ: автоматичний failover за 1–2 хвилини при падінні primary. Read Replicas для масштабування читання. RDS Proxy для connection pooling — Lambda-функції не вміють тримати довгострокові з'єднання, проксі буферизує це.

Kubernetes: коли це виправдано

K8s додає значну операційну складність. Виправданий, коли: кілька команд деплоять незалежні сервіси, потрібне тонке налаштування ресурсів на сервіс, canary deployments та blue/green без простою — вимога.

AWS EKS, GKE або managed k8s від Hetzner (дешевше). Helm charts для стандартних сервісів. Horizontal Pod Autoscaler по CPU та custom metrics (RPS через Prometheus).

Для більшості стартапів та середніх проєктів — Kubernetes надмірний. ECS або Fly.io дають 80% можливостей при 20% операційної складності.

Моніторинг та alerting

Сервер без моніторингу — це очікування інциденту. Мінімальний стек: Prometheus + Grafana (або Grafana Cloud для managed), alerting на disk > 80%, memory > 85%, CPU > 90% за 5 хвилин, error rate > 1%. Uptime через Better Uptime або Upptime (self-hosted).

Logs: Loki + Grafana або CloudWatch Logs Insights. Структуровані JSON-логи (winston, pino) — обов'язково, інакше пошук по логах перетворюється на біль.

Що входить у налаштування хостингу

• Аудит поточної інфраструктури та профілювання навантаження
• Вибір цільової архітектури (VPS, AWS, serverless, Kubernetes)
• Налаштування CI/CD pipeline (GitHub Actions, GitLab CI) з автоматичним деплоєм
• IaC через Terraform або Pulumi (інфраструктура як код)
• Конфігурація Nginx, SSL-сертифікати, HTTP/2, brotli
• Моніторинг та алертинг (Prometheus + Grafana, PagerDuty)
• Документація runbooks та навчання команди

Додатково: пишіть, якщо потрібна міграція з поточного хостингу або інтеграція із зовнішніми сервісами.

Процес роботи

1. Аудит поточної інфраструктури (2–5 днів)
2. Вибір цільової архітектури з обґрунтуванням за навантаженням та бюджетом (1–3 дні)
3. Налаштування CI/CD pipeline (GitHub Actions, GitLab CI) (2–5 днів)
4. IaC через Terraform або Pulumi (3–10 днів)
5. Налаштування моніторингу та alerting (2–5 днів)
6. Документація runbooks та навчання команди (1–3 дні)

Наш досвід — 7 років на ринку, понад 50 проєктів, гарантія працездатності після деплою.

Терміни

• Базовий деплой на VPS з Docker + Nginx + CI/CD: 1–2 тижні.
• Налаштування AWS інфраструктури з Auto Scaling, RDS, CDN: 3–6 тижнів.
• Міграція на EKS з нуля: 6–12 тижнів.
• Налаштування Vercel/Netlify для JAMstack: 3–5 днів.

Вартість розраховується індивідуально залежно від складності та обсягу робіт. Отримайте консультацію — оцінимо вашу архітектуру за один день.