Что такое CI/CD

Зачем нужно

CI/CD — набор практик автоматизации доставки кода от коммита до продакшена. Вместо ручной проверки, сборки и деплоя всё происходит автоматически при каждом push. Это снижает количество багов, ускоряет релизы и делает процесс предсказуемым.

Где используется

  • Любой командный проект — автоматические проверки PR
  • Open-source — валидация вклада контрибьюторов
  • Продакшен — автоматический деплой после мержа
  • Учебные проекты RS School — автоматическая проверка заданий

Три части CI/CD

Continuous Integration (CI) — Непрерывная интеграция

Автоматическая проверка кода при каждом push/PR.

Developer → Push → CI Pipeline
                    ├── Lint (ESLint, Prettier)
                    ├── Build (TypeScript, Webpack)
                    ├── Unit Tests (Jest, Vitest)
                    └── Result: Pass/Fail

Цель: ловить ошибки как можно раньше.

Continuous Delivery — Непрерывная доставка

Код всегда готов к деплою после прохождения CI. Деплой запускается вручную (кнопкой).

CI Pass → Staging Deploy (auto) → Manual Approval → Production Deploy

Continuous Deployment — Непрерывное развёртывание

Код автоматически деплоится на продакшен после прохождения всех проверок.

CI Pass → Staging Deploy → Auto Tests → Production Deploy (auto)

Разница Delivery vs Deployment:

Delivery Deployment
Деплой на прод Вручную Автоматически
Риск Ниже (есть контроль) Требует отличное покрытие тестами
Подходит для Большинства проектов Зрелых проектов с высоким покрытием

Концепция Pipeline

Pipeline (пайплайн) — последовательность автоматических шагов.

┌─────────┐   ┌─────────┐   ┌─────────┐   ┌─────────┐   ┌─────────┐
│  Source  │──▶│  Build  │──▶│  Test   │──▶│ Staging │──▶│  Prod   │
│  (Git)  │   │         │   │         │   │ Deploy  │   │ Deploy  │
└─────────┘   └─────────┘   └─────────┘   └─────────┘   └─────────┘

Типичные шаги пайплайна

# Псевдокод пайплайна
pipeline:
  # 1. Качество кода
  - lint:
      run: npm run lint

  # 2. Сборка
  - build:
      run: npm run build

  # 3. Тесты
  - test:
      run: npm test
      run: npm run test:e2e

  # 4. Безопасность
  - security:
      run: npm audit

  # 5. Деплой на staging
  - deploy-staging:
      run: deploy --env staging
      when: branch == main

  # 6. Деплой на production
  - deploy-production:
      run: deploy --env production
      when: tag == v*

Преимущества CI/CD

Без CI/CD С CI/CD
Ошибки находят поздно Ошибки находят сразу
«Работает у меня» Единая среда проверки
Ручной деплой (страшно) Автоматический деплой (предсказуемо)
Долгие релизы Частые маленькие релизы
Код-ревью без контекста Линтер + тесты до ревью

Популярные CI/CD инструменты

Инструмент Тип Особенности
GitHub Actions Cloud Встроен в GitHub, бесплатный для public repos
GitLab CI Cloud/Self-hosted Встроен в GitLab, мощный
Jenkins Self-hosted Гибкий, много плагинов, сложный
CircleCI Cloud Быстрый, хороший для open-source
Travis CI Cloud Простой, популярный для open-source
Vercel Cloud Автодеплой для фронтенда
Netlify Cloud Автодеплой для статических сайтов

Минимальный CI для фронтенд-проекта

# Что проверять при каждом PR:
checks:
  - npm ci              # установка зависимостей
  - npm run lint         # проверка стиля кода
  - npm run build        # проект собирается без ошибок
  - npm test             # тесты проходят

Ключевые принципы

  1. Коммить часто — маленькие изменения легче проверять
  2. Не ломай main — все проверки должны проходить до мержа
  3. Быстрый фидбек — CI должен работать быстро (< 10 мин)
  4. Одинаковый процесс — dev, staging и prod используют один pipeline
  5. Автоматизируй всё — если делаешь вручную больше 2 раз, автоматизируй

Частые ошибки

Ошибка Проблема Решение
CI проходит, а локально нет Разные версии Node/npm Фиксируй версии в CI и .nvmrc
Секреты в коде Утечка ключей API Используй secrets/переменные окружения
Долгий CI (30+ мин) Нет кэширования Кэшируй node_modules, образы
Тесты в CI flaky Случайные падения Изолируй тесты, убери зависимости от времени
Нет CI для PR Баги попадают в main Настрой branch protection + CI

Практика

  1. Изучи вкладку Actions в любом GitHub-репозитории
  2. Создай простой workflow для lint + build
  3. Настрой автоматическую проверку PR
  4. Добавь бейдж статуса CI в README
  5. Настрой деплой на Vercel/Netlify из GitHub

Связанные темы

Ресурсы