CI/CD пайплайны

CI/CD (Continuous Integration / Continuous Deployment) представляет собой практику автоматизации процессов сборки, тестирования и доставки приложений. Для проектов на Preact это особенно актуально, так как фронтенд-приложения требуют частых обновлений интерфейса, а автоматизация снижает вероятность ошибок и ускоряет релизы.

Архитектура CI/CD для Preact

Пайплайн CI/CD обычно состоит из нескольких этапов:

  1. Сборка (Build) Preact-приложения часто используют сборщики вроде Vite, Webpack или Parcel. Этап сборки включает:

    • Трансформацию JSX в JavaScript.
    • Минификацию кода для уменьшения размера бандла.
    • Оптимизацию изображений и статических ресурсов.
    • Генерацию source maps для облегчения отладки.

    Пример команды для сборки через Vite:

    npm run build

  2. Тестирование (Test) Автоматическое тестирование обеспечивает стабильность компонентов. Используются:

    • Unit-тесты через Jest или Vitest для проверки отдельных компонентов Preact.
    • Snapshot-тесты для контроля изменений разметки.
    • End-to-End тесты через Playwright или Cypress для имитации действий пользователя.

    Пример команды запуска тестов:

    npm run test

  3. Статический анализ и линтинг (Lint & Code Quality) Важный этап для соблюдения стандартов кодирования:

    • ESLint проверяет синтаксис и потенциальные ошибки.
    • Prettier обеспечивает единый стиль кода.
    • Проверка типов через TypeScript предотвращает ошибки типов.

    Пример интеграции в пайплайн:

    npm run lint
npm run type-check

  4. Деплой (Deployment) После успешной сборки и тестирования приложение отправляется на сервер или в облако:

    • Для статических Preact-приложений подойдут Vercel, Netlify или GitHub Pages.
    • Для серверного рендеринга (Preact SSR) — Docker-контейнеры или облачные платформы вроде AWS, GCP или Azure.

Интеграция с системами CI/CD

Популярные инструменты для автоматизации:

  • GitHub Actions Позволяет настроить пайплайн с этапами build → test → deploy прямо в репозитории. Пример workflow:

    name: Preact CI/CD

on:
  push:
    branches: [ main ]

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: '20'
      - run: npm ci
      - run: npm run lint
      - run: npm run test
      - run: npm run build
      - run: npm run deploy

  • GitLab CI/CD Позволяет создавать многоступенчатые пайплайны с отдельными стадиями для тестов и деплоя. Пример .gitlab-ci.yml:

    stages:
  - lint
  - test
  - build
  - deploy

lint:
  stage: lint
  script:
    - npm ci
    - npm run lint

test:
  stage: test
  script:
    - npm run test

build:
  stage: build
  script:
    - npm run build
  artifacts:
    paths:
      - dist/

deploy:
  stage: deploy
  script:
    - npm run deploy

  • Jenkins Более гибкая система, позволяющая создавать сложные пайплайны с условной логикой, интеграцией с Docker, уведомлениями и кастомными скриптами.

Особенности Preact в CI/CD

  • Малый размер и скорость сборки Preact требует меньше ресурсов для сборки по сравнению с React, что ускоряет пайплайны.

  • Оптимизация bundle size Важно контролировать размер бандла через инструменты вроде rollup-plugin-visualizer для предотвращения замедления загрузки.

  • SSR и SSG При использовании SSR или статической генерации важно учитывать отдельные этапы сборки для серверного и клиентского кода.

  • Модульные обновления В больших приложениях Preact-компоненты могут обновляться независимо. CI/CD позволяет реализовать частичный деплой изменений без полной сборки проекта.

Автоматизация тестирования компонентов Preact

Unit-тесты:

import { h } from 'preact';
import { render } from '@testing-library/preact';
import Button from './Button';

test('renders button with text', () => {
  const { getByText } = render(<Button label="Click me" />);
  expect(getByText('Click me')).toBeInTheDocument();
});

Snapshot-тесты:

import { h } from 'preact';
import { render } from '@testing-library/preact';
import Component from './Component';

test('matches snapshot', () => {
  const { container } = render(<Component />);
  expect(container).toMatchSnapshot();
});

Эти тесты можно интегрировать в CI/CD пайплайн для автоматической проверки каждой сборки.

Метрики и мониторинг

Для оценки качества CI/CD пайплайна важно использовать метрики:

  • Время сборки (Build Time)
  • Покрытие тестами (Test Coverage)
  • Частота успешного деплоя (Deployment Success Rate)
  • Размер бандла и время загрузки (Bundle Size & Load Time)

Инструменты для мониторинга: Grafana, Prometheus, GitHub Actions badges для отображения статуса сборки и тестов.

Практические рекомендации

  • Разделять стадии пайплайна на логические блоки: build → test → lint → deploy.
  • Использовать кеширование зависимостей (node_modules, npm cache) для ускорения сборки.
  • Включать статический анализ кода и тестирование на каждом коммите, а деплой только после успешного прохождения всех проверок.
  • Автоматизировать уведомления в Slack или почту о статусе сборки и деплоя.

Эти практики обеспечивают стабильность, предсказуемость и высокую скорость релизов Preact-приложений.

Оглавление