Lighthouse Botを設定する方法 with TravisCI
動機
私は以前、ポートフォリオサイトを作成しました。 Pocketに130ぐらいポケットしてもらった「Lighthouseを使ってVue.jsのサイトを爆速化する」というものでLighthouseを使ったフロントエンドのパフォーマンスチューニングを紹介しました。かなり反響があり、評判もよく、これを自分が得意なSREの分野、つまり自動化できないかなと思って、この記事を書こうと思いました。
その記事はこちらです。最後の方に「Lighthouse Botもあるよ〜」くらいのノリで紹介をしていました。
やはり、SREならば全エンジニアに対してアプリケーションのフィードバックを即座に、そして円滑に還元することがビジネス要件的にも、エンジニアとしても価値をもたらす必要性はあるでしょう。
Travisでしか執筆現在は導入することができないので注意してください。Auto Lighthouse Botで設定するためだけにTravisを運用してみます。
アーキテクチャ図
今回、採用したアーキテクチャは以下の通りです。
HostとしてGoogle App Engine(GAE)、CIとしてCircle CI、コードレジストリ、バージョニングとしてGithubを採用しました。
前提条件
本記事に本質的でないCircleCIとの連携からは説明しません(下の赤枠で囲った箇所)。適宜、公式ドキュメントを参照してください。
LighthouseのAPI Keyを取得して、GAEにデプロイをするところから解説をします。
Lighthouse CLIツール
試しにLighthouse CLIツールを使ってみましょう。
まず、Lighthouse CLIをインストールします。
npm i -g lighthouse
そして測定します。測定したあとにすぐに結果をブラウザでみたい時は--viewオプションをつけます。
lighthouse https://your.url.com --view
例えば、自分のこのはてなブログを測定してみます。実行が終わるとブラウザに結果が表示されました。
包括的にページの状態が分かり、Suggestionなど有用な解決策を提示してくれます。
Lighthouse Botって？
GithubのRepositoryはこちらです。まだBeta版なので注意してください。
Lighthouse CLIとは異なるので注意してください。強いていうならばLighthouse CLIとGithubのCheckAPIと連携を自動的にしてくれるものぐらいに理解するといいかもしれません。
以前はLighthouse Botではなくて、Lighthouse CIと呼ばれていましたが変更されています。
Lighthouse CLIをCIの中で実行できて、Pull Request毎にできます。
つまり、Pull Requestを送るたびにスコアなどを参照することができるため、CIとして早期フィードバックをエンジニアに与えることができます。
変更した箇所がWeb Performanceに与える影響を即座に知ることができます。
Lighthouse BotはGoogleのServerで実行されますが、自分のCIで自ら実行することも可能です。
評価は5つのカテゴリに分類されます。
Performance: Webページの読み込み速度などのパフォーマンスProgressive Web App: PWAの実施具合Accessibility: アクセシビリティの実施具合Best Practice: ベストプラクティスの実施具体SEO: SEO対策の実施具合
敷居値を設定することもでき、Github Check APIを使って、例えば敷居値よりを下回るPerformanceならばMergeができないようできます。
導入の仕方
1. LighthousebotをRepoに招待する
まずRepositoryの"Settings" -> "Collaborators"から"lighthousebot"を招待します。
私も気になっていたのですがAwaiting Collaborator responseと出て、レスポンス待ちになりますが、気にする必要はありません。
しばらくしたら、運営による手動操作で承認されるみたいです。たまに見逃してみまうことがあるみたいで、2段階認証を設定している場合は難しいそうです。
2. API Keyをリクエストする
次にこのリンクでAPI Keyをリクエストします。
するとメールアドレスにAPI Keyが送信されます。
このAPI Keyは大切に保管をしてください。このAPI KeyはTraivisの環境変数として使います。
LIGHTHOUSE_API_KEYをkeyとして設定します。
これでAPI Keyを設定することができました。
3. GCP環境を準備
gcloudコマンドが必要なので、インストールしていない人は以下のリンクでインストールしてください。
https://cloud.google.com/sdk/docs/quickstart-macos?hl=ja
確認までに
which gcloud => ~/google-cloud-sdk/bin/gcloud
とPATHが通っているのかを確認してください。
そして、まず最初に認証を済ませます。
gcloud auth login
Python2系が必要なため3系を使っている人は今回のディレクトリで
pyenv local 2.7.15
などと適宜変更してください。
そして、認証を済ませると以下のように今回、使用するプロジェクトを作成します。
gcloud projects create test-lighthousebot-20190225 --name=test-lighthousebot
そして作成できたら、確認してみましょう。
gcloud projects list --filter="name:test-lighthousebot"
そして、以下のように取得できると作成できています。
PROJECT_ID NAME PROJECT_NUMBER test-lighthousebot-20190225 test-lighthousebot 833687141349
4. ウェブサイトをデプロイする
GCP環境へのCircle CIへのデプロイは以下の記事で解説したことがあります。
今回も似たようなことをします。
language: node_js node_js: - "8.1.3" install: - npm install script: - npm run build after_success: - gcloud app deploy --project="test-lighthouse-bot" - npm run lh -- https://staging.example.com
5. Lighthouse CLIを追加する
Lighthousebotを呼び出すために以下のようにインストールします。
npm i --save-dev https://github.com/GoogleChromeLabs/lighthousebot
そして便宜上、package.jsonで設定をします。
"scripts": { "lh": "lighthousebot" }
そして、以下の箇所が該当しています。
after_success: - ... - npm run lh -- https://staging.example.com
ここのhttps://...のURLは、自分とデプロイしたURLで置き換えてください。
プルリクエストを送ると、スコアがコメントされます。
5. 敷居値を設定する
以下のように設定項目があります。
--perf # パフォーマンス値 --pwa # PWAスコア --a11y # アクセシビリティスコア --bp # ベストプラクティススコア --seo # SEOスコア
--seo=95のように敷居値を設定することで、それ以下はMergeできないように変更することができます。
まとめ
今回はTravisを使って実施しましたが、今後はCircleCIなどDocker環境で既存の環境に親和性の高い方法を探していくのが重要だなと思いました。
また、投稿すると思います。最後までありがとうございます。
