lighthouse-ciの使い方メモ

github.com

lighthouseのCIインテグレーションツールがある。

https://github.com/GoogleChrome/lighthouse-ci/blob/master/docs/getting-started.md
を読んだメモを残す

概要

https://github.com/GoogleChrome/lighthouse-ci/blob/master/docs/getting-started.md#overview lighthouse-ciはassert,upload機能を有する。

前準備

https://github.com/GoogleChrome/lighthouse-ci/blob/master/docs/getting-started.md#prerequisites

  • Git管理されておりCIに統合されていること
  • プロダクション環境用のアセットをbuildできること
  • プロダクション用のアセットでサーバを起動できる、もしくは静的サイトであること

結果の収集

https://github.com/GoogleChrome/lighthouse-ci/blob/master/docs/getting-started.md#collect-lighthouse-results

  • レポート結果はGoogleCloudStorageに保存される

ex): https://storage.googleapis.com/lighthouse-infrastructure.appspot.com/reports/xxx.report.html

  • 自前で保存用のサーバを用意することもできる

  • デフォルトではレポートをあげるだけなので
    履歴、diffを見たい -> カスタムサーバたてる
    ビルド落としたい -> assertion入れる、GitHubAppの通知入れる

Note:静的サイトでない場合は下記ドキュメントを参照
https://github.com/GoogleChrome/lighthouse-ci/blob/master/docs/cli.md#autorun

アサーション

https://github.com/GoogleChrome/lighthouse-ci/blob/master/docs/getting-started.md#add-assertions

  • 開発初期はスコアを上げるのが大変なのでアサーションせずにレポートだけしましょう
  • プロジェクトが成熟したらアサーションでビルドを落としましょう
  • 設定ファイルに記述できるのでプロジェクトの特性によってアサーションを切ることも可能

GitHub Status Checks

https://github.com/GoogleChrome/lighthouse-ci/blob/master/docs/getting-started.md#github-status-checks GitHub Appを導入すると - Lighthouseで失敗したかどうかわかるようになる - ビルド結果にレポートのURLが表示される

リポジトリにAppをインストールするとTokenが発行されるので変数としてCIに読み込む

CI Serverの起動

https://github.com/GoogleChrome/lighthouse-ci/blob/master/docs/getting-started.md#the-lighthouse-ci-server

  • 下記に従ってCI Serverをたてる

https://github.com/GoogleChrome/lighthouse-ci/blob/master/docs/recipes/docker-server/README.md

  • 下記コマンドでCI Serverを設定する
$lhci wizard
  • 一つのビルドに対して一つのチェックしかできないので注意

GitHub Actions

Actionが公開されている https://github.com/GoogleChrome/lighthouse-ci#related-projects