kimizuy

kimizuy blog

Github Actions × Lighthouse CI を Next.js プロジェクトに導入する

#next #github
published at

最近いろいろなサイトの 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 !!

参考

Testing static sites with Lighthouse CI and GitHub Actions

Lighthouse CI を GitHub Actions を利用して Nuxt.js のプロジェクトに導入した話

指摘や不明点があれば筆者のTwitterまでおねがいします。