GitHub Actions で lighthouse を実行する

GitHub Actions で lighthouse を実行して結果をダウンロードする方法です。

• GoogleChrome/lighthouse | GitHub

Workflow の例

以下のワークフローは、週1回 https://<target>.com に対してテストを実行し、結果を artifact としてダウンロードする、という利用ケースです。

.github/workflows/lighthouse.yml

name: lighthouse

on:
  schedule:
    - cron: '23 23 * * 0'

jobs:
  test:
    runs-on: ubuntu-18.04
    steps:
      - uses: actions/checkout@v2

      - name: Install lighthouse
        run: sudo npm i -g lighthouse

      - name: Run lighthouse
        run: |
          lighthouse \
            --chrome-flags="--headless" \
            --output html --output-path ./report.html \
            'https://<target>.com'

      - name: Upload result
        uses: actions/upload-artifact@master
        with:
          name: report
          path: report.html

自分の実行環境だと lighthouse のインストールに22秒、実行に20秒くらいの時間を要しました。

Docker とか不要

GitHub Actions の仮想環境には Google Chrome がプリインストールされていますので、わざわざ headless chrome の Docker image を使ったり、そのためだけの Action を作ったりする必要はありません。

• Software in virtual environments for GitHub Actions - GitHub Help

結果を GitHub Pages へデプロイ

peaceiris/actions-gh-pages については peaceiris/actions-gh-pages: GitHub Actions for deploying to GitHub Pages with Static Site Generators を参照してください。

.github/workflows/lighthouse.yml

name: lighthouse

on:
  schedule:
    - cron: '23 23 * * *'

jobs:
  test:
    runs-on: ubuntu-18.04
    steps:
      - uses: actions/checkout@v2

      - name: Install lighthouse
        run: sudo npm i -g lighthouse

      - name: Run lighthouse
        run: |
          lighthouse \
            --chrome-flags="--headless" \
            --output html --output-path /tmp/report.html \
            'https://<target>.com'
          mkdir ./public
          cp /tmp/report.html ./public/report.html

      - name: Deploy
        uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./public
          keep_files: true