Lighthouse CIをGitHub Actionsで試した。

ふと思い立って自分のブログにLighthouse CIを導入してみた。

Lighthouse CIとは

Lighthouseの実行をCIツールでビルドされたものに対して実行できる。GitHub Actions以外のTravis CIや、Circle CIとかでもできる。

導入手順

基本的にはLighthouse CIのリポジトリにあるドキュメント通りに行えば設定はできる。

• GitHub上でlighthouse-ciアプリをインストールしてAPIキーを取得する。
• Github上に、APIKeyの登録
• GitHub Actionsの定義ファイル（yml）を記述する。
• Lighthouse CIの各種設定を定義する。

GitHub Actions定義ファイルを書く

ドキュメントを参照に以下のような定義ファイルを書いた。

name: CI

on:
  pull_request:
    branches:
      - master

jobs:
  build:
    runs-on: ubuntu-latest
    strategy:
      matrix:
        node-version: [12.x]

    steps:
      - uses: actions/checkout@v2
      - name: Use Node.js ${{ matrix.node-version }}
        uses: actions/setup-node@v1
        with:
          node-version: ${{ matrix.node-version }}
      - name: npm install, build
        run: |
          npm install
          npm run build
      - name: build
        run: npm run build
      - name: run Lighthouse CI
        run: |
          npm install -g @lhci/cli@0.7.x
          lhci autorun --config=./lighthouse/lighthouserc.json
        env:
          LHCI_GITHUB_APP_TOKEN: ${{ secrets.登録したAPIキー名 }}

onに設定しているトリガーは、プルリクエストが作られたときにそのブランチのソースベースでLighthouseを実行させる。

jobs内は以下の内容になっている。

envに先程取得したAPIキーの名前をいれる。

以下のようなJOBを走らせている。

• 最新のソースコードを取得
• Node.js（今回はv12）を取得
• Node.jsのインストール
• Lighthouse-ciのインストール
• ビルド
• Lighthouse-ciの実行

Lighthouseの設定

先程のJOB内でlhci autorun --config=./lighthouse/lighthouserc.jsonの部分で別ファイルで作成した以下のようなjsonファイルを読み込んでいる。

{
  "ci": {
    "collect": {
      "numberOfRuns": 1,
      "startServerCommand": "npm run start",
      "url": [
        "http://localhost:8000/"
      ]
    },
    "upload": {
      "target": "temporary-public-storage"
    }
  }
}

今回は最低限の設定だが、Lighthouseで設定可能な範囲でアサーションを追加できる。

設定方法はドキュメントを見るとわかりやすい。

以上で完了なので実際にPRを出してみるとCIが動き出し成功すると以下のような感じで実行できているのが確認できる。

久しぶり図ってみたらCode splittingをしろ！という警告が出ていたので時間があったら最適化する。