0Pricing
Frontend Academy · Урок

GitHub Actions для фронтенда: проверка, тестирование и сборка

Напишите рабочий процесс YAML, который устанавливает зависимости, запускает ESLint, выполняет тесты Jest и собирает приложение при каждом запросе на слияние

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

Зачем нужен CI для фронтенда

Непрерывная интеграция запускает тесты, проверки линтером и сборку при каждом отправленном изменении и запросе на слияние. Она обнаруживает регрессии до того, как они попадут в main. Это необходимо любой команде, где работает больше одного разработчика.

Основы GitHub Actions

Рабочие процессы — это файлы YAML в .github/workflows/. Каждый рабочий процесс содержит задачи, запускаемые по событиям (push, pull_request, schedule).

# .github/workflows/ci.yml
name: CI
on:
  push:
    branches: [main]
  pull_request:
concurrency:
  group: ${{ github.workflow }}-${{ github.ref }}
  cancel-in-progress: true
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

Кэширование зависимостей

Кэшируйте node_modules (или кэши pnpm/yarn), чтобы не устанавливать зависимости заново при каждом запуске. setup-node поддерживает кэширование из коробки.

- uses: actions/setup-node@v4
  with:
    node-version: '20'
    cache: 'npm'   # or 'yarn' or 'pnpm'

Задача проверки стиля

Запускайте проверки ESLint и Prettier. Завершайте сборку с ошибкой при обнаружении ошибок.

lint:
  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 run format:check

Задача тестирования

Запускайте Vitest или Jest. Выводите отчёты о покрытии для контроля результатов.

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 test -- --coverage
    - uses: codecov/codecov-action@v4
      with:
        files: ./coverage/lcov.info

Задача сборки

Собирайте production-версию приложения. Загружайте её как артефакт для последующих задач развёртывания.

build:
  runs-on: ubuntu-latest
  needs: [lint, test]
  steps:
    - uses: actions/checkout@v4
    - uses: actions/setup-node@v4
      with: { node-version: '20', cache: 'npm' }
    - run: npm ci
    - run: npm run build
    - uses: actions/upload-artifact@v4
      with:
        name: dist
        path: dist/
        retention-days: 7

Параллельные задачи

Проверка стиля, тестирование и проверка типов могут выполняться параллельно — Actions запускает каждую задачу на собственном исполнителе. Используйте needs:, чтобы задать порядок (сборка после проверки стиля и тестирования).

Проверка типов

Добавьте отдельную задачу проверки типов: tsc --noEmit. Она обнаруживает ошибки TypeScript до запуска приложения.

typecheck:
  runs-on: ubuntu-latest
  steps:
    - uses: actions/checkout@v4
    - uses: actions/setup-node@v4
      with: { node-version: '20', cache: 'npm' }
    - run: npm ci
    - run: npx tsc --noEmit

Матричное тестирование

Запускайте задачу тестирования параллельно для нескольких версий Node или операционных систем.

test:
  strategy:
    fail-fast: false
    matrix:
      node: [18, 20, 22]
      os: [ubuntu-latest, windows-latest, macos-latest]
  runs-on: ${{ matrix.os }}
  steps:
    - uses: actions/checkout@v4
    - uses: actions/setup-node@v4
      with: { node-version: ${{ matrix.node }} }
    - run: npm ci && npm test

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

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

- name: Deploy to staging
  if: github.ref == 'refs/heads/main'
  run: npm run deploy:staging

Секреты и переменные

Храните ключи доступа к API и токены в секретах репозитория (Настройки → Секреты). Получайте к ним доступ через secrets.NAME. Никогда не добавляйте секреты в репозиторий.

- run: npm run deploy
  env:
    DEPLOY_TOKEN: ${{ secrets.DEPLOY_TOKEN }}
    AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}

Правила защиты веток

В разделе «Настройки» → «Ветки» потребуйте, чтобы рабочий процесс CI завершался успешно, прежде чем разрешать слияние в main. В сочетании с обязательными проверками это стандартная мера защиты команды.

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

Какова цель cancel-in-progress: true в блоке параллельного выполнения рабочего процесса GitHub Actions?

Повторение: GitHub Actions для фронтенда

Файлы конфигурации рабочих процессов YAML находятся в .github/workflows/. Задания запускаются при отправке изменений или создании PR. Кэшируйте зависимости node_modules с помощью setup-node. Стандартные задания: проверка стиля, проверка типов, тестирование, сборка. Запускайте их параллельно, используя зависимости для задания порядка. Используйте матрицу для тестирования нескольких версий. Секреты задаются в настройках репозитория. Защита веток требует успешного прохождения CI перед слиянием. Используйте cancel-in-progress для устранения дубликатов запусков.

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

Урок «GitHub Actions для фронтенда: проверка, тестирование и сборка» бесплатный?

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

Чему я научусь в уроке «GitHub Actions для фронтенда: проверка, тестирование и сборка»?

Напишите рабочий процесс YAML, который устанавливает зависимости, запускает ESLint, выполняет тесты Jest и собирает приложение при каждом запросе на слияние Ты практикуешь Frontend Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

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

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

Сколько времени занимает урок «GitHub Actions для фронтенда: проверка, тестирование и сборка»?

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

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

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

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

  1. GitHub Actions для фронтенда: проверка, тестирование и сборка
  2. Развёртывание в Vercel, Netlify и Cloudflare Pages
  3. Переменные окружения в CI
  4. Автоматические проверки Lighthouse
← Назад к Frontend Academy