Настройка деплоя сайта на 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 покрывает эти cases:

[[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>

Submissions доступны в 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 под ключ и забудьте о ручных деплоях навсегда.