Next.jsでLighthouse CIを導入して、PRの時点でLighthouseのスコアを確認できるようにする

Next.jsでのプロジェクトでLighthouse CIを確認できるようにしたので、その時に行ったことになります。

参考にした記事

blog.kimizuy.dev

github.com

Lighthouseとは

Webアプリのパフォーマンス、品質、および正確性を向上させるためのオープンソースの自動化ツールです。

chrome.google.com

Lighthouse is an open-source, automated tool for improving the performance, quality, and correctness of your web apps.

こちらのようなイメージで各種の状態を確認することができます。

今回のゴール

PR作成時点で以下のようになる

• ci/circle: lhciの部分にビルドの結果が表示

• Detailsの部分をクリックすると以下のようにlighthouseの結果が表示される

実装した方法

1. Github Actionsに「Lighthouse CI 」をインストール

以下のページからインストールを行う

github.com

2. CIの記載

以下のページから実行したいものを選択し、コードの記載

github.com

対応しているものは以下になります。

circleCIの場合は以下になります。

version: 2.1
jobs:
  build:
    docker:
      - image: circleci/node:15.12-browsers
    working_directory: ~/your-project
    steps:
      - checkout
      - run: npm install
      - run: npm run build
      - run: sudo npm install -g @lhci/cli@0.8.x
      - run: lhci autorun

3. .lighthousercなどのlighthouse用の設定ファイルを記載

以下の部分を参考に、.lighthousercの設定を行う

github.com

4. build, startコマンドがない場合、追加

ci上で計測を行うため、build, startのコマンドを追加

"scripts": {
  "build": "next build",
  "start": "next start"
},

startについては以下のタイミングで呼び出されています。

以上でPR作成時にlighthouseが追加されるようになります。

詰まった箇所について

1. Chrome installation not foundのエラーが出る

こちらについては以下のissuesを参考に--collect.settings.chromeFlags=--no-sandboxを追加

github.com

// その他の処理については省略
module.exports = {
  ci: {
    collect: {
      settings: { chromeFlags: '--no-sandbox' }, // これを追加
    },
  },
}

2. circleci/node:16などの-browsersでないとビルドエラーになる

dockerのimageがcircleci/node:16の場合、以下のエラーがでるため、修正

// NG
docker:
  - image: circleci/node:16
// OK
docker:
  - image: circleci/node:16-browsers