計測ツールの選定
調べると以下の 3 つが良さそうだった
- WebPageTest
- PageSpeed Insights
- Lighthouse
今回は、「CI 上で定期的に計測ツールの API を叩いて、結果を Slack に通知する」ということがやりたい
WebPageTest は非同期的に計測が行われるため、テスト中のステータスをチェックする testStatusAPI のポーリング処理を実装するのが面倒なためパス
PageSpeed Insights は結果が JSON 形式で、Slack に通知する時に加工する必要がありそうなのでパス(HTML で見れると良い)
↑ でもちゃんと調べてないので、いいやり方あるかもしれない
今回は、Chrome DevTools で良く使っており、CircleCI 上で簡単に実行できそうな Lighthouse を使うことにした
ただ、将来的には WebPageTest を使ってがっつり計測するのがいいのかなと思う
そもそも Lighthouse は WebPageTest に組み込まれているので
CircleCI の定期実行の設定
---
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
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
こんな感じで入れてみる
## 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 を実行している部分です
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 へ通知
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 に通知されました