Edited at

GitHub Actions で lighthouse を実行する

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


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@master
with:
fetch-depth: 1

- name: Cache dependencies
uses: actions/cache@v1
with:
path: ~/.npm
key: ${{ runner.os }}-node-${{ hashFiles('**/lighthouse.yml') }}
restore-keys: |
${{ runner.os }}-node-

- 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秒くらいの時間を要しました。

Run lighthouse on GitHub Actions

Download artifact of lighthouse result on GitHub Actions

qiita3.jpg


Docker とか不要

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


結果を 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@master
with:
fetch-depth: 1

- 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@v2.4.0
env:
ACTIONS_DEPLOY_KEY: ${{ secrets.ACTIONS_DEPLOY_KEY }}
PUBLISH_BRANCH: gh-pages
PUBLISH_DIR: ./public
with:
keepFiles: true