背景

今までは上記のようにGitHub Actions上でyarn build を実行した上でlighthouse-ciを実施していたが、以下の問題が気になっていた。

Vercelのデプロイで一度ビルドプロセスを挟んでいるためビルドが重複している
ビルドに必要な環境変数をVercelとGitHub Actions両方に用意するのが手間であり、秘匿情報を置く場所を増やしたくない

lighthouse-ciはURLに対しても実施できるはずなので、VercelのPreview環境に対して実施できれば上記の問題は取り除けるのではと考えた。

Hirotaka Miyagi 2022/07/04

理想のプロセス

VercelのPreview環境へデプロイ
そのデプロイの完了をフックにlighthouse-ciを実行、アサーション

Hirotaka Miyagi 2022/07/04

まずlighthouse-ciがURLに対して実行できることを確かめる。
ドキュメントを見るとurlオプションに複数のURLを渡すことができる

❯ yarn lhci collect --url https://log.mh4gf.dev
yarn run v1.22.11
warning ../../../../package.json: No license field
$ lhci autorun collect --url https://log.mh4gf.dev
✅  .lighthouseci/ directory writable
✅  Configuration file found
✅  Chrome installation found
⚠️   GitHub token not set
Healthcheck passed!

Running Lighthouse 3 time(s) on https://log.mh4gf.dev
Run #1...done.
Run #2...done.
Run #3...done.
Done running Lighthouse!

Uploading median LHR of https://log.mh4gf.dev/...success!
Open the report at https://storage.googleapis.com/lighthouse-infrastructure.appspot.com/reports/xxxxxxx.report.html
No GitHub token set, skipping GitHub status check.

Done running autorun.
✨  Done in 55.30s.

良さそう。GitHub Actionsの実行時にコマンドのオプションとして渡せれば良さそうだ。

Hirotaka Miyagi 2022/07/04

vercelのデプロイ完了をフックとする
vercelのプレビュー環境のURLを手に入れる

おそらくこれらはdeployment_statusイベントを使えば良さそう。

cypressを利用している例があった。

Hirotaka Miyagi 2022/07/05

こんな感じで行けるのではと思ったけど、直前のsetup–nodeでエラーが出る

Run actions/setup-node@v3.2.0
Found in cache @ /opt/hostedtoolcache/node/14.19.3/x64
/usr/local/bin/yarn --version
1.22.19
/usr/local/bin/yarn cache dir
/home/runner/.cache/yarn/v6
Error: Cache service responded with 403

Hirotaka Miyagi 2022/07/05

deployment_statusイベントでactions/cacheは問題があるようで、上記のissueがまだ解決していない。

setup-nodeを使いたい理由はプロジェクトローカルのlhciを使いたいからなので、npxを使うようにしてみるか

Hirotaka Miyagi 2022/07/05

動いた。最終的なyamlがこちら

name: lighthouce-ci
on: deployment_status

jobs:
  lhci:
    if: |
      github.event.deployment_status.state == 'success' &&
      github.event.deployment_status.environment == 'Preview'
    runs-on: ubuntu-latest

    steps:
      - name: Checkout
        uses: actions/checkout@v3
        with:
          ref: ${{ github.event.pull_request.head.sha }}

      - name: run Lighthouse CI
        run: |
          npx -p @lhci/cli lhci collect --url ${{ github.event.deployment_status.target_url }}
        env:
          LHCI_GITHUB_APP_TOKEN: ${{ secrets.LHCI_GITHUB_APP_TOKEN }}