React Academy · Урок

CI/CD React с GitHub Actions

Автоматизируйте этапы проверки стиля, тестирования, сборки и развёртывания в рабочем процессе GitHub Actions при каждом отправленном изменении.

«CI/CD React с GitHub Actions» — бесплатный урок React Academy на CoddyKit. Это урок 4 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения React Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс React Academy содержит 4 уроков всего.

Что такое GitHub Actions

GitHub Actions — это платформа непрерывной интеграции и доставки, встроенная в GitHub. Определяйте рабочие процессы в файлах YAML в каталоге .github/workflows/; они запускаются при отправке изменений, создании запроса на слияние или наступлении события по расписанию.

Базовый рабочий процесс непрерывной интеграции

Минимальный рабочий процесс, который при каждом отправлении изменений и запросе на слияние устанавливает зависимости, запускает проверку стиля и тесты.

# .github/workflows/ci.yml
name: CI

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

jobs:
  test:
    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 -- --coverage

Кэширование node_modules

Кэшируйте ~/.npm (кэш npm, а не node_modules), чтобы ускорить установку зависимостей. actions/setup-node выполняет это с помощью параметра cache.

- uses: actions/setup-node@v4
  with:
    node-version: 20
    cache: 'npm' # caches ~/.npm based on package-lock.json hash

Шаг сборки

Добавьте после тестов шаг сборки, чтобы проверить, что проект компилируется без ошибок.

- name: Build
  run: npm run build

# For Next.js — catch TypeScript errors:
- name: Type Check
  run: npx tsc --noEmit

Развёртывание в Vercel после слияния

Выполняйте развёртывание в Vercel при отправке изменений в main, используя CLI Vercel в рабочем процессе.

- name: Deploy to Vercel
  env:
    VERCEL_TOKEN: ${{ secrets.VERCEL_TOKEN }}
    VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
    VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}
  run: |
    npm install -g vercel
    vercel pull --yes --environment=production --token=$VERCEL_TOKEN
    vercel build --prod --token=$VERCEL_TOKEN
    vercel deploy --prebuilt --prod --token=$VERCEL_TOKEN

Развёртывание в S3 после слияния

Синхронизируйте результаты сборки с S3 и очистите кэш CloudFront после успешной сборки в основной ветке.

- name: Deploy to S3
  if: github.ref == 'refs/heads/main'
  env:
    AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
    AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
  run: |
    aws s3 sync dist/ s3://my-bucket/ --delete
    aws cloudfront create-invalidation --distribution-id ${{ secrets.CF_ID }} --paths "/*"

Тесты Playwright E2E в непрерывной интеграции

Запускайте тесты Playwright E2E в непрерывной интеграции после сборки. Устанавливайте двоичные файлы браузеров на отдельном шаге.

- name: Install Playwright Browsers
  run: npx playwright install --with-deps chromium

- name: Run E2E Tests
  run: npx playwright test

- uses: actions/upload-artifact@v4
  if: failure()
  with:
    name: playwright-report
    path: playwright-report/

Параллельные задания матрицы

Используйте стратегию матрицы, чтобы параллельно запускать тесты в нескольких версиях Node.js или окружениях.

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

Управление секретами

Храните конфиденциальные значения (ключи API, токены развёртывания) в GitHub Secrets (репозиторий → Настройки → Секреты). Обращайтесь к ним в рабочих процессах через ${{ secrets.MY_SECRET }}.

Условные шаги

Используйте условия if:, чтобы запускать шаги только в определённых ветках, при определённых событиях PR или после успешного выполнения предыдущих шагов.

- name: Deploy
  if: github.ref == 'refs/heads/main' && github.event_name == 'push'
  run: npm run deploy

Значки статуса

Добавьте в README значок статуса сборки, чтобы сразу показывать состояние непрерывной интеграции.

<!-- README.md -->
![CI](https://github.com/myorg/myrepo/actions/workflows/ci.yml/badge.svg)

Быстрая проверка

Какая возможность GitHub Actions одновременно запускает одно и то же задание в нескольких конфигурациях, например в разных версиях Node.js?

Итоги

Определяйте рабочие процессы непрерывной интеграции в YAML в каталоге .github/workflows/. Используйте actions/setup-node с параметром cache: 'npm' для быстрой установки. Добавьте шаги проверки стиля, проверки типов, тестирования и сборки. Выполняйте развёртывание условно при отправке изменений в основную ветку. Храните секреты в GitHub Secrets и используйте сборки матрицы для тестирования нескольких версий.

Часто задаваемые вопросы

Урок «CI/CD React с GitHub Actions» бесплатный?

Да — полный текст урока «CI/CD React с GitHub Actions» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс React Academy, подпишись на CoddyKit PRO. Курс React Academy содержит 4 уроков всего.

Чему я научусь в уроке «CI/CD React с GitHub Actions»?

Автоматизируйте этапы проверки стиля, тестирования, сборки и развёртывания в рабочем процессе GitHub Actions при каждом отправленном изменении. Ты практикуешь React Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать React Academy?

Предыдущий опыт не требуется. React Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 4 из 4.

Сколько времени занимает урок «CI/CD React с GitHub Actions»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке React Academy?

Да. Каждый урок React Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

← Назад к React Academy