Какую CI использовал?

Какую CI использовал?

CI/CD (Continuous Integration/Continuous Deployment) - важная часть современной разработки. Расскажу о популярных инструментах и опыте их использования.

Основные CI/CD платформы

1. GitHub Actions (самая популярная)

name: CI/CD

on:
  push:
    branches: [main, develop]
  pull_request:
    branches: [main]

jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      
      - name: Setup Node.js
        uses: actions/setup-node@v3
        with:
          node-version: '18'
      
      - name: Install dependencies
        run: npm ci
      
      - name: Run linting
        run: npm run lint
      
      - name: Run tests
        run: npm run test:run
      
      - name: Build
        run: npm run build
      
      - name: Upload coverage
        uses: codecov/codecov-action@v3
        with:
          file: ./coverage/coverage-final.json

Плюсы:

• Встроена в GitHub
• Бесплатна для public репозиториев
• 2000 минут в месяц для private
• Отличная интеграция с Pull Requests
• Большой marketplace экшенов

Минусы:

• Привязана к GitHub
• Медленнее чем на собственных серверах
• Ограничение по времени выполнения

2. GitLab CI/CD

image: node:18

stages:
  - test
  - build
  - deploy

test:
  stage: test
  script:
    - npm ci
    - npm run lint
    - npm run test:run
  coverage: '/Coverage: \d+\.\d+%/'
  artifacts:
    reports:
      coverage_report:
        coverage_format: cobertura
        path: coverage/cobertura-coverage.xml

build:
  stage: build
  script:
    - npm run build
  artifacts:
    paths:
      - .next/
      - out/
    expire_in: 1 hour

deploy:
  stage: deploy
  script:
    - echo "Deploying to production"
  only:
    - main
  when: manual

Плюсы:

• Встроена в GitLab
• Собственные runner-ы (быстрее)
• Бесплатна в Community Edition
• DevOps функциональность

Минусы:

• Требует настройки runner-ов для скорости
• Менее популярна чем GitHub Actions

3. CircleCI

version: 2.1

jobs:
  test:
    docker:
      - image: node:18
    steps:
      - checkout
      - run:
          name: Install dependencies
          command: npm ci
      - run:
          name: Run linting
          command: npm run lint
      - run:
          name: Run tests
          command: npm run test:run
      - store_artifacts:
          path: coverage
          destination: coverage-report

  build:
    docker:
      - image: node:18
    steps:
      - checkout
      - run: npm ci
      - run: npm run build

workflows:
  test-and-build:
    jobs:
      - test
      - build:
          requires:
            - test

Плюсы:

• Быстрые серверы
• Хорошая документация
• Интеграция с Docker

Минусы:

• Платный (хотя есть free tier)
• Требует настройки

4. Jenkins (для больших проектов)

pipeline {
    agent any
    
    stages {
        stage('Checkout') {
            steps {
                git 'https://github.com/user/repo.git'
            }
        }
        
        stage('Install') {
            steps {
                sh 'npm ci'
            }
        }
        
        stage('Lint') {
            steps {
                sh 'npm run lint'
            }
        }
        
        stage('Test') {
            steps {
                sh 'npm run test:run'
            }
        }
        
        stage('Build') {
            steps {
                sh 'npm run build'
            }
        }
        
        stage('Deploy') {
            when {
                branch 'main'
            }
            steps {
                sh 'npm run deploy'
            }
        }
    }
    
    post {
        always {
            junit 'test-results/**/*.xml'
            publishHTML([
                reportDir: 'coverage',
                reportFiles: 'index.html',
                reportName: 'Coverage Report'
            ])
        }
    }
}

Плюсы:

• Полная кастомизация
• Собственные серверы (полный контроль)
• Мощная экосистема плагинов

Минусы:

• Требует настройки и обслуживания
• Сложна в начале
• Нужны ресурсы

Лучшие практики CI/CD для Frontend

1. Быстрые проверки на каждый PR

on:
  pull_request:
    branches: [main]

jobs:
  quality:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
      - run: npm ci
      - run: npm run lint      # 30 сек
      - run: npm run test:run  # 60 сек
      - run: npm run build     # 90 сек
      # Итого: 3 минуты

2. Кеширование зависимостей

- uses: actions/cache@v3
  with:
    path: ~/.npm
    key: ${{ runner.os }}-npm-${{ hashFiles('**/package-lock.json') }}
    restore-keys: |
      ${{ runner.os }}-npm-

3. Параллельные jobs

jobs:
  lint:
    runs-on: ubuntu-latest
    steps:
      - run: npm run lint
  
  test:
    runs-on: ubuntu-latest
    steps:
      - run: npm run test:run
  
  build:
    runs-on: ubuntu-latest
    steps:
      - run: npm run build
  
  e2e:
    runs-on: ubuntu-latest
    needs: [build]
    steps:
      - run: npm run test:e2e

4. Автоматический деплой

deploy:
  runs-on: ubuntu-latest
  needs: [lint, test, build]
  if: github.ref == 'refs/heads/main'
  steps:
    - uses: actions/checkout@v3
    - run: npm ci
    - run: npm run build
    - uses: peaceiris/actions-gh-pages@v3
      with:
        github_token: ${{ secrets.GITHUB_TOKEN }}
        publish_dir: ./out

Что проверять в CI для Frontend

1. Статический анализ

npm run lint       # ESLint, Prettier
npm run type-check # TypeScript типы

2. Тестирование

npm run test:run           # Unit тесты
npm run test:e2e           # E2E тесты
npm run test:coverage      # Coverage >= 90%

3. Сборка

npm run build    # Успешная компиляция

4. Производительность

npm run analyze  # Bundle size анализ
# Проверка что bundle не растёт

Реальный пример из опыта

name: Frontend CI

on: [push, pull_request]

jobs:
  quality:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: '18'
          cache: 'npm'
      
      - run: npm ci
      - run: npm run lint
      - run: npm run test:run
      - run: npm run build
      
      - if: failure() && github.event_name == 'pull_request'
        uses: actions/github-script@v6
        with:
          script: |
            github.rest.issues.createComment({
              issue_number: context.issue.number,
              owner: context.repo.owner,
              repo: context.repo.repo,
              body: '❌ CI failed. Please check the logs.'
            })
      
      - if: success() && github.event_name == 'pull_request'
        uses: actions/github-script@v6
        with:
          script: |
            github.rest.issues.createComment({
              issue_number: context.issue.number,
              owner: context.repo.owner,
              repo: context.repo.repo,
              body: '✅ All checks passed!'
            })

  deploy:
    needs: quality
    if: github.ref == 'refs/heads/main'
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
      - run: npm ci
      - run: npm run build
      - uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./out

Итог

Для Frontend проектов рекомендую:

• GitHub Actions - если код на GitHub (простой и бесплатный)
• GitLab CI - если код на GitLab (встроенный runner)
• CircleCI - если нужна скорость и нет ограничений по бюджету
• Jenkins - если это enterprise и нужна полная кастомизация

Независимо от выбора CI, главное:

• Быстрые проверки (< 5 минут)
• Параллелизм (lint, test, build одновременно)
• Блокировка merge с ошибками
• Автоматический деплой после merge в main