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

Онлайн-тренажер Python для начинающих

Изучайте Python легко и без перегрузки теорией. Решайте практические задачи с автоматической проверкой, получайте подсказки на русском языке и пишите код прямо в браузере — без необходимости что-либо устанавливать.

Начать курс

Введение в CI/CD и GitHub Actions для JavaScript

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

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

Основы GitHub Actions: структура и синтаксис

GitHub Actions работает на основе YAML-файлов, которые хранятся в директории .github/workflows вашего репозитория. Каждый такой файл определяет один или несколько воркфлоу (workflow), которые запускаются по определенным событиям: push, pull request, создание релиза и т.д.

Базовая структура воркфлоу включает:

  • name — название пайплайна;
  • on — событие, запускающее выполнение;
  • jobs — набор задач, которые выполняются последовательно или параллельно;
  • steps — шаги внутри каждой задачи (команды, действия).

Рассмотрим минимальный пример для Node.js проекта:

name: Node.js CI

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

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v4
      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: '20'
      - run: npm ci
      - run: npm test

В этом примере мы используем встроенные actions: actions/checkout для клонирования репозитория и actions/setup-node для установки нужной версии Node.js. Команда npm ci устанавливает зависимости строго по package-lock.json, а npm test запускает тесты.

Настройка тестирования и линтинга

Качественный CI/CD пайплайн для JavaScript проекта должен включать проверку кода на соответствие стандартам и автоматическое тестирование. Рассмотрим расширенный пример с использованием популярных инструментов: ESLint для линтинга, Jest для тестирования и Prettier для форматирования.

Добавим в проект необходимые зависимости:

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

Создадим файл конфигурации .eslintrc.json:

{
  "env": {
    "node": true,
    "es2021": true,
    "jest": true
  },
  "extends": ["eslint:recommended", "prettier"],
  "parserOptions": {
    "ecmaVersion": "latest",
    "sourceType": "module"
  },
  "rules": {
    "no-console": "warn",
    "semi": ["error", "always"]
  }
}

Теперь обновим файл воркфлоу:

name: Lint and Test

on:
  push:
    branches: [ main, develop ]
  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'

      - name: Install dependencies
        run: npm ci

      - name: Run linter
        run: npx eslint .

      - name: Check formatting
        run: npx prettier --check .

      - name: Run tests
        run: npm test

      - name: Upload test coverage
        uses: actions/upload-artifact@v4
        if: always()
        with:
          name: coverage
          path: coverage/

Обратите внимание на использование cache: 'npm' — это ускоряет установку зависимостей за счет кэширования. Также мы добавили шаг для загрузки артефактов покрытия тестами, что полезно для анализа.

Сборка и деплой Node.js приложения

После успешного прохождения тестов и линтинга логично автоматизировать сборку и развертывание приложения. Рассмотрим два популярных сценария: деплой на Heroku и деплой на VPS через SSH.

Деплой на Heroku

Heroku поддерживает автоматический деплой через GitHub, но мы рассмотрим вариант с использованием GitHub Actions для большего контроля.

deploy:
  needs: quality
  runs-on: ubuntu-latest
  if: github.ref == 'refs/heads/main'

  steps:
    - uses: actions/checkout@v4
    - name: Deploy to Heroku
      uses: akhileshns/heroku-deploy@v3.13.15
      with:
        heroku_api_key: ${{ secrets.HEROKU_API_KEY }}
        heroku_app_name: "your-app-name"
        heroku_email: "your-email@example.com"
        buildpack: "heroku/nodejs"

Перед использованием необходимо добавить HEROKU_API_KEY в секреты репозитория (Settings → Secrets and variables → Actions).

Деплой на VPS через SSH

Для развертывания на собственном сервере используйте SSH-доступ. Создайте скрипт deploy.sh в корне проекта:

#!/bin/bash
# deploy.sh
echo "Deploying application..."
cd /var/www/myapp
git pull origin main
npm ci --production
pm2 restart myapp
echo "Deployment complete!"

Добавьте воркфлоу:

deploy-vps:
  needs: quality
  runs-on: ubuntu-latest
  if: github.ref == 'refs/heads/main'

  steps:
    - uses: actions/checkout@v4
    - name: Deploy via SSH
      uses: appleboy/ssh-action@v1.0.3
      with:
        host: ${{ secrets.VPS_HOST }}
        username: ${{ secrets.VPS_USER }}
        key: ${{ secrets.VPS_SSH_KEY }}
        script: |
          cd /var/www/myapp
          git pull origin main
          npm ci --production
          pm2 restart myapp

Не забудьте добавить VPS_HOST, VPS_USER и VPS_SSH_KEY в сек

Блоги

Рекомендаций по книгам