Github Actions × Lighthouse CI を Next.js プロジェクトに導入する
最近いろいろなサイトの Lighthouse スコアを見るのが趣味になっている。このサイトもスコアを参考に修正しているがデプロイする前に確認したい。 ググってみると Github Actions × Lighthouse CI で可能なことがわかった。Next.js プロジェクトでの紹介事例がないようだったのでまとめておく。
前提知識
Lighthouse
Google 製の Web サイト品質評価ソフト。サイトのパフォーマンスや SEO、アクセシビリティを数値化してくれる。Lighthouse CI は開発ワークフローに組み込めるようにしたもの。
Github Actions
GitHub が提供する CI/CD サービス。Github 上でプッシュやプルリクエストが作られたときに自動テストを実行できる。
Github Actions に Lighthouse CI をインストールする
ここから導入したい Github のリポジトリに対して Lighthouse CI をインストールしていく。
インストールボタンを押す
今回はこのブログのみを対象にしたいので「Only select repositories」を選択する。
認証が完了するとパスが表示されるので、ここの値をメモしておく。
Github で対象のリポジトリを開く → Settings → Secrets → New Secret と進む
Name に 「LHCI_GITHUB_APP_TOKEN」、Value にさきほどメモしたパスを入力して「Add secret」する。
GitHub Actions の設定ファイルを追加する
プロジェクトのルートに .github/workflows/lighthouse.yml を追加する。
name: CI
on: [push]
jobs:
lhci:
name: Lighthouse
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
- name: Use Node.js 12.x
uses: actions/setup-node@v1
with:
node-version: 12.x
- name: npm install, build
run: |
npm install
npm run build
- name: run Lighthouse CI
run: |
npm install -g @lhci/cli@0.4.x
lhci autorun
ちなみにここの Github Actions の設定をベースにしている。変更点は node-version を 12.x に設定したのみ（flatMap() を使っているので）。
Lighthouse CI の設定ファイルを追加する
プロジェクトのルートに lighthouserc.js を追加する。
module.exports = {
ci: {
collect: {
staticDistDir: './out',
url: '/index.html',
},
upload: {
target: 'temporary-public-storage',
},
},
}
解説
Next.js は SSG のため（v9.3 以降？）、静的生成されたディレクトリを評価対象として設定する必要がある。Next.js の場合はビルドすると ./out ディレクトリが作られるので、その Path を指定する。
staticDistDir: './out',
url を指定するとその HTML ファイルのみをテスト対象とする。つまり url を指定しない場合はすべての HTML ファイルが対象となる。これから記事が増えてページ数が増えるとその分実行時間がかかってしまうため、今のところホームページのみを対象としている。
url: '/index.html',
実際に実行してみる
設定ではリモートリポジトリにプッシュするたびに実行されるようになっている。 例として dev ブランチの Actions タブを開いて確認してみる。
「run Lighthouse CI」の URL にアクセスすると結果が見られる
Yeah !!
