← JavaScript/CI/CD: непрерывная интеграция#364 из 383← ПредыдущийСледующий →+20 XP
Полезно по теме:Гайд: как учить JavaScriptПрактика: JS базаПрактика: async и сетьТермин: Closure

CI/CD: непрерывная интеграция

Что такое CI/CD

CI/CD — это набор практик, которые автоматизируют процесс доставки кода от разработчика до пользователя.

  • CI (Continuous Integration) — непрерывная интеграция. Каждый push автоматически запускает сборку и тесты. Цель — ловить баги как можно раньше.
  • CD (Continuous Delivery) — непрерывная доставка. Код всегда готов к деплою, но выкатка происходит вручную по нажатию кнопки.
  • CD (Continuous Deployment) — непрерывное развёртывание. Код автоматически попадает в production после прохождения всех проверок. Никакого ручного вмешательства.
  • CI                    CD (Delivery)         CD (Deployment)
    Push → Build → Test → Ready to deploy →     Auto deploy
                          ↑ ручная кнопка       ↑ автоматически

    Зачем это нужно

    Без CI/CD:

  • Разработчик забыл запустить тесты — баг в production
  • «У меня локально работает» — классическая проблема
  • Деплой вручную по SSH — долго, рискованно, непредсказуемо
  • Конфликты копятся неделями и разрешаются больно
  • С CI/CD:

  • Каждый коммит проверен — тесты, линтер, сборка автоматически
  • Быстрая обратная связь — узнал о баге через 2 минуты, а не через 2 недели
  • Предсказуемый деплой — один и тот же процесс каждый раз
  • Уверенность в коде — зелёный CI = можно мержить
  • GitHub Actions — основы

    GitHub Actions — встроенная CI/CD платформа GitHub. Бесплатна для открытых репозиториев и имеет щедрый лимит для приватных.

    Где живут workflows

    my-project/
    ├── .github/
    │   └── workflows/
    │       ├── ci.yml          # основной CI pipeline
    │       ├── deploy.yml      # деплой
    │       └── lint.yml        # линтер
    ├── src/
    └── package.json

    Файлы workflow — это YAML-файлы в папке .github/workflows/.

    YAML — основы синтаксиса

    YAML — язык разметки для конфигураций. Используется в GitHub Actions, Docker Compose, Kubernetes.

    # Строки
    name: My Workflow
    message: "Hello, World!"
    
    # Списки
    steps:
      - first
      - second
      - third
    
    # Объекты (вложенность через отступы — 2 пробела!)
    job:
      name: Build
      runs-on: ubuntu-latest
    
    # Многострочные строки
    description: |
      Это многострочный текст.
      Каждая строка сохраняется.

    Важно: YAML чувствителен к отступам. Всегда используйте пробелы, не табы!

    Структура GitHub Actions workflow

    # Название workflow (видно во вкладке Actions)
    name: CI
    
    # Триггеры — когда запускать
    on:
      push:
        branches: [main]
      pull_request:
        branches: [main]
    
    # Задачи
    jobs:
      build:
        runs-on: ubuntu-latest
        steps:
          - uses: actions/checkout@v4
          - name: Install dependencies
            run: npm install
          - name: Run tests
            run: npm test

    Ключевые элементы

    | Элемент | Описание |

    |---------|----------|

    | name | Название workflow |

    | on | Когда запускать (триггеры) |

    | jobs | Набор задач для выполнения |

    | runs-on | На какой ОС запускать |

    | steps | Последовательность шагов в задаче |

    | uses | Подключить готовое action |

    | run | Выполнить shell-команду |

    Триггеры (on)

    Push — при каждом push

    on:
      push:
        branches: [main, develop]
        paths:
          - 'src/**'
          - 'package.json'

    Pull Request — при создании/обновлении PR

    on:
      pull_request:
        branches: [main]
        types: [opened, synchronize, reopened]

    По расписанию (cron)

    on:
      schedule:
        - cron: '0 9 * * 1'  # Каждый понедельник в 9:00 UTC

    Ручной запуск

    on:
      workflow_dispatch:
        inputs:
          environment:
            description: 'Deploy environment'
            required: true
            default: 'staging'

    Комбинация триггеров

    on:
      push:
        branches: [main]
      pull_request:
        branches: [main]
      workflow_dispatch:

    Jobs и Steps

    Jobs — параллельные задачи

    По умолчанию jobs выполняются параллельно:

    jobs:
      lint:
        runs-on: ubuntu-latest
        steps:
          - uses: actions/checkout@v4
          - run: npm ci
          - run: npm run lint
    
      test:
        runs-on: ubuntu-latest
        steps:
          - uses: actions/checkout@v4
          - run: npm ci
          - run: npm test
    
      build:
        runs-on: ubuntu-latest
        needs: [lint, test]  # ждёт завершения lint и test
        steps:
          - uses: actions/checkout@v4
          - run: npm ci
          - run: npm run build

    Ключевое слово needs задаёт зависимости между jobs. В примере выше build запустится только после успешного завершения lint и test.

    Steps — последовательные шаги

    steps:
      # Шаг 1: клонировать репозиторий
      - uses: actions/checkout@v4
    
      # Шаг 2: установить Node.js
      - uses: actions/setup-node@v4
        with:
          node-version: '20'
          cache: 'npm'
    
      # Шаг 3: установить зависимости
      - name: Install dependencies
        run: npm ci
    
      # Шаг 4: запустить тесты
      - name: Run tests
        run: npm test

    Практика: CI для React проекта

    Запуск тестов на каждый push

    name: CI
    
    on:
      push:
        branches: [main, develop]
      pull_request:
        branches: [main]
    
    jobs:
      test:
        runs-on: ubuntu-latest
        strategy:
          matrix:
            node-version: [18, 20]
    
        steps:
          - uses: actions/checkout@v4
    
          - name: Use Node.js ${{ matrix.node-version }}
            uses: actions/setup-node@v4
            with:
              node-version: ${{ matrix.node-version }}
              cache: 'npm'
    
          - name: Install dependencies
            run: npm ci
    
          - name: Run tests
            run: npm test -- --coverage
    
          - name: Upload coverage
            if: matrix.node-version == 20
            uses: actions/upload-artifact@v4
            with:
              name: coverage-report
              path: coverage/

    strategy.matrix позволяет запускать одну и ту же задачу с разными параметрами — например, на разных версиях Node.js.

    Линтинг в CI

    name: Lint
    
    on:
      pull_request:
        branches: [main]
    
    jobs:
      lint:
        runs-on: ubuntu-latest
        steps:
          - uses: actions/checkout@v4
    
          - uses: actions/setup-node@v4
            with:
              node-version: '20'
              cache: 'npm'
    
          - run: npm ci
    
          - name: ESLint
            run: npm run lint
    
          - name: TypeScript check
            run: npx tsc --noEmit
    
          - name: Prettier check
            run: npx prettier --check "src/**/*.{ts,tsx}"

    Типичные workflows

    Полный CI pipeline

    name: Full CI
    
    on:
      pull_request:
        branches: [main]
    
    jobs:
      quality:
        runs-on: ubuntu-latest
        steps:
          - uses: actions/checkout@v4
          - uses: actions/setup-node@v4
            with:
              node-version: '20'
              cache: 'npm'
          - run: npm ci
          - run: npm run lint
          - run: npx tsc --noEmit
          - run: npm test -- --coverage
          - run: npm run build

    Автоматическое обновление зависимостей (Dependabot)

    # .github/dependabot.yml
    version: 2
    updates:
      - package-ecosystem: npm
        directory: /
        schedule:
          interval: weekly
        open-pull-requests-limit: 10

    Полезные actions

    | Action | Описание |

    |--------|----------|

    | actions/checkout@v4 | Клонировать репозиторий |

    | actions/setup-node@v4 | Установить Node.js |

    | actions/cache@v4 | Кэширование зависимостей |

    | actions/upload-artifact@v4 | Сохранить артефакты сборки |

    | github/codeql-action | Анализ безопасности кода |

    Статусные проверки (Status Checks)

    GitHub позволяет сделать CI обязательным для мержа PR:

    1. Settings → Branches → Branch protection rules

    2. Require status checks to pass before merging

    3. Выбрать нужные workflow (например, "test", "lint")

    Теперь никто не сможет замержить PR, если CI красный. Это главная защита от багов в production.

    Примеры

    Минимальный CI workflow для Node.js проекта

    name: CI
    
    on:
      push:
        branches: [main, develop]
      pull_request:
        branches: [main]
    
    jobs:
      ci:
        runs-on: ubuntu-latest
        steps:
          - uses: actions/checkout@v4
          - uses: actions/setup-node@v4
            with:
              node-version: '20'
              cache: 'npm'
          - run: npm ci
          - run: npm run lint
          - run: npm test
          - run: npm run build

    Матрица версий Node.js в CI

    jobs:
      test:
        runs-on: ubuntu-latest
        strategy:
          matrix:
            node-version: [18, 20]
        steps:
          - uses: actions/checkout@v4
          - uses: actions/setup-node@v4
            with:
              node-version: ${{ matrix.node-version }}
          - run: npm ci
          - run: npm test

    CI/CD: непрерывная интеграция

    Что такое CI/CD

    CI/CD — это набор практик, которые автоматизируют процесс доставки кода от разработчика до пользователя.

  • CI (Continuous Integration) — непрерывная интеграция. Каждый push автоматически запускает сборку и тесты. Цель — ловить баги как можно раньше.
  • CD (Continuous Delivery) — непрерывная доставка. Код всегда готов к деплою, но выкатка происходит вручную по нажатию кнопки.
  • CD (Continuous Deployment) — непрерывное развёртывание. Код автоматически попадает в production после прохождения всех проверок. Никакого ручного вмешательства.
  • CI                    CD (Delivery)         CD (Deployment)
    Push → Build → Test → Ready to deploy →     Auto deploy
                          ↑ ручная кнопка       ↑ автоматически

    Зачем это нужно

    Без CI/CD:

  • Разработчик забыл запустить тесты — баг в production
  • «У меня локально работает» — классическая проблема
  • Деплой вручную по SSH — долго, рискованно, непредсказуемо
  • Конфликты копятся неделями и разрешаются больно
  • С CI/CD:

  • Каждый коммит проверен — тесты, линтер, сборка автоматически
  • Быстрая обратная связь — узнал о баге через 2 минуты, а не через 2 недели
  • Предсказуемый деплой — один и тот же процесс каждый раз
  • Уверенность в коде — зелёный CI = можно мержить
  • GitHub Actions — основы

    GitHub Actions — встроенная CI/CD платформа GitHub. Бесплатна для открытых репозиториев и имеет щедрый лимит для приватных.

    Где живут workflows

    my-project/
    ├── .github/
    │   └── workflows/
    │       ├── ci.yml          # основной CI pipeline
    │       ├── deploy.yml      # деплой
    │       └── lint.yml        # линтер
    ├── src/
    └── package.json

    Файлы workflow — это YAML-файлы в папке .github/workflows/.

    YAML — основы синтаксиса

    YAML — язык разметки для конфигураций. Используется в GitHub Actions, Docker Compose, Kubernetes.

    # Строки
    name: My Workflow
    message: "Hello, World!"
    
    # Списки
    steps:
      - first
      - second
      - third
    
    # Объекты (вложенность через отступы — 2 пробела!)
    job:
      name: Build
      runs-on: ubuntu-latest
    
    # Многострочные строки
    description: |
      Это многострочный текст.
      Каждая строка сохраняется.

    Важно: YAML чувствителен к отступам. Всегда используйте пробелы, не табы!

    Структура GitHub Actions workflow

    # Название workflow (видно во вкладке Actions)
    name: CI
    
    # Триггеры — когда запускать
    on:
      push:
        branches: [main]
      pull_request:
        branches: [main]
    
    # Задачи
    jobs:
      build:
        runs-on: ubuntu-latest
        steps:
          - uses: actions/checkout@v4
          - name: Install dependencies
            run: npm install
          - name: Run tests
            run: npm test

    Ключевые элементы

    | Элемент | Описание |

    |---------|----------|

    | name | Название workflow |

    | on | Когда запускать (триггеры) |

    | jobs | Набор задач для выполнения |

    | runs-on | На какой ОС запускать |

    | steps | Последовательность шагов в задаче |

    | uses | Подключить готовое action |

    | run | Выполнить shell-команду |

    Триггеры (on)

    Push — при каждом push

    on:
      push:
        branches: [main, develop]
        paths:
          - 'src/**'
          - 'package.json'

    Pull Request — при создании/обновлении PR

    on:
      pull_request:
        branches: [main]
        types: [opened, synchronize, reopened]

    По расписанию (cron)

    on:
      schedule:
        - cron: '0 9 * * 1'  # Каждый понедельник в 9:00 UTC

    Ручной запуск

    on:
      workflow_dispatch:
        inputs:
          environment:
            description: 'Deploy environment'
            required: true
            default: 'staging'

    Комбинация триггеров

    on:
      push:
        branches: [main]
      pull_request:
        branches: [main]
      workflow_dispatch:

    Jobs и Steps

    Jobs — параллельные задачи

    По умолчанию jobs выполняются параллельно:

    jobs:
      lint:
        runs-on: ubuntu-latest
        steps:
          - uses: actions/checkout@v4
          - run: npm ci
          - run: npm run lint
    
      test:
        runs-on: ubuntu-latest
        steps:
          - uses: actions/checkout@v4
          - run: npm ci
          - run: npm test
    
      build:
        runs-on: ubuntu-latest
        needs: [lint, test]  # ждёт завершения lint и test
        steps:
          - uses: actions/checkout@v4
          - run: npm ci
          - run: npm run build

    Ключевое слово needs задаёт зависимости между jobs. В примере выше build запустится только после успешного завершения lint и test.

    Steps — последовательные шаги

    steps:
      # Шаг 1: клонировать репозиторий
      - uses: actions/checkout@v4
    
      # Шаг 2: установить Node.js
      - uses: actions/setup-node@v4
        with:
          node-version: '20'
          cache: 'npm'
    
      # Шаг 3: установить зависимости
      - name: Install dependencies
        run: npm ci
    
      # Шаг 4: запустить тесты
      - name: Run tests
        run: npm test

    Практика: CI для React проекта

    Запуск тестов на каждый push

    name: CI
    
    on:
      push:
        branches: [main, develop]
      pull_request:
        branches: [main]
    
    jobs:
      test:
        runs-on: ubuntu-latest
        strategy:
          matrix:
            node-version: [18, 20]
    
        steps:
          - uses: actions/checkout@v4
    
          - name: Use Node.js ${{ matrix.node-version }}
            uses: actions/setup-node@v4
            with:
              node-version: ${{ matrix.node-version }}
              cache: 'npm'
    
          - name: Install dependencies
            run: npm ci
    
          - name: Run tests
            run: npm test -- --coverage
    
          - name: Upload coverage
            if: matrix.node-version == 20
            uses: actions/upload-artifact@v4
            with:
              name: coverage-report
              path: coverage/

    strategy.matrix позволяет запускать одну и ту же задачу с разными параметрами — например, на разных версиях Node.js.

    Линтинг в CI

    name: Lint
    
    on:
      pull_request:
        branches: [main]
    
    jobs:
      lint:
        runs-on: ubuntu-latest
        steps:
          - uses: actions/checkout@v4
    
          - uses: actions/setup-node@v4
            with:
              node-version: '20'
              cache: 'npm'
    
          - run: npm ci
    
          - name: ESLint
            run: npm run lint
    
          - name: TypeScript check
            run: npx tsc --noEmit
    
          - name: Prettier check
            run: npx prettier --check "src/**/*.{ts,tsx}"

    Типичные workflows

    Полный CI pipeline

    name: Full CI
    
    on:
      pull_request:
        branches: [main]
    
    jobs:
      quality:
        runs-on: ubuntu-latest
        steps:
          - uses: actions/checkout@v4
          - uses: actions/setup-node@v4
            with:
              node-version: '20'
              cache: 'npm'
          - run: npm ci
          - run: npm run lint
          - run: npx tsc --noEmit
          - run: npm test -- --coverage
          - run: npm run build

    Автоматическое обновление зависимостей (Dependabot)

    # .github/dependabot.yml
    version: 2
    updates:
      - package-ecosystem: npm
        directory: /
        schedule:
          interval: weekly
        open-pull-requests-limit: 10

    Полезные actions

    | Action | Описание |

    |--------|----------|

    | actions/checkout@v4 | Клонировать репозиторий |

    | actions/setup-node@v4 | Установить Node.js |

    | actions/cache@v4 | Кэширование зависимостей |

    | actions/upload-artifact@v4 | Сохранить артефакты сборки |

    | github/codeql-action | Анализ безопасности кода |

    Статусные проверки (Status Checks)

    GitHub позволяет сделать CI обязательным для мержа PR:

    1. Settings → Branches → Branch protection rules

    2. Require status checks to pass before merging

    3. Выбрать нужные workflow (например, "test", "lint")

    Теперь никто не сможет замержить PR, если CI красный. Это главная защита от багов в production.

    Примеры

    Минимальный CI workflow для Node.js проекта

    name: CI
    
    on:
      push:
        branches: [main, develop]
      pull_request:
        branches: [main]
    
    jobs:
      ci:
        runs-on: ubuntu-latest
        steps:
          - uses: actions/checkout@v4
          - uses: actions/setup-node@v4
            with:
              node-version: '20'
              cache: 'npm'
          - run: npm ci
          - run: npm run lint
          - run: npm test
          - run: npm run build

    Матрица версий Node.js в CI

    jobs:
      test:
        runs-on: ubuntu-latest
        strategy:
          matrix:
            node-version: [18, 20]
        steps:
          - uses: actions/checkout@v4
          - uses: actions/setup-node@v4
            with:
              node-version: ${{ matrix.node-version }}
          - run: npm ci
          - run: npm test
    📖

    Теоретический урок

    Изучи материал выше и задай вопросы AI если что-то непонятно

    Этот урок содержит теоретическую информацию. Изучи материал, затем отметь урок как пройденный.

    Загружаем AI-помощника...