はじめに
Webサイトをデプロイしたはいいけど、いちいちLighthouseのChrome Tabでのサイト観測が手間かかる！ってこと結構あると思います。（ていうかパフォーマンス計測忘れがち）
Lighthouseとは？ オープンソースの自動化されたツールでウェブアプリ、ウェブサイトのパフォーマンス計測に役立ちます。
ということで面倒なことはCIにやらせましょうということで、GitHub Actions を使用したLighthouse CIの実行手順をここに記載しておきます。
注意としてはあくまでビルドされた生成物をCI上のLocalhostでの計測のためデプロイ先のWebサーバの速度ではないということです。
それではやってみましょう！
ymlファイルをつくる
.github/workflows/lighthouse-ci.yml をリポジトリ内に追加します。
name: Build project and Run Lighthouse CI
on:
push:
branches:
- master
pull_request:
branches:
- master
jobs:
lhci:
name: Lighthouse CI
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v1
- name: Use Node.js 12.x
uses: actions/setup-node@v1
with:
node-version: 12.x
- name: npm install, build
env:
YOUR_ENV: ${{ secrets.YOUR_ENV }}
run: |
npm install
npm run build
- name: run Lighthouse CI
run: |
npm install -g @lhci/cli@0.3.x
lhci autorun --upload.target=temporary-public-storage --staticDistDir=./public || echo "LHCI failed!"ポイント的にはnpm i ~ build をちゃんとする（それはそう）こととLighthouse CIのstaticDistDir=./publicの指定先を間違えないことです。
プロジェクトによって出力先が違うのでbuildして確認しましょう。
Pushする
リポジトリにPushしてCIが起動していることを確認しましょう。ビルドまで通ればLighthouse CIが自動的に3回確認してくれるはずです。
3回やるのは平均値を取るためらしいです
成功するとCI上で計測結果のURLが表示されています。アクセスして確認しましょう。
前回の計測結果があるとどう変わったか可視化してくれます。こんな機能あったんですね。（知らなかった。。。）
CI結果をSlackに通知する
残念ながらLighthouse CIの測定結果はコンソールに出力されているだけです。なので測定されたURLを取得するのは厳しそうなのでGitHub ActionsのCI結果をSlackに通知してあげましょう。
先程作成した.github/workflows/lighthouse-ci.ymlに新しいJobを追加します。環境変数として SLACKWEBHOOKURL が必要なのでSlack Incomming HookのURLを取得しましょう（略）
slack-notify:
name: Slack Notification
runs-on: ubuntu-latest
steps:
- name: Set COMMIT_MESSAGE
run: echo ::set-env name=COMMIT_MESSAGE::$(echo "${{ github.event.head_commit.message }}" | tr '\n' ' ')
- name: Slack Notification on SUCCESS
if: success()
uses: tokorom/action-slack-incoming-webhook@master
env:
INCOMING_WEBHOOK_URL: ${{ secrets.SLACK_WEBHOOK_URL }}
with:
text: Successfully GitHub Actions!
attachments: |
[
{
"color": "good",
"author_name": "GitHub Actions Notify",
"author_icon": "${{ github.event.sender.avatar_url }}",
"fields": [
{
"title": "Repository",
"value": "${{ github.repository }}"
},
{
"title": "Commit Message",
"value": "${{ env.COMMIT_MESSAGE }}"
},
{
"title": "GitHub Actions URL",
"value": "${{ github.event.repository.url }}/actions/runs/${{ github.run_id }}"
},
{
"title": "Compare URL",
"value": "${{ github.event.compare }}"
}
]
}
]うまくいくとこんな感じになります。
まとめ
いかがでしたでしょうか。実作業含めても30分程度でできるので是非導入してみてはいかがでしょうか。それでは良いCI/CDライフを！
