ユアマイスター株式会社エンジニアブログ

ユアマイスター株式会社のエンジニアが日々徒然。

LighthouseレポートをCircle CIで自動実行 #lighthouse

f:id:yourmystar_engineer:20191206165313j:plain


この記事はCircleCI Advent Calendar 2019 18日目の記事です。


どうも。ユアマイスター星(@inase17000)です。

ユアマイスターでは定期的にPage Speed Insightsを活用して、フロントエンドのパフォーマンスを定点観測しています。Page Speed Insightsは、内部的にLighthouseを活用しており結局見ていくべきはLighthouseレポートであると考えています。

Circle CIを絡めて、リリースとともに定点観測を行えるような仕組みを導入したくて今回お手軽版で実装を試してみました。めちゃくちゃ簡単にできたのでおすすめです。

Lighthouseについて

過去にLighthouseについてまとめた記事があります。参考にしてください!

yourmystar-engineer.hatenablog.jp

yourmystar-engineer.hatenablog.jp

Lighthouseレポートを定期的にやる方法

Lighthouseレポートを定期的に行い、管理するサイトのフロントエンドパフォーマンス改善に活かしていきたいと考えています。

1. 手動で実行

最初は、僕らは手動でやっていました。 Lighthouse Chrome 拡張機能をインストールし、ブラウザ上で結果を知る形です。ただ、継続的な改善を考えていこうとするとどうしてもレポートは自動化しなければなりません。

2. Google App Scripts を使い、トリガー実行でPageSpeed Insights API の結果をスプレッドシートに記載&Slack通知&MackerelにPost

ユアマイスター では日次のトラッキングをPageSpeed Insights API (v5) を使っていました。PageSpeed Insightsも内部的にLighthouseが使われています。

f:id:yourmystar_engineer:20191206155406j:plain

3. リリースのタイミングでどう変わったか知りたい

毎日定点観測はしていますが、コードのカバレッジレポートと同様、リリースのタイミングによりどんな変化があったのか知りたい気持ちがありました。リリースのタイミングでレポートを実行する方法がないかなー、できればCircle CIでやっちゃいたいなー、と考えていたところ、lighthouse-ciの存在を知り試すに至ったのです。

Circle CIで自動実行する方法

1. .circleci/config.yml を編集

config.ymlは下記のような内容にしました。(本件と関係のないところは省略しています)

version: 2.1
executors:
  lighthouse-executor:
    resource_class: medium+
    docker:
      - image: circleci/node:10.16-browsers

jobs:
  lighthouse_report:
    executor: lighthouse-executor
    steps:
      - run:
          name: Install lighthouse
          command: |
            sudo npm install -g lighthouse
      - run:
          name: Check lighthouse
          command: |
            lighthouse --version
      - run:
          name: Run lighthouse
          command: |
            lighthouse https://yourmystar.jp/ --output html --output json --output-path ./myfile.json
      - store_artifacts:
          path: '.'
      - run:
          name: Notify to slack
          command: | # XXXXXXXXはプロジェクトID
              curl -s -S -X POST --data-urlencode "payload={'channel': '#development_info', 'username': 'test-webhook', 'text': ':circleci: lighthouse report: <https://${CIRCLE_BUILD_NUM}-XXXXXXXX-gh.circle-artifacts.com/0${HOME}/project/myfile.report.html|open report ${CIRCLE_PROJECT_REPONAME} ${CIRCLE_BRANCH} > (build ${CIRCLE_BUILD_NUM})' }" ${SLACK_TEST_HOOK} >/dev/null

workflows:
  version: 2
  build_and_deploy:
    jobs:
      - lighthouse_report:
          filters:
            branches:
              only: master

いくつか細かい説明を入れていきます。

Nodeのバージョン

    docker:
      - image: circleci/node:10.16-browsers

公式サイトにはNodeのバージョンは5以上と説明文がありますが、こちらの記事で10以上の記述があったので何も考えず参考にしました。

ArtifactsのURL

https://${CIRCLE_BUILD_NUM}-XXXXXXXX-gh.circle-artifacts.com/0${HOME}/project/myfile.report.html

ArtifactsのURLに含まれる XXXXXXXX の部分は8桁の数字が、プロジェクトごとに採番されています。ビルドを何回やっても不変になるため、URLにはベタがきで問題ありません。

ブランチのfilter

          filters:
            branches:
              only: master

今回、私たちはリリースとともに定点観測を行えるようにするという目的がありましたので、本番環境用のmasterブランチのビルドが実行された時だけLighthouseレポートが出力されるようにしています。

2. 結果を見る

Slack通知がこんな形で届きます。弊社ではカバレッジレポートもリリースをトリガーに実行されるため、一緒に通知されています。

f:id:yourmystar_engineer:20191218091341j:plain

Slack通知のリンクを押すと、結果は下記のようなLighthouseで生成された綺麗なHTMLで表示されます。

f:id:yourmystar_engineer:20191218092859j:plain

また、Circle CIのビルド詳細画面にあるArtifactsをみても辿れます。

f:id:yourmystar_engineer:20191218093521j:plain

以上、簡単ではありますがユアマイスター での取り組みの紹介でした。

今後やりたい部分としては、

  • 複数URLを定点観測
  • HTMLのキャプチャをとって、Slack通知
  • リリースタグと連動し歴史を蓄積

あたりでしょうか。

お手軽に自動実行できるようになったので、ぜひお試しください。

参考にしたページ

https://developers.google.com/web/tools/lighthouse/?hl=ja

https://github.com/GoogleChrome/lighthouse-ci

https://blog.sshn.me/posts/run-lighthouse-on-circle-ci/

https://qiita.com/tomopict/items/3d9159c18e307eb077ef

https://tech.smartcamp.co.jp/entry/lighthouse-ci-hands-on

ユアマイスター では一緒にはたらくエンジニアを募集しています。

▼お気軽にご連絡ください▼

https://corp.yourmystar.jp/recruit

お気軽にご連絡お待ちしてます!!