Туториал по CI/CD: автоматизация сборки и деплоя с GitHub Actions

Что такое CI/CD и зачем это нужно

CI/CD (Continuous Integration / Continuous Delivery) - это практика автоматизации процессов сборки, тестирования и развертывания программного обеспечения. В современной разработке, когда команды выпускают релизы ежедневно или даже несколько раз в день, ручная сборка и деплой становятся узким местом. CI/CD позволяет автоматически запускать тесты при каждом пуше в репозиторий, собирать Docker-образы, деплоить на staging и production. Это снижает риск человеческой ошибки, ускоряет фидбек-цикл и дает уверенность в качестве кода. В этом туториале мы настроим простой, но рабочий пайплайн с помощью GitHub Actions для React-приложения, которое будет тестироваться, собираться и загружаться на GitHub Pages.

Шаг 1: Установка и настройка репозитория

Для начала убедитесь, что у вас есть аккаунт на GitHub и создан репозиторий с вашим React-приложением (например, созданным через create-react-app). Никаких дополнительных инструментов не требуется - GitHub Actions работает прямо в облаке. В корне вашего репозитория создайте папку .github/workflows - именно там будут лежать YAML-файлы с описанием пайплайнов. Создайте файл deploy.yml.

mkdir -p .github/workflows
touch .github/workflows/deploy.yml

Откройте файл в любом редакторе. Первая строка должна содержать имя workflow - оно будет отображаться в интерфейсе GitHub. Задайте триггер: например, on: push: branches: [ main ]. Это значит, что пайплайн запустится автоматически при каждом пуше в ветку main.

Шаг 2: Описание jobs и steps

Workflow состоит из одной или нескольких job (задач). Каждая job выполняется на отдельном виртуальном сервере. Напишем одну job с названием build-and-deploy, которая будет запускаться на Ubuntu. Внутри job укажем steps - последовательность действий. Первым шагом используем готовое действие actions/checkout@v4, чтобы клонировать код репозитория. Затем установим Node.js версии 20 с помощью actions/setup-node@v4.

name: Build and Deploy

on:
  push:
    branches: [ main ]

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout code
        uses: actions/checkout@v4

      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: 20

Далее установим зависимости и запустим тесты. Если тесты провалятся, пайплайн остановится и деплой не произойдет - это защита от деплоя сломанного кода. После успешных тестов соберем production-сборку командой npm run build. Финальный шаг - задеплоить содержимое папки build на GitHub Pages. Для этого используем действие peaceiris/actions-gh-pages@v4, передав ему специальный токен GITHUB_TOKEN (он автоматически создается GitHub).

      - name: Install dependencies
        run: npm ci

      - name: Run tests
        run: npm test -- --watchAll=false --passWithNoTests

      - name: Build project
        run: npm run build

      - name: Deploy to GitHub Pages
        uses: peaceiris/actions-gh-pages@v4
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./build

Шаг 3: Активация GitHub Pages и проверка

После того как вы закоммитите и запушите .github/workflows/deploy.yml, перейдите в репозиторий на GitHub, откройте вкладку Actions - вы увидите выполняющийся workflow. Чтобы GitHub Pages работал, нужно включить его в настройках репозитория: Settings → Pages → Source: Deploy from a branch → выберите ветвь gh-pages (её создаст действие peaceiris). Через несколько минут после успешного деплоя ваше приложение будет доступно по адресу https://[ваш-логин].github.io/[имя-репозитория]. Каждый новый пуш в main будет автоматически запускать сборку, тесты и обновлять страницу.

Итог

Мы настроили полноценный CI/CD пайплайн для React-приложения на GitHub Actions. Теперь каждый раз, когда вы пушите код в main, GitHub автоматически запускает тесты, собирает проект и публикует его на GitHub Pages. Это базовый, но мощный паттерн, который можно расширять: добавлять линтеры, интеграционные тесты, загрузку Docker-образов в реестр, деплой на облачные серверы (AWS, Google Cloud) или отправку уведомлений в Slack. CI/CD - это не просто модный тренд, а необходимая практика для профессиональной разработки. Вы можете адаптировать этот пример под любой стек: Python с pytest, Node.js с Jest или Java с Maven. Главное - понять логику: триггер → тесты → сборка → деплой.