CI/CD для TypeScript проектов: GitHub Actions от А до Я

CI/CD для TypeScript проектов: GitHub Actions от А до Я

Современная разработка на TypeScript невозможна без быстрой и надёжной автоматизации. Ручное тестирование, сборка и деплой — это не только долго, но и чревато ошибками. На помощь приходит CI/CD (Continuous Integration / Continuous Deployment) — практика, которая позволяет автоматически проверять и разворачивать ваш код. В этой статье мы разберём, как настроить полный пайплайн CI/CD для TypeScript проектов с помощью GitHub Actions — от базовой конфигурации до продвинутых сценариев.

Что такое CI/CD и зачем он нужен TypeScript-разработчику?

CI/CD — это методология, которая объединяет две практики:

• Continuous Integration (CI) — автоматическая сборка и тестирование кода при каждом пуше в репозиторий. Это позволяет быстро обнаруживать баги и конфликты.
• Continuous Deployment/Delivery (CD) — автоматический деплой приложения на сервер или в облако после успешного прохождения тестов.

Для TypeScript проектов CI/CD особенно важен, так как TypeScript компилируется в JavaScript, и ошибки в типах или конфигурации могут проявиться только на этапе сборки. GitHub Actions — это встроенный инструмент GitHub, который позволяет создавать события (workflows) прямо в репозитории.

Шаг 1: Базовый workflow для TypeScript проекта

Начнём с простого — создадим файл .github/workflows/ci.yml в корне вашего проекта. Этот workflow будет запускаться при каждом пуше в ветку main или при создании Pull Request.

name: CI Pipeline

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

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

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

    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'
      - run: npm ci
      - run: npm run build --if-present
      - run: npm test
      - run: npm run lint --if-present

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

• actions/checkout — клонирует репозиторий в runner.
• actions/setup-node — устанавливает Node.js с кешированием зависимостей.
• npm ci — чистая установка зависимостей (быстрее, чем npm install).
• npm run build — компиляция TypeScript в JavaScript (убедитесь, что у вас есть скрипт build в package.json).
• npm test — запуск тестов (например, Jest).

Матрица strategy.matrix позволяет тестировать код на нескольких версиях Node.js одновременно — это повышает уверенность в совместимости.

Шаг 2: Добавляем линтинг и форматирование

Качество кода — важная часть CI. Добавим шаги для ESLint и Prettier. Убедитесь, что они установлены в проекте:

npm install --save-dev eslint prettier eslint-config-prettier

Дополним наш workflow новыми шагами:

      - run: npm run lint
      - run: npm run format:check

В package.json должны быть соответствующие скрипты:

{
  "scripts": {
    "lint": "eslint src --ext .ts",
    "format:check": "prettier --check \"src/**/*.ts\"",
    "format": "prettier --write \"src/**/*.ts\""
  }
}

Теперь при каждом пуше GitHub Actions будет проверять не только типы и тесты, но и стиль кода. Если линтер найдёт ошибки — пайплайн упадёт, и разработчик получит уведомление.

Шаг 3: Настройка CD — автоматический деплой на Vercel/Netlify

Для TypeScript-проектов часто используются серверлесс-платформы. Рассмотрим деплой на Vercel — это один из самых популярных вариантов для Next.js и других фреймворков.

Сначала установите Vercel CLI и добавьте токен в секреты GitHub (Settings → Secrets and variables → Actions → New repository secret): VERCEL_TOKEN.

Создайте новый workflow для деплоя:

name: Deploy to Vercel

on:
  push:
    branches: [ main ]

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - name: Install Vercel CLI
        run: npm install --global vercel
      - name: Pull Vercel Environment Information
        run: vercel pull --yes --environment=production --token=${{ secrets.VERCEL_TOKEN }}
      - name: Build Project
        run: vercel build --prod --token=${{ secrets.VERCEL_TOKEN }}
      - name: Deploy Project
        run: vercel deploy --prebuilt --prod --token=${{ secrets.VERCEL_TOKEN }}

Альтернативно, для деплоя на Netlify используйте официальный action:

      - name: Deploy to Netlify
        uses: nwtgck/actions-netlify@v3.0
        with:
          publish-dir: './dist'
          production-branch: main
          github-token: ${{ secrets.GITHUB_TOKEN }}
          deploy-message: "Deploy from GitHub Actions"
        env:
          NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
          NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }}

Не забудьте добавить NETLIFY_AUTH_TOKEN и NETLIFY_SITE_ID в секреты репозитория.

Шаг 4: Продвинутые сценарии — кеширование, параллельные задачи и уведомления

Чтобы ускорить пайплайн, включите кеширование не только для npm, но и для node_modules:

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

Для параллельного выполнения задач (например, тесты и линтинг) используйте jobs с зависимостями:

jobs:
  lint:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - run: npm ci
      - run: npm run lint