(更新日:)

Lighthouse CIを使用してサイト速度をコミット単位で確認する

Programming

はじめに

Webサイトをデプロイしたはいいけど、いちいちLighthouseのChrome Tabでのサイト観測が手間かかる!ってこと結構あると思います。(ていうかパフォーマンス計測忘れがち)

Lighthouseとは? オープンソースの自動化されたツールでウェブアプリ、ウェブサイトのパフォーマンス計測に役立ちます。

ということで面倒なことはCIにやらせましょうということで、GitHub Actions を使用したLighthouse CIの実行手順をここに記載しておきます。

注意としてはあくまでビルドされた生成物をCI上のLocalhostでの計測のためデプロイ先のWebサーバの速度ではないということです。

それではやってみましょう!

ymlファイルをつくる

.github/workflows/lighthouse-ci.yml をリポジトリ内に追加します。

name: Build project and Run Lighthouse CI
on:
  push:
    branches:
      - master
  pull_request:
    branches:
      - master
jobs:
  lhci:
    name: Lighthouse CI
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v1
      - name: Use Node.js 12.x
        uses: actions/setup-node@v1
        with:
          node-version: 12.x
      - name: npm install, build
        env:
          YOUR_ENV: ${{ secrets.YOUR_ENV }}
        run: |
          npm install
          npm run build
      - name: run Lighthouse CI
        run: |
          npm install -g @lhci/cli@0.3.x
          lhci autorun --upload.target=temporary-public-storage --staticDistDir=./public || echo "LHCI failed!"

ポイント的にはnpm i ~ build をちゃんとする(それはそう)こととLighthouse CIのstaticDistDir=./publicの指定先を間違えないことです。

プロジェクトによって出力先が違うのでbuildして確認しましょう。

Pushする

リポジトリにPushしてCIが起動していることを確認しましょう。ビルドまで通ればLighthouse CIが自動的に3回確認してくれるはずです。

3回やるのは平均値を取るためらしいです

成功するとCI上で計測結果のURLが表示されています。アクセスして確認しましょう。

前回の計測結果があるとどう変わったか可視化してくれます。こんな機能あったんですね。(知らなかった。。。)

CI結果をSlackに通知する

残念ながらLighthouse CIの測定結果はコンソールに出力されているだけです。なので測定されたURLを取得するのは厳しそうなのでGitHub ActionsのCI結果をSlackに通知してあげましょう。

先程作成した.github/workflows/lighthouse-ci.ymlに新しいJobを追加します。環境変数として SLACKWEBHOOKURL が必要なのでSlack Incomming HookのURLを取得しましょう(略)

  slack-notify:
    name: Slack Notification
    runs-on: ubuntu-latest
    steps:
    - name: Set COMMIT_MESSAGE
      run: echo ::set-env name=COMMIT_MESSAGE::$(echo "${{ github.event.head_commit.message }}" | tr '\n' ' ')
    - name: Slack Notification on SUCCESS
      if: success()
      uses: tokorom/action-slack-incoming-webhook@master
      env:
        INCOMING_WEBHOOK_URL: ${{ secrets.SLACK_WEBHOOK_URL }}
      with:
        text: Successfully GitHub Actions!
        attachments: |
          [
            {
              "color": "good",
              "author_name": "GitHub Actions Notify",
              "author_icon": "${{ github.event.sender.avatar_url }}",
              "fields": [
                {
                  "title": "Repository",
                  "value": "${{ github.repository }}"
                },
                {
                  "title": "Commit Message",
                  "value": "${{ env.COMMIT_MESSAGE }}"
                },
                {
                  "title": "GitHub Actions URL",
                  "value": "${{ github.event.repository.url }}/actions/runs/${{ github.run_id }}"
                },
                {
                  "title": "Compare URL",
                  "value": "${{ github.event.compare }}"
                }
              ]
            }
          ]

うまくいくとこんな感じになります。

まとめ

いかがでしたでしょうか。実作業含めても30分程度でできるので是非導入してみてはいかがでしょうか。それでは良いCI/CDライフを!

参考

#CI/CD
Yoshiki Ohashi
2x歳の個人事業主エンジニア。SI企業1年, Webベンチャー企業2年で上流から下流の経験を経て独立。 エンジニアらしく性格は温和。プロジェクトチームに心理的安全性を求める。go gin | Spring | Java | Kotlin | Vue | Python | 筋トレ | キャンプ | 個人開発 | 新潟出身

よく読まれている記事


Gatsbyでブログを始めるまで
© 2020 Yoshiki Ohashi All rights reserved.