🐡

VercelプレビューのLighthouse結果をコメントするGitHub Actions

2022/12/06に公開・約5,300字

GitHub

PRマージ前にLighthouseが見たいが、VercelのプレビューURLを取得するにはどうすればいいかな〜と思っていたら、「Botのコメントを正規表現でマッチしてURLを取り出す」 手法のアクションが見つかった。さらに、結果の整形をする方法も分かったので共有する。

今回作るもの

PRに自動で上記のようなコメントが付く。

Lighthouse分析結果 のリンクを辿ると、基本的にDevToolと同じ結果画面を見れる。翻訳できるしチームと共有するのに便利。

なお、ローカルのLighthouse CIを使う場合は上記の方法がよさそう。

仕組み

GitHubでPRを作成時、Vercel Botがこのようなコメントを残す。

| Name | Status | Preview | Updated |
| :--- | :----- | :------ | :------ |
| **プロジェクト名** | ✅ Ready ([Inspect](https://vercel.com/XXXXX/XXXXX/XXXXX)) | [Visit Preview](https://XXXXX.vercel.app) | 時刻 |

このコメントのMarkdownからプレビューURLを抽出し、後のステップで使う。

謝辞

スコアをいい感じに表示したくて調べると、完成品が見つかったので、以下はOskar Ahlroth氏のコードをほとんど流用させて頂いた。一部の変更・翻訳を施した。

コード

ci.yaml

name: PRのLighthouseスコアチェック
# 以下のワークフローを引用一部変更翻訳
# https://github.com/OskarAhl/Lighthouse-github-action-comment/blob/main/.github/workflows/lighthouse-on-vercel-preview-url.yml

on:
  issue_comment:
    types: [edited]

jobs:
  lighthouse:
    runs-on: ubuntu-latest
    name: Lighthouse分析と結果コメント投稿
    steps:
      - name: プレビューURLを取得
        id: capture_preview_url
        uses: aaimio/vercel-preview-url-action@v1
        with:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
          # アクションが想定してるコメントと2022年12月7日の形式が違うっぽいので修正
          preview_url_regexp: '\[Visit Preview\]\(((.*).app)\)'
      # Vercel Bot以外のコメントならここでキャンセルされる
      - name: チェックアウト
        uses: actions/checkout@v3
      - name: コメントを追加
        id: loading_comment_to_pr
        uses: marocchino/sticky-pull-request-comment@v1
        with:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
          number: ${{ github.event.issue.number }}
          header: lighthouse
          message: |
            Lighthouseで分析中...
      - name: Lighthouseでページを分析
        id: lighthouse_audit
        uses: treosh/lighthouse-ci-action@v3
        with:
          urls: |
            ${{ steps.capture_preview_url.outputs.vercel_preview_url }}
          uploadArtifacts: true
          # 結果を一時的に公開ストレージにアップするか
          temporaryPublicStorage: true
      - name: スコアを整形する
        id: format_lighthouse_score
        uses: actions/github-script@v3
        with:
          github-token: ${{secrets.GITHUB_TOKEN}}
          script: |
            const result = ${{ steps.lighthouse_audit.outputs.manifest }}[0].summary
            const links = ${{ steps.lighthouse_audit.outputs.links }}
            const formatResult = (res) => Math.round((res * 100))
            Object.keys(result).forEach(key => result[key] = formatResult(result[key]))
            const score = res => res >= 90 ? '🟢' : res >= 50 ? '🟠' : '🔴'
            const comment = [
                `[Lighthouse分析結果](${Object.values(links)[0]}):`,
                '| 項目 | スコア |',
                '| --- | --- |',
                `| ${score(result.performance)} パフォーマンス | ${result.performance} |`,
                `| ${score(result.accessibility)} アクセシビリティ | ${result.accessibility} |`,
                `| ${score(result['best-practices'])} ベストプラクティス | ${result['best-practices']} |`,
                `| ${score(result.seo)} SEO | ${result.seo} |`,
                `| ${score(result.pwa)} PWA | ${result.pwa} |`,
                ' ',
                `*分析したURL: [${Object.keys(links)[0]}](${Object.keys(links)[0]})*`
            ].join('\n')
             core.setOutput("comment", comment);
      - name: Lighthouse結果をコメント
        id: comment_to_pr
        uses: marocchino/sticky-pull-request-comment@v1
        with:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
          number: ${{ github.event.issue.number }}
          header: lighthouse
          message: |
            ${{ steps.format_lighthouse_score.outputs.comment }}

解説

トリガー

コメントの編集でトリガーする所がミソ。 最初pushやPRでトリガーしようとしたが、そもそもコメントを使うのでこれが正解。

ただ、デプロイからトリガーまで微妙なラグができるため、このワークフローでLighthouse以外の事はしないほうがいい。

コメントを追加

marocchino/sticky-pull-request-comment を使ってコメントする。header を揃えることで、Lighthouseの分析が完了したら、コメントを編集してスコアを出す。

コメントが更新される様子

▲アクションがトリガーされると「Lighthouseで分析中...」とコメントされ、無事分析できれば結果に置き換わる。

スコアを整形する

actions/github-script を使い、JavaScriptでコメントを整形する。完全にOskar Ahlroth氏のコードの翻訳版である。

Vercel以外のコメントで

Discussion

ログインするとコメントできます