GitLab CI

Stencil — это фреймворк для создания веб-компонентов, который оптимизирован для сборки быстрых, независимых и переиспользуемых UI-модулей. Интеграция с GitLab CI позволяет автоматизировать процессы сборки, тестирования и деплоя компонентов, обеспечивая стабильность и воспроизводимость результата.

Структура проекта Stencil для CI

Проект Stencil обычно имеет следующую структуру:

my-stencil-app/
├── src/
│   ├── components/
│   └── index.ts
├── www/
├── stencil.config.ts
├── package.json
└── tsconfig.json

Для GitLab CI важны директории src и www, а также конфигурационные файлы package.json и stencil.config.ts, которые определяют скрипты сборки, тестирования и генерации компонентов.

Создание .gitlab-ci.yml

Файл .gitlab-ci.yml содержит описание пайплайнов для GitLab CI. Пример базовой конфигурации для проекта Stencil:

stages:
  - install
  - build
  - test
  - deploy

cache:
  paths:
    - node_modules/

install_dependencies:
  stage: install
  image: node:20
  script:
    - npm ci

build_stencil:
  stage: build
  image: node:20
  script:
    - npm run build
  artifacts:
    paths:
      - www/
    expire_in: 1 week

test_stencil:
  stage: test
  image: node:20
  script:
    - npm run test
  allow_failure: false

deploy_stencil:
  stage: deploy
  image: node:20
  script:
    - npm run build
    - echo "Деплой на сервер или в облако"
  only:
    - main

Ключевые моменты конфигурации:

  • stages — последовательность этапов пайплайна: установка зависимостей, сборка, тестирование, деплой.
  • cache — кэширование node_modules для ускорения сборки.
  • artifacts — артефакты сборки, которые можно использовать на последующих стадиях или сохранять для загрузки.
  • only: main — деплой выполняется только из основной ветки.

Оптимизация пайплайна

  1. Параллельные сборки: тесты и сборка могут выполняться параллельно для ускорения процесса. Для этого используется директива needs:
test_stencil:
  stage: test
  needs: ["build_stencil"]
  script:
    - npm run test
  1. Кэширование промежуточных данных: кроме node_modules, можно кэшировать директорию сборки .stencil и другие временные файлы, используемые в процессе компиляции:
cache:
  paths:
    - node_modules/
    - .stencil/
  1. Многообразие сред: использование Docker-образов с Node.js позволяет запускать пайплайн на стабильной версии окружения, избегая несовместимости пакетов.

Сборка и тестирование

Stencil использует TypeScript и имеет собственные механизмы сборки компонентов:

  • npm run build — собирает веб-компоненты в директорию www с минификацией, CSS-шейдингом и оптимизацией зависимостей.
  • npm run test — запускает unit-тесты для компонентов с помощью Jest и Puppeteer, включая проверку рендеринга в виртуальном DOM.
  • npm run lint — проверка кода на соответствие стандартам качества и стилю.

В пайплайне GitLab CI эти команды следует запускать на отдельных стадиях, чтобы при ошибке тестов или линтинга сборка не деплоилась.

Деплой компонентов

Деплой Stencil-компонентов в GitLab CI может выполняться различными способами:

  • Статический хостинг: артефакты из www/ можно копировать на сервер или в облачные хранилища (например, GitLab Pages, AWS S3, Netlify).
  • NPM-пакет: компоненты можно публиковать как npm-пакеты. В этом случае на этапе деплоя выполняется npm publish, с учетом секретов GitLab CI (NPM_TOKEN).

Пример деплоя на GitLab Pages:

pages:
  stage: deploy
  script:
    - npm run build
    - mv www public
  artifacts:
    paths:
      - public
  only:
    - main

CI для монорепозиториев и библиотек компонентов

Для крупных проектов с множеством пакетов рекомендуется:

  • Использовать отдельные пайплайны для каждого пакета с rules и changes для экономии ресурсов.
  • Хранить кэш сборки между пакетами, чтобы не пересобирать общие компоненты.
  • Настраивать автоматическую версионизацию и публикацию компонентов через semantic-release или аналогичные инструменты.

Интеграция с тестами визуальных регрессий

Stencil-компоненты хорошо подходят для визуального тестирования:

  • Используются инструменты типа Percy или Loki для проверки изменений в UI.
  • На этапе CI происходит рендеринг компонентов, сравнение скриншотов с базовыми версиями и уведомление об изменениях.
visual_tests:
  stage: test
  script:
    - npm run test:visual

Такой подход обеспечивает контроль качества интерфейсов и предотвращает случайные изменения внешнего вида компонентов.

Вывод

GitLab CI в связке с Stencil позволяет построить надежный процесс непрерывной интеграции и доставки, автоматизируя сборку, тестирование, деплой и проверку компонентов. Правильная конфигурация пайплайна снижает вероятность ошибок и ускоряет выпуск новых версий компонентов, обеспечивая предсказуемое поведение проекта на всех этапах разработки.

Оглавление