Настройка CI/CD для frontend: pipeline, preview, quality gates

Введение. CI/CD для Next.js — это не только deploy, а контроль качества на каждом PR с preview для дизайна и SEO. Материал для product- и engineering-лидеров, которые принимают решения на горизонте 12–24 месяцев, а не гонятся за хайпом в презентации.

Что получите на выходе

Большинство срывов в теме «CI/CD для frontend» начинается не с кода, а с размытого scope: маркетинг обещает одно, продажи фиксируют другое, а ИТ закрывает техдолг третьим приоритетом. В итоге бюджет уходит в интеграции «на скотч» и ручные сверки в Excel. Мы видим это в проектах, где не описаны границы MVP, нет владельца метрик и не зафиксированы SLA на данные между системами.

Команда теряет 20–40% спринтов на переделки, потому что не согласовала критерии готовности: что считается лидом, какая атрибуция в CRM, какой latency API допустим для витрины. Без этих договорённостей любая архитектура — лотерея.

Подготовка окружения

Опорный принцип: сначала поток ценности, потом стек. Нарисуйте journey от первого касания до оплаты и поддержки, отметьте ручные шаги и точки отказа. Только после этого выбирайте CI/CD и модель данных. Для CI/CD для frontend мы обычно рекомендуем PR → lint/test/build → preview URL → main → production + smoke: она даёт предсказуемый TCO и не блокирует масштабирование команды.

Зафиксируйте ADR по ключевым решениям: хранилище, очереди, авторизация, наблюдаемость. Включите в Definition of Done контрактные тесты API, схему событий и политику миграций. frontend имеет смысл заказывать только когда есть согласованный backlog с приоритетами P0/P1 и измеримые KPI на квартал.

Наблюдаемость — не «логи на сервере», а корреляция user_id → trace_id → заказ. Без этого невозможно честно считать ROI и оптимизировать воронку. Добавьте дашборды для продуктовых и инженерных метрик в одном timezone и с единым справочником статусов.

Шаги внедрения

Кейс A (продуктовая команда). Клиент пришёл с болью: ручные регрессии перед релизом. Мы разбили релиз на три волны: стабилизация данных, автоматизация рутины, персонализация. Через 14 недель e2e на критичных путях сократило инциденты на 45%. Критично было не «переписать всё», а остановить утечку лидов на стыке каналов.

Кейс B (агентство). Другая ситуация: много проектов. Здесь сработала обратная стратегия — сначала интеграция с CRM и нормализация справочников, затем редизайн витрины. Итог: шаблон pipeline с matrix снизил время onboarding devops.

Как проверить результат

1. Выбор технологии до описания доменных границ.
2. Отсутствие каталога событий аналитики — спор о цифрах вместо роста.
3. «Временный» монолит без модульных контрактов, который нельзя резать на сервисы.
4. Игнорирование non-functional requirements: RPO/RTO, лимиты PII, требования 152-ФЗ.
5. Параллельный редизайн и миграция данных без feature flags.

Типичные сбои

• [ ] Есть единый glossary для бизнеса и разработки
• [ ] KPI привязаны к измеримым событиям в продукте
• [ ] Описаны интеграции и владельцы данных
• [ ] План релизов с rollback и мониторингом
• [ ] Оценён TCO на 3 года, а не только CAPEX первого спринта
• [ ] Согласованы критерии приёмки с заказчиком и поддержкой

Следующий шаг

Свяжите с design system и visual regression. Если нужна внешняя экспертиза — начните с брифа или оценки: так быстрее получить реалистичный план, чем спорить о стеке в вакууме.

Зафиксируйте в README командный порядок hotfix: кто approves, какой tag, как уведомляется поддержка. Для monorepo добавьте affected-only builds — pipeline не должен собирать весь мир на правку typo в README.

• Кэш зависимостей в CI
• Секреты через vault, не в репо
• Protected branches

Pipeline frontend

CI/CD для frontend: lint → typecheck → unit → build → e2e smoke → deploy preview → production с manual approval или canary. Кэшируйте node_modules и build artifacts. Preview на каждый PR ускоряет review дизайна. Secrets — только в CI vault, не в репозитории. Для Next.js на Vercel часть шагов встроена; self-hosted — GitHub Actions + Docker + nginx.

Включите Lighthouse CI или аналог на критичных URL — регресс perf ловят до merge. Версионируйте env: staging максимально близок к prod. Документируйте, как откатить релиз за 5 минут. Услуга CI/CD имеет смысл, когда команда тратит >4 ч/нед на ручные деплои.

Branch protection: required checks, no direct push main. Dependabot + policy на critical CVE. Artifact signing для production deploy. Уведомления в Slack при failed deploy on main. Раз в квартал — game day: симуляция падения CI и восстановление из backup config. Если команда <5 человек, не усложняйте — один pipeline с preview часто достаточен.

Храните production env в encrypted secrets; diff env staging/prod должен быть осознанным, не «случайно забыли ключ».