CI/CD для TypeScript проектов: настройка GitHub Actions с нуля

Введение в CI/CD для TypeScript проектов

Современная разработка программного обеспечения немыслима без автоматизации. CI/CD (Continuous Integration / Continuous Delivery) — это практика, которая позволяет командам разработчиков быстро и безопасно доставлять изменения в продакшн. Для проектов на TypeScript, особенно в экосистеме Node.js, настройка пайплайна CI/CD становится критически важной задачей.

В этой статье мы разберём, как настроить полноценный CI/CD пайплайн для TypeScript проекта с помощью GitHub Actions. Вы узнаете, как автоматизировать запуск тестов, сборку проекта и деплой на хостинг. Материал ориентирован на разработчиков, которые уже знакомы с TypeScript и хотят внедрить современные практики DevOps.

Что такое GitHub Actions и почему он удобен для TypeScript

GitHub Actions — это встроенная система CI/CD, которая позволяет создавать автоматизированные рабочие процессы (workflows) прямо в репозитории GitHub. Основные преимущества:

• Бесплатный лимит — для публичных репозиториев доступно 2000 минут сборки в месяц.
• Интеграция с GitHub — не нужно настраивать сторонние сервисы.
• Гибкость — поддерживает любые языки, включая TypeScript, через запуск shell-команд.
• Большая экосистема — готовые actions для деплоя на AWS, Vercel, Netlify и другие платформы.

Для TypeScript проектов GitHub Actions идеально подходит, так как позволяет легко запускать npm или yarn команды, использовать кэширование зависимостей и параллельные задачи.

Базовая структура workflow файла

Workflow в GitHub Actions описывается в YAML-файлах, которые хранятся в директории .github/workflows/. Рассмотрим минимальную конфигурацию для TypeScript проекта.

Создайте файл .github/workflows/ci.yml:

name: CI Pipeline

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

jobs:
  build-and-test:
    runs-on: ubuntu-latest

    strategy:
      matrix:
        node-version: [18.x, 20.x]

    steps:
      - name: Checkout repository
        uses: actions/checkout@v4

      - name: Setup Node.js ${{ matrix.node-version }}
        uses: actions/setup-node@v4
        with:
          node-version: ${{ matrix.node-version }}

      - name: Install dependencies
        run: npm ci

      - name: Lint check
        run: npm run lint

      - name: Type check
        run: npx tsc --noEmit

      - name: Run tests
        run: npm test

      - name: Build project
        run: npm run build

Разбор ключевых элементов:

• on — триггеры запуска (push в main/develop, pull request).
• runs-on — операционная система для выполнения (ubuntu-latest).
• matrix — параллельный запуск на разных версиях Node.js (18 и 20).
• actions/checkout — стандартный action для клонирования репозитория.
• actions/setup-node — установка указанной версии Node.js.
• npm ci — чистая установка зависимостей из lock-файла (быстрее и надёжнее, чем npm install).

Добавление кэширования для ускорения сборки

Чтобы не скачивать зависимости каждый раз, добавьте кэширование:

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

Этот шаг кэширует ~/.npm на основе хеша package-lock.json. При повторном запуске, если зависимости не изменились, кэш будет восстановлен, что сэкономит 30-60 секунд.

Продвинутые сценарии: деплой и параллельные задачи

Теперь перейдём к более сложным конфигурациям. Рассмотрим два популярных сценария: деплой на Vercel и разделение задач на тестирование и сборку.

Сценарий 1: Деплой на Vercel после успешного тестирования

Vercel — популярная платформа для хостинга TypeScript и React проектов. Для деплоя используем официальный action vercel/actions.

name: Deploy to Vercel

on:
  push:
    branches: [ main ]

jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 20
      - run: npm ci
      - run: npm test

  deploy:
    needs: test
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - name: Deploy to Vercel
        uses: amondnet/vercel-action@v20
        with:
          vercel-token: ${{ secrets.VERCEL_TOKEN }}
          vercel-org-id: ${{ secrets.VERCEL_ORG_ID }}
          vercel-project-id: ${{ secrets.VERCEL_PROJECT_ID }}
          vercel-args: '--prod'

Важные моменты:

• Джоб deploy зависит от test (ключ needs).
• Секреты (VERCEL_TOKEN, VERCEL_ORG_ID, VERCEL_PROJECT_ID) хранятся в настройках репозитория: Settings → Secrets and variables → Actions.
• Флаг --prod означает деплой в продакшн-окружение.

Сценарий 2: Параллельные задачи для экономии времени

Если ваш проект большой, можно запускать линтер, типизацию и тесты параллельно, а сборку — только после их успешного завершения:

name: Parallel Checks and Build

on: [push, pull_request]

jobs:
  lint:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 20
      - run: npm ci
      - run: npm run lint

  type-check:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with: