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

こんにちは。スマートショッピングの@leafです。

今回は、Chrome Dev Summit 2019に参加した方から「Lighthouse CI」というものを教えていただいたので、実際にNuxt.jsのプロジェクトにGitHub Actionsを利用して組み込んでみた話をします。 手探り状態で進めているので間違っていたらごめんなさい。

そもそもLighthouseとは？

LighthouseはWebページの評価を確認することができるツールです。

各項目(パフォーマンスやSEOなど。)に対して指標を出してくれるので、サイトの現状把握や、改善の指標になってくれると思います。

下記はプラグインで実際に動かしてみた結果です。

簡単に試してみたい方はchromeのプラグインで試してみてください。

Lighthouse

Lighthouse CIとは

Chrome Dev Summit 2019で発表されたもので、Lighthouseの評価を様々なCIツール(Travis CI, CircleCI, Jenkins, AppVeyor, GitHub Actionsなど)でビルドされたものに対して行うことができるというものになります。

今回は、GitHub Actionsを利用して、プルリクが作成された際に評価が行われるように設定していきます。

GitHub Actionsの設定

まず初めにGitHub Actionsの設定から進めていきます。

APIKeyの取得

GitHubを利用する場合は下記サイトからアプリのインストール承認が必要となります。

https://github.com/apps/lighthouse-ci

上記サイトからインストールを行い、対象のリポジトリを選択するとキーが生成されます。

APIKeyの登録

APIKeyの登録はリポジトリの「Setting → Secrets」から行うことができます。

ここで登録することで、APIKeyをGitHub Actions側で変数として利用できるようになります。

GitHub Actionsの定義ファイル作成

最後にGitHub Actionsの定義ファイルを作成していきます。

今回作成したものはこちらになります。

# .github/workflows/lighthouse.yml
name: run Lighthouse CI

on:
  pull_request:
    branches:
      - master

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

    steps:
      - uses: actions/checkout@v1
      - name: Use Node.js ${{ matrix.node-version }}
        uses: actions/setup-node@v1
        with:
          node-version: ${{ matrix.node-version }}
      - name: npm install
        run: |
          npm install -g @lhci/cli
          npm install
      - name: build
        run: npm run build
      - name: lhci
        run: lhci autorun --config=./lighthouse/lighthouserc.json
        env:
          LHCI_GITHUB_APP_TOKEN: ${{ secrets.LHCI_GITHUB_APP_TOKEN }}

それではそれぞれについて簡単に解説していきたいと思います。

まず初めのnameは名前をつけているだけなので適当で大丈夫です。

name: run Lighthouse CI

次にonに設定するトリガーですが、今回はプルリクが出された時にそのブランチのソースに対して評価を行いたいのでmasterへのプルリクをトリガーに設定しています。

on:
  pull_request:
    branches:
      - master

次に実際のjobについてです。前半部分では動作させるOSとnodeのバージョン指定を行なっています。

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

最後にjobのstep部分についてですが、「最新ソース取得 → Node.jsの取得 → ライブラリのインストール → プロジェクトのビルド → Lighthouse実施」の順で設定しています。

    steps:
      # 最新ソースの取得
      - uses: actions/checkout@v1
      # Node.jsの取得
      - name: Use Node.js ${{ matrix.node-version }}
        uses: actions/setup-node@v1
        with:
          node-version: ${{ matrix.node-version }}
      # lighthouse-ci用のライブラリインストールとプロジェクトに必要なライブラリのインストール
      - name: npm install
        run: |
          npm install -g @lhci/cli
          npm install
      # プロジェクトのビルド
      - name: build
        run: npm run build
      # Lighthouse実施
      - name: lhci
        # configで設定するファイルはこの後作成します。
        run: lhci autorun --config=./lighthouse/lighthouserc.json
        env:
          LHCI_GITHUB_APP_TOKEN: ${{ secrets.LHCI_GITHUB_APP_TOKEN }}

これでGitHub Actions側の設定は完了になります。

Lighthouse CIの設定

Lighthouse CIではjsonに設定を定義し、それを読み込んで実行することができます。

今回設定したファイルは下記の通りです。 (FilePathはGitHub Actionでlhciコマンドの引数で渡しているものになります。)

FilePath:./lighthouse/lighthouserc.json
{
  "ci": {
    "collect": {
      "numberOfRuns": 3,
      "startServerCommand": "npm run start",
      "url": [
        "http://localhost:3000/",
        "http://localhost:3000/login",
        "http://localhost:3000/createAccount"
      ]
    },
    "assert": {
      "preset": "lighthouse:recommended",
      "assertions": {
        "offscreen-images": "off",
        "uses-webp-images": "off",
        "categories:performance": ["warn", {"minScore": 0.9}],
        "categories:accessibility": ["error", {"minScore": 1}]
      }
    },
    "upload": {
      "target": "temporary-public-storage"
    }
  }
}

こちらもそれぞれについて簡単に解説していきたいと思います。

まず初めのcollectブロックについてです。

ここではLighthouseの実行に関する設定を行なっていきます。

    "collect": {
      "memo1": "numberOfRunsには各HTMLを検証する回数を設定します。"
      "numberOfRuns": 3,
      
      "memo2": "startServerCommandにはサーバーを起動するためのコマンドを設定します。今回はGitHub Actionsでビルドしたファイルをここで立ち上げています。"
      "startServerCommand": "npm run start",
      
      "memo3": "urlには検証を実施するurlを配列で定義します。"
      "url": [
        "http://localhost:3000/",
        "http://localhost:3000/login",
        "http://localhost:3000/createAccount"
      ]
    },

次にassertのブロックです。

ここでは判定についての基準を色々と設定することができます。

詳細は下記を参照してください。

https://github.com/GoogleChrome/lighthouse-ci/blob/master/docs/assertions.md

    "assert": {
      "preset": "lighthouse:recommended",
      "assertions": {
        "offscreen-images": "off",
        "uses-webp-images": "off",
        "categories:performance": ["warn", {"minScore": 0.9}],
        "categories:accessibility": ["error", {"minScore": 1}]
      }
    },

最後にuploadのブロックです。

ここでは、実行結果の格納先を設定します。

今回はお試しだったので、デフォルトのtemporary-public-storageを指定していますが、実際に運用を行う場合は設定の変更が必要になります。

    "upload": {
      "target": "temporary-public-storage"
    }

これで動作を確認するために必要な設定は完了になります。

実行結果

それでは実際に動かした結果を確認していきます。

確認はリポジトリのActionsタブから行なっていきます。

lhciコマンドを実行しているタブを展開すると実行のログが出力されており、検証に引っかかったものが順番に記載されています。

プラグインと同じようにスコアを確認したい場合は最後の方に出力されているHTMLを開くことで確認することができます。

HTMLはプルリクの方からも確認することができます。

プルリクで確認を行いたいURLのDetailsを押下することでスコアページに遷移することができます。

最後に

今回はLighthouse CIの設定を行いましたが、まだまだ資料が少なく手探り状態での作業となりました。

特にLighthouseの設定ファイルのassert関連はプロジェクトに合わせて設定が必要なので、CIでエラーを出すラインなど試行錯誤が必要になりそうです。

導入ハードルはまだ少し高めですが、プルリクエスト時にパフォーマンスについてもCIでチェックできるのはとても大きなメリットなので、今後も色々と試してみたいと思います。

何かあれば追記していきますのでよろしくお願いします。