Continuous Deployment

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

Архитектура проекта Stencil

Проект Stencil строится вокруг компонентов, написанных с использованием TypeScript и JSX. Ключевые элементы архитектуры:

  • Компоненты (.tsx) — атомарные элементы интерфейса.
  • Стили (.css/.scss) — применяются локально или глобально.
  • Сборка (stencil.config.ts) — конфигурация билд-процесса, включая поддержу TypeScript, JSX, генерацию форматов (esm, cjs, custom-elements).
  • Тесты (.spec.ts) — модульные тесты на Jest.

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

Настройка CI/CD для Stencil

1. Выбор системы CI/CD

Популярные решения для Stencil-проектов:

  • GitHub Actions — интеграция с репозиторием и гибкая настройка workflow.
  • GitLab CI/CD — удобен при использовании self-hosted runners.
  • CircleCI / Jenkins — подходят для сложных конвейеров с несколькими окружениями.

2. Структура workflow

Основные этапы:

  1. Checkout и установка зависимостей:

    - name: Checkout repository
  uses: actions/checkout@v3

- name: Install dependencies
  run: npm ci

  2. Сборка проекта:

    - name: Build Stencil components
  run: npm run build

    Важно убедиться, что конфигурация stencil.config.ts корректно генерирует нужные форматы сборки.

  3. Запуск тестов:

    - name: Run tests
  run: npm test

  4. Публикация пакета (если это npm-библиотека):

    - name: Publish to npm
  run: npm publish
  env:
    NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

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

Для CD-процессов критически важно автоматическое управление версиями. Стандартные подходы:

  • Semantic Release — анализирует коммиты (feat, fix, chore) и увеличивает версию (major, minor, patch) автоматически.
  • Git Tags — каждый успешный билд может создавать тег с версией для публикации.

Пример настройки semantic-release для Stencil:

{
  "branches": ["main"],
  "plugins": [
    "@semantic-release/commit-analyzer",
    "@semantic-release/release-notes-generator",
    "@semantic-release/npm",
    "@semantic-release/github"
  ]
}

Хранение артефактов сборки

Stencil-компоненты можно распространять в разных форматах. В CD важно сохранять артефакты:

  • ES Modules (esm) — для современных приложений.
  • Custom Elements (custom-elements) — для интеграции с другими фреймворками.
  • Types (types) — для TypeScript-подсказок.

Артефакты можно хранить на:

  • Nexus / Artifactory — корпоративное решение.
  • GitHub Packages — интеграция с репозиторием.
  • npm Registry — публичная или приватная публикация.

Стратегии развертывания

  1. Blue/Green Deployment — два окружения, переключение трафика после успешного теста.
  2. Canary Releases — постепенное внедрение новой версии на часть пользователей.
  3. Feature Toggles — включение новых компонентов через конфигурацию без деплоя нового кода.

Stencil-компоненты хорошо сочетаются с Canaries и Feature Toggles, так как их можно динамически подключать через <script> или npm-пакеты.

Мониторинг и откат

Для стабильной CD важно иметь механизмы мониторинга:

  • Логи сборки — GitHub Actions или Jenkins автоматически сохраняют вывод.
  • Error Reporting — интеграция с Sentry или LogRocket.
  • Автоматический откат — при неудачном деплое workflow может переключить на предыдущую стабильную версию.

Интеграция с фронтенд-экосистемой

Stencil-компоненты могут использоваться в Angular, React, Vue или чистом HTML. CD-процесс должен учитывать:

  • Совместимость с целевым окружением.
  • Подключение через CDN или npm.
  • Обновление документации через Storybook или MDX после каждой сборки.

Оптимизация CI/CD

  • Кэширование зависимостей (node_modules) и результатов сборки (dist/) ускоряет pipeline.
  • Параллельные шаги — тестирование, линтинг и сборка можно выполнять одновременно.
  • Lint и форматирование — автоматический контроль качества кода до сборки.

Пример полного GitHub Actions workflow

name: CD Pipeline

on:
  push:
    branches: [main]

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - name: Install dependencies
        run: npm ci
      - name: Lint code
        run: npm run lint
      - name: Run tests
        run: npm test
      - name: Build Stencil components
        run: npm run build
      - name: Publish npm package
        run: npm publish
        env:
          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

Этот конвейер обеспечивает автоматический цикл: коммит → тест → сборка → публикация.

Continuous Deployment в Stencil требует четкой структуры проекта, правильной конфигурации сборки и тестирования, надежного управления версиями и интеграции с инструментами мониторинга. Правильно настроенный CD позволяет быстро и безопасно доставлять новые версии компонентов в любую среду.

Оглавление