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

Для автоматизации анализа производительности, доступности и SEO веб-приложений в процессе непрерывной интеграции удобно использовать Lighthouse через командную строку или Node.js API. В CI/CD-пайплайнах это позволяет получать отчёты при каждом коммите или деплое, выявлять регрессии и автоматически блокировать некачественные изменения.

Установка Lighthouse

Lighthouse устанавливается глобально через npm:

npm install -g lighthouse

Для интеграции в Node.js-проекты предпочтительнее локальная установка:

npm install --save-dev lighthouse

Локальная установка обеспечивает стабильные версии для всех участников команды и позволяет вызывать Lighthouse из скриптов npm.

Использование Lighthouse CLI в CI/CD

Основные команды для запуска:

lighthouse https://example.com --output json --output-path ./reports/report.json
  • --output json — вывод отчёта в формате JSON, удобном для обработки скриптами CI.
  • --output-path — путь, куда сохраняется отчёт.

Для HTML-отчёта можно использовать:

lighthouse https://example.com --output html --output-path ./reports/report.html

В CI/CD предпочтительно формировать JSON-отчёты, чтобы можно было парсить метрики и проверять пороговые значения.

Запуск через Node.js API

Node.js API обеспечивает гибкость для сложных сценариев:

const lighthouse = require('lighthouse');
const chromeLauncher = require('chrome-launcher');

(async () => {
  const chrome = await chromeLauncher.launch({chromeFlags: ['--headless']});
  const options = {logLevel: 'info', output: 'json', port: chrome.port};
  const runnerResult = await lighthouse('https://example.com', options);

  const reportJson = runnerResult.report;
  const fs = require('fs');
  fs.writeFileSync('lighthouse-report.json', reportJson);

  await chrome.kill();
})();

Ключевые моменты:

  • Используется headless Chrome, который запускается автоматически.
  • Отчёт можно сохранить в любом формате: JSON, HTML, CSV (с помощью конвертации).
  • API позволяет интегрировать дополнительные проверки, фильтровать метрики и объединять отчёты в общий пайплайн.

Интеграция в Jenkins

Для Jenkins можно добавить этап в Jenkinsfile:

pipeline {
  agent any
  stages {
    stage('Lighthouse Audit') {
      steps {
        sh 'npx lighthouse https://example.com --output json --output-path reports/lighthouse.json'
      }
      post {
        always {
          archiveArtifacts artifacts: 'reports/lighthouse.json', allowEmptyArchive: true
        }
      }
    }
  }
}

Особенности:

  • archiveArtifacts сохраняет отчёты как артефакты сборки.
  • Использование npx позволяет запускать локально установленную версию Lighthouse без глобальной установки.
  • Пороговые значения можно проверять через дополнительные скрипты на Node.js.

Интеграция в GitHub Actions

Пример workflow:

name: Lighthouse Audit
on:
  push:
    branches: [ main ]
jobs:
  lighthouse:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - name: Install Node.js
        uses: actions/setup-node@v3
        with:
          node-version: '20'
      - run: npm install
      - run: npx lighthouse https://example.com --output json --output-path ./reports/lighthouse.json
      - name: Upload Report
        uses: actions/upload-artifact@v3
        with:
          name: lighthouse-report
          path: ./reports/lighthouse.json

Пояснения:

  • Отчёты автоматически загружаются как артефакты workflow.
  • Можно запускать анализ на разных URL-адресах и разных окружениях, используя matrix strategy.
  • Включение headless Chrome не требует отдельной установки на GitHub Actions runners.

Настройка пороговых значений (Budgets)

Для контроля качества полезно использовать performance budgets:

{
  "performanceBudget": {
    "metrics": {
      "first-contentful-paint": 2000,
      "interactive": 3000
    },
    "resourceCounts": {
      "script": 20,
      "image": 50
    }
  }
}

В CI/CD можно добавить скрипт на Node.js, который парсит report.json и прерывает сборку при превышении лимитов.

const report = require('./reports/lighthouse.json');
if (report.categories.performance.score * 100 < 90) {
  console.error('Performance budget exceeded');
  process.exit(1);
}

Автоматизация публикации отчётов

  • HTML-отчёты можно публиковать на внутреннем сервере или через GitHub Pages.
  • JSON-отчёты позволяют строить визуализацию в Dashboard, например с использованием Grafana или Kibana.
  • Для больших проектов удобно хранить отчёты по каждой сборке и сравнивать тренды производительности.

Интеграция с Docker

Для контейнеризированного CI можно использовать официальный Docker-образ Lighthouse:

docker run --rm -v $(pwd)/reports:/home/chrome/reports lighthouse/lighthouse https://example.com --output json --output-path /home/chrome/reports/report.json
  • Позволяет запускать Lighthouse в стандартизированном окружении.
  • Не требует установки Chrome и Node.js на хост-системе.
  • Идеально для пайплайнов в Kubernetes или GitLab CI.

Практические советы

  • Всегда использовать headless режим для CI, чтобы избежать зависаний.
  • Сохранять отчёты в виде артефактов сборки для последующего анализа.
  • Устанавливать строгие пороговые значения для ключевых метрик (Performance, Accessibility, SEO, Best Practices).
  • Использовать Node.js API для кастомных проверок и автоматического уведомления команды о регрессиях.
  • Публиковать отчёты на внутренних порталах, чтобы отслеживать тренды качества приложений.
Оглавление