計測ツールの選定
調べると以下の 3 つが良さそうだった
- WebPageTest
- PageSpeed Insights
- Lighthouse
今回は、「CI 上で定期的に計測ツールの API を叩いて、結果を Slack に通知する」ということがやりたい
WebPageTest は非同期的に計測が行われるため、テスト中のステータスをチェックする testStatusAPI のポーリング処理を実装するのが面倒なためパス
PageSpeed Insights は結果が JSON 形式で、Slack に通知する時に加工する必要がありそうなのでパス（HTML で見れると良い）
↑ でもちゃんと調べてないので、いいやり方あるかもしれない
今回は、Chrome DevTools で良く使っており、CircleCI 上で簡単に実行できそうな Lighthouse を使うことにした
ただ、将来的には WebPageTest を使ってがっつり計測するのがいいのかなと思う
そもそも Lighthouse は WebPageTest に組み込まれているので
CircleCI の定期実行の設定
## .circleci/config.yml --- workflows: version: 2 nightly: triggers: - schedule: cron: '00 0 * * 1' filters: branches: only: - master jobs: - lighthouse
時間は UTC なので、上記だと午前 9 時に実行される
CircleCI の Lighthouse 実行の設定
CI 上でヘッドレスブラウザで Lighthouse を動かす想定なので、必要なプラグインを用意してあげる必要がある
以下を参考に設定 github.com
yarn add -D lighthouse
## .circleci/config.yml version: 2 jobs: lighthouse: ... - run: name: Lighthouse command: ./node_modules/.bin/lighthouse --chrome-flags="--headless" --output-path=./lighthouse-results.html https://github.com ...
当然ブラウザも必要なので、Chromium をインストールする
CI でフロントエンドのツールを動かす時は Node.js がインストールされた Docker イメージを使って実行しているので、以下のように Dockerfile にコマンドを付け足す
## Dockerfile RUN apt-get install chromium
Lighthouse が動かず苦戦。。
たぶん上記の設定で動く人は動くのだと思うが、私の場合は全然動かなったので、動かすまでにやったことを備忘録として書いておく
謎エラー
method <= browser ERR:error Browser.getVersion +1ms
Chromium 起因で起きてるのは、間違いないのだが調べても原因不明
以下を参考にヘッドレスではなく、フルブラウザモードで試してみる github.com
chromium-browser 入らない問題
こんな感じで入れてみる
## Dockerfile RUN apt-get install chromium-browser xvfb
docker buildすると以下のエラー
E: Package 'chromium-browser' has no installation candidate
え？無いの？
エラーを調べると同じエラーに遭遇している人を発見 stackoverflow.com
wget で Chrome の deb パッケージをダウンロードして、インストールするようにした
## Dockerfile
RUN apt-get install -yq --no-install-recommends \
gconf-service libasound2 libatk1.0-0 libcairo2 libcups2 libfontconfig1 libgdk-pixbuf2.0-0 \
libgtk-3-0 libnspr4 libpango-1.0-0 libxss1 fonts-liberation libappindicator1 libnss3 \
lsb-release xdg-utils
RUN wget https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb
RUN dpkg -i google-chrome-stable_current_amd64.deb; apt-get -fy install
ヘッドレスモードじゃないと動かない
ヘッドレスモードを解除すると以下エラーになる
ChromeLauncher:error [0127/120527.937238:ERROR:nacl_helper_linux.cc(310)] NaCl helper process running without a sandbox! ChromeLauncher:error Most likely you need to configure your SUID sandbox correctly
やっぱりヘッドレスモードにする（--chrome-flags="--headless"）
sandbox のエラー
Running as root without --no-sandbox is not supported. See https://crbug.com/638180.
--chrome-flags="--no-sandbox"を付けることにする
ようやく動いた
今回使用した Dockerfile です github.com For Puppeteer って所は、今回関係ないので無視してください
CircleCI で Lighthouse を実行している部分です
## .circleci/config.yml version: 2 jobs: lighthouse: ... - run: name: Lighthouse command: ./node_modules/.bin/lighthouse --chrome-flags="--headless --no-sandbox" --output-path=./lighthouse-results.html https://github.com ...
Slack へ通知
## .circleci/config.yml version: 2 jobs: --- - store_artifacts: path: ./lighthouse-results.html - run: name: Send to Slack command: | PAYLOAD=`cat << EOF { "attachments": [ { "pretext": "Lighthouse result", "text": "https://$CIRCLE_BUILD_NUM-XXXXXXXXX-gh.circle-artifacts.com/0/root/project/lighthouse-results.html", } ] } EOF` curl -X POST -d "payload=$PAYLOAD" $SLACK_WEBHOOK_URL
store_artifacts で Lighthouse の結果を CircleCI 上に保存し、Artifacts というタブから Web 上で見れるようにする
後は、https://$CIRCLE_BUILD_NUM-XXXXXXXXX-gh.circle-artifacts.com/0/root/project/lighthouse-results.htmlのように Artifacts の URL を作って Slack に送信する
CIRCLE_BUILD_NUM は、CircleCI にデフォルトで定義してある現在のビルド番号を持つ環境変数
XXXXXXXXX の部分は、CircleCI のリポジトリごとに振られる番号が入るっぽいので、1 回 Artifacts を作って確かめてみてください
動作確認
CircleCI 全体のコードはこちらにあります github.com
CircleCI の定期ジョブで lighthouse ジョブが実行されると
CircleCI の Artifacts タブに Lighthouse の実行結果 HTML が保存され
もちろん結果も見れて
実行結果 HTML が Slack に通知されました
