Как добавить Lighthouse в систему непрерывной интеграции, например GitHub Actions.
Lighthouse CI – это набор инструментов для использования Lighthouse во время непрерывной интеграции. Lighthouse CI можно интегрировать в рабочие процессы разработчиков разными способами. В этом руководстве рассматриваются следующие темы:
- С помощью интерфейса командной строки Lighthouse CI.
- Настройка поставщика CI для запуска Lighthouse CI.
- Настройка GitHub Action и проверки статуса для Lighthouse CI. Это позволит автоматически показывать результаты Lighthouse в pull-запросах GitHub.
- Создание панели мониторинга производительности и хранилища данных для отчетов Lighthouse.
Обзор
Lighthouse CI – это набор бесплатных инструментов, которые упрощают использование Lighthouse для мониторинга производительности. Один отчет Lighthouse дает представление о производительности веб-страницы на момент его запуска; Lighthouse CI показывает, как эти результаты менялись с течением времени. Это можно использовать для определения влияния конкретных изменений кода или для обеспечения соблюдения пороговых значений производительности во время процессов непрерывной интеграции. Хотя мониторинг производительности является наиболее распространенным вариантом использования Lighthouse CI, его можно использовать для мониторинга других аспектов отчета Lighthouse, например SEO или доступности.
Основные функции Lighthouse CI предоставляются интерфейсом командной строки Lighthouse CI. (Примечание. Это не то же самое, что Lighthouse CLI.) Интерфейс командной строки Lighthouse CI предоставляет набор команд для использования Lighthouse CI. Например, команда autorun запускает Lighthouse несколько раз, определяет медианный отчет и загружает его в хранилище. Это поведение можно настроить, передав дополнительные флаги или изменив файл конфигурации Lighthouse CI lighthouserc.js.
Хотя основные функции Lighthouse CI в основном инкапсулированы в интерфейсе командной строки Lighthouse CI, Lighthouse CI обычно используется одним из следующих способов:
- Использование Lighthouse CI в рамках непрерывной интеграции
- Использование Lighthouse CI GitHub Action, который запускается и комментирует каждый запрос на извлечение
- Отслеживание производительности с течением времени с помощью панели управления, предоставляемой Lighthouse Сервер.
Все эти подходы основаны на Lighthouse CI CLI.
Альтернативой Lighthouse CI являются сторонние службы мониторинга производительности или написание собственного скрипта для сбора данных о производительности в процессе CI. Сторонние сервисы могут быть полезны, если вы хотите, чтобы кто-то другой управлял вашим сервером мониторинга производительности и тестовыми устройствами, или если вам нужны возможности уведомлений (например, интеграция с электронной почтой или Slack) без необходимости создавать эти функции самостоятельно.
Как использовать Lighthouse CI локально
В этом разделе объясняется, как запустить и установить Lighthouse CI CLI локально и как настроить lighthouserc.js. Локальный запуск Lighthouse CI CLI – самый простой способ убедиться, что файл lighthouserc.js настроен правильно.
Установите интерфейс командной строки Lighthouse CI.
npm install -g @lhci/cliЧтобы настроить Lighthouse CI, поместите файл
lighthouserc.jsв корневой каталог репозитория проекта. Этот файл является обязательным и содержит информацию о конфигурации, связанную с Lighthouse CI. Хотя Lighthouse CI можно настроить для использования без репозитория git, инструкции в этой статье предполагают, что репозиторий вашего проекта настроен для использования git.В корневом каталоге репозитория создайте файл конфигурации
lighthouserc.js.touch lighthouserc.jsДобавьте в файл
lighthouserc.jsследующий код: Этот код представляет собой пустую конфигурацию Lighthouse CI. Вы будете добавлять в эту конфигурацию на следующих шагах.module.exports = { ci: { collect: { /* Add configuration here */ }, upload: { /* Add configuration here */ }, }, };Каждый раз, когда запускается Lighthouse CI, он запускает сервер для обслуживания вашего сайта. Этот сервер позволяет Lighthouse загружать ваш сайт, даже если другие серверы не работают. Когда Lighthouse CI завершит работу, он автоматически выключит сервер. Чтобы показ работал корректно, необходимо настроить свойства
staticDistDirилиstartServerCommand.Если у вас статический сайт, добавьте свойство
staticDistDirв объектci.collect, чтобы указать, где находятся статические файлы. Lighthouse CI будет использовать собственный сервер для обслуживания этих файлов во время тестирования вашего сайта. Если сайт не статический, добавьте свойствоstartServerCommandв объектci.collect, чтобы указать команду, которая запускает сервер. Lighthouse CI запустит новый процесс сервера во время тестирования и завершит его после.// Static site example collect: { staticDistDir: './public', }// Dynamic site example collect: { startServerCommand: 'npm run start', }Добавьте свойство
urlв объектci.collect, чтобы указать URL, которые Lighthouse CI должен проверить с помощью Lighthouse. Значение свойстваurlдолжно быть представлено в виде массива URL, который может содержать один или несколько URL. По умолчанию Lighthouse CI запускает Lighthouse три раза для каждого URL.collect: { // ... url: ['http://localhost:8080'] }Добавьте свойство
targetк объектуci.uploadи задайте значение'temporary-public-storage'. Отчеты Lighthouse, собранные Lighthouse CI, будут загружены во временное общедоступное хранилище. Отчет будет храниться там в течение семи дней, а затем будет автоматически удален. В этом руководстве по настройке используется вариант загрузки "Временное общедоступное хранилище", поскольку его можно быстро настроить. Информацию о других способах хранения отчетов Lighthouse можно найти в документации.upload: { target: 'temporary-public-storage', }Место хранения отчета будет выглядеть примерно так:
https://storage.googleapis.com/lighthouse-infrastructure.appspot.com/reports/1580152437799-46441.report.html(Этот URL не будет работать, поскольку отчет уже удален.)
Запустите Lighthouse CI CLI из терминала с помощью команды
autorun. Lighthouse будет запущен три раза, и будет загружен медианный отчет.lhci autorunЕсли вы правильно настроили Lighthouse CI, выполнение этой команды должно привести к выводу, аналогичному следующему:
✅ .lighthouseci/ directory writable ✅ Configuration file found ✅ Chrome installation found ⚠️ GitHub token not set Healthcheck passed! Started a web server on port 65324... Running Lighthouse 3 time(s) on http://localhost:65324/index.html Run #1...done. Run #2...done. Run #3...done. Done running Lighthouse! Uploading median LHR of http://localhost:65324/index.html...success! Open the report at https://storage.googleapis.com/lighthouse-infrastructure.appspot.com/reports/1591720514021-82403.report.html No GitHub token set, skipping GitHub status check. Done running autorun.Сообщение
GitHub token not setв консоли можно игнорировать. Токен GitHub необходим, только если вы хотите использовать Lighthouse CI с GitHub Action. Как настроить GitHub Action, описано далее в этой статье.Нажав на ссылку в выходных данных, которая начинается с
https://storage.googleapis.com..., вы перейдете к отчету Lighthouse, соответствующему медианному запуску Lighthouse.Настройки по умолчанию, используемые
autorun, можно переопределить в командной строке или в файлеlighthouserc.js. Например, конфигурацияlighthouserc.jsниже указывает, что при каждом выполненииautorunдолжно быть собрано пять запусков Lighthouse.Обновите
lighthouserc.js, чтобы использовать свойствоnumberOfRuns:module.exports = { // ... collect: { numberOfRuns: 5 }, // ... }, };Повторно выполните команду
autorun:lhci autorunВ выводе терминала должно быть указано, что Lighthouse был запущен пять раз, а не три, как по умолчанию:
✅ .lighthouseci/ directory writable ✅ Configuration file found ✅ Chrome installation found ⚠️ GitHub token not set Healthcheck passed! Automatically determined ./dist as `staticDistDir`. Set it explicitly in lighthouserc.json if incorrect. Started a web server on port 64444... Running Lighthouse 5 time(s) on http://localhost:64444/index.html Run #1...done. Run #2...done. Run #3...done. Run #4...done. Run #5...done. Done running Lighthouse! Uploading median LHR of http://localhost:64444/index.html...success! Open the report at https://storage.googleapis.com/lighthouse-infrastructure.appspot.com/reports/1591716944028-6048.report.html No GitHub token set, skipping GitHub status check. Done running autorun.Чтобы узнать о других вариантах конфигурации, ознакомьтесь с документацией по конфигурации Lighthouse CI.
Настройте процесс непрерывной интеграции для запуска Lighthouse CI
Lighthouse CI можно использовать с вашим любимым инструментом CI. В разделе Configure Your CI Provider (Настройка поставщика непрерывной интеграции) документации по Lighthouse CI приведены примеры кода, показывающие, как включить Lighthouse CI в файлы конфигурации распространенных инструментов непрерывной интеграции. В частности, эти примеры кода показывают, как запустить Lighthouse CI для сбора показателей производительности в процессе CI.
Использование Lighthouse CI для сбора показателей производительности – хорошее начало для мониторинга производительности. Однако продвинутые пользователи могут пойти дальше и использовать Lighthouse CI, чтобы отклонять сборки, если они не соответствуют заранее определенным критериям, например не проходят определенные проверки Lighthouse или не соответствуют всем бюджетам производительности. Это поведение настраивается с помощью свойства assert в файле lighthouserc.js.
Lighthouse CI поддерживает три уровня утверждений:
off: игнорировать утвержденияwarn: вывод ошибок в stderrerror– выводить ошибки в stderr и выходить из Lighthouse CI с ненулевым кодом выхода.
Ниже приведен пример конфигурации lighthouserc.js, которая включает утверждения. Оно задает утверждения для оценок производительности и специальных возможностей Lighthouse. Чтобы попробовать, добавьте утверждения, показанные ниже, в файл lighthouserc.js, а затем снова запустите Lighthouse CI.
module.exports = {
ci: {
collect: {
// ...
},
assert: {
assertions: {
'categories:performance': ['warn', {minScore: 1}],
'categories:accessibility': ['error', {minScore: 1}]
}
},
upload: {
// ...
},
},
};
Вывод в консоли будет выглядеть следующим образом:
Дополнительную информацию об утверждениях Lighthouse CI можно найти в документации.
Настройте действие GitHub для запуска Lighthouse CI
Для запуска Lighthouse CI можно использовать GitHub Action. В результате отчет Lighthouse будет создаваться каждый раз, когда изменения кода будут отправляться в любую ветвь хранилища GitHub. Используйте его вместе с проверкой статуса, чтобы показывать эти результаты в каждом pull-запросе.
В корневом каталоге репозитория создайте каталог с названием
.github/workflows. В этом каталоге будут храниться рабочие процессы проекта. Рабочий процесс – это процесс, который запускается в определенное время (например, когда отправляется код) и состоит из одного или нескольких действий.mkdir .github mkdir .github/workflowsВ каталоге
.github/workflowsсоздайте файл с названиемlighthouse-ci.yaml. Этот файл будет содержать конфигурацию для нового рабочего процесса.touch lighthouse-ci.yamlДобавьте следующий текст в
lighthouse-ci.yaml.name: Build project and run Lighthouse CI on: [push] jobs: lhci: name: Lighthouse CI runs-on: ubuntu-latest steps: - uses: actions/checkout@v1 - name: Use Node.js 10.x uses: actions/setup-node@v1 with: node-version: 10.x - name: npm install run: | npm install - name: run Lighthouse CI run: | npm install -g @lhci/cli@0.3.x lhci autorun --upload.target=temporary-public-storage || echo "LHCI failed!"Эта конфигурация настраивает рабочий процесс, состоящий из одного задания, которое будет выполняться всякий раз, когда новый код отправляется в репозиторий. Эта работа состоит из четырех этапов:
- Проверьте репозиторий, в котором будет выполняться Lighthouse CI.
- Установите и настройте Node
- Установите необходимые пакеты npm
- Запустите Lighthouse CI и загрузите результаты во временное общедоступное хранилище.
Зафиксируйте эти изменения и отправьте их в GitHub. Если вы правильно выполнили описанные выше шаги, отправка кода в GitHub запустит рабочий процесс, который вы только что добавили.
Чтобы убедиться, что Lighthouse CI запущен, и посмотреть созданный им отчет, перейдите на вкладку Actions (Действия) в проекте. Вы должны увидеть рабочий процесс Build project and Run Lighthouse CI, указанный под вашим последним коммитом.
Чтобы перейти к отчету Lighthouse, соответствующему определенному коммиту, откройте вкладку Actions (Действия). Нажмите на коммит, выберите шаг рабочего процесса Lighthouse CI и разверните результаты шага run Lighthouse CI.
Вы только что настроили GitHub Action для запуска Lighthouse CI. Это наиболее полезно при использовании в сочетании с проверкой статуса GitHub.
Как настроить проверку статуса GitHub
Проверка статуса (если она настроена) – это сообщение, которое появляется в каждом запросе на извлечение и обычно содержит такую информацию, как результаты теста или успешность сборки.
Ниже описано, как настроить проверку статуса для Lighthouse CI.
Перейдите на страницу приложения Lighthouse CI в GitHub и нажмите Configure (Настроить).
Если вы состоите в нескольких организациях на GitHub, выберите ту, которой принадлежит хранилище, где вы хотите использовать Lighthouse CI.
Выберите All repositories (Все хранилища), если хотите включить Lighthouse CI во всех хранилищах, или Only select repositories (Только выбранные хранилища), если хотите использовать его только в определенных хранилищах, а затем выберите хранилища. Затем нажмите Install & Authorize (Установить и авторизовать).
Скопируйте показанный токен. Он понадобится вам на следующем шаге.
Чтобы добавить токен, перейдите на страницу Settings (Настройки) репозитория GitHub, нажмите Secrets (Секреты), а затем – Add a new secret (Добавить секрет).
В поле Name (Название) введите
LHCI_GITHUB_APP_TOKEN, а в поле Value (Значение) – токен, скопированный на предыдущем шаге. Затем нажмите кнопку Add secret (Добавить секрет).Перейдите к файлу
lighthouse-ci.yamlи добавьте новый секрет среды в команду run Lighthouse CI.
- name: run Lighthouse CI
run: |
npm install -g @lhci/cli@0.3.x
lhci autorun --upload.target=temporary-public-storage || echo "LHCI failed!"
+ env:
+ LHCI_GITHUB_APP_TOKEN: $
- Проверка статуса готова к использованию. Чтобы протестировать его, создайте новый pull-запрос или отправьте коммит в существующий pull-запрос.
Как настроить сервер непрерывной интеграции Lighthouse
Сервер Lighthouse CI предоставляет панель мониторинга для изучения исторических отчетов Lighthouse. Он также может служить частным долгосрочным хранилищем данных для отчетов Lighthouse.
- Выберите коммиты для сравнения.
- Насколько изменилась оценка Lighthouse между двумя фиксациями.
- В этом разделе показаны только те показатели, которые изменились между двумя фиксациями.
- Регрессии выделены розовым цветом.
- Улучшения выделены синим цветом.
Lighthouse CI Server лучше всего подходит для пользователей, которым удобно развертывать собственную инфраструктуру и управлять ею.
Информацию о настройке сервера Lighthouse CI, в том числе инструкции по использованию Heroku и Docker для развертывания, можно найти в этом руководстве.