はじめに

速さが足りない!!

という訳で、サイトの速度を改善していくために計測が必要ですよね？

定期的に計測する方法を探しているときに **Lighthouse-ci**を見つけました。

その中でも計測結果をダッシュボードで可視化させチームでの速度改善に取り組むために

LHCI Serverについて話していこうと思います。

どんなものかをざっくりと公式の画像つきで紹介します。

LHCI Server を用意するために必要なもの

Node v10 LTS以降

データベースストレージ（sqlite、mysql、またはpostgresql）

公式の参考画像

引用元:LHCI Server

できること

Lighthouseの計測結果を記録することができる
コミット単位で計測結果を見ることができる
今までの計測結果をグラフとして可視化することができる
ローカル環境や本番URLどちらも計測することができる
計測ごとの詳細の差分を可視化することができる

とりあえず公式をみながら手を動かしていった方がイメージつきやすいと思うのでやってみましょう。

やることリスト

公式をみながらLHCI Serverを準備する
herokuでやってみよう
dockerでやってみよう
LHCI Serverに計測するプロジェクトを登録
- 計測のための設定ファイルを書く
GithubActionsでpush時に計測してみる

LHCI Serverを準備する

公式のREADMEの方にherokuとdockerでさくっと立ち上げる方法が書いてあるのでやってみましょう

下準備として下記が使えるようになってますでしょうか？参考記事と公式のドキュメントを添付しておきます。

heroku CLI
docker

参考

どちらもデプロイするものは同じなので好きな方を選んでもらえればいいと思います。

herokuでやってみる

こちらを利用する場合まずherokuにアカウントを登録しましょう

Heroku はアプリの構築、提供、監視、スケールに役立つクラウドプラットフォームで、アイデアを出してから運用を開始するまでのプロセスを迅速に進めることが可能です。また、インフラストラクチャの管理の問題からも解放されます。
公式から引用(https://jp.heroku.com/what#summary)

herokuを使えばいろんな言語でさくっとデプロイできますね。Rails チュートリアルでも利用されてるやつですね。

利用できるやつの例

言語
- Node
- Ruby
- Python
- Java
- PHP
- Go
- Scala
- Clojure
データベース
- Redis
- PostgreSQL

早速手を動かしましょう！

公式のREADMEの内容を触っていこうと思います。

リポジトリを準備します。

# 作業ディレクトリとリポジトリの準備
mkdir lhci-heroku && cd lhci-heroku && git init
# LHCI Serverに必要なファイルを取ってきます。
curl https://raw.githubusercontent.com/GoogleChrome/lighthouse-ci/master/docs/recipes/heroku-server/package.json > package.json
curl https://raw.githubusercontent.com/GoogleChrome/lighthouse-ci/master/docs/recipes/heroku-server/server.js > server.js
# コミット
git add -A && git commit -m 'Initial commit'

ダウンロードしてくるファイルは下記のような内容になります。

package.json

{
  "name": "lhci",
  "version": "1.0.0",
  "main": "server.js",
  "dependencies": {
    "@lhci/server": "0.4.x",
    "pg": "^7.12.1",
    "pg-hstore": "^2.3.3"
  }
}

server.js

/**
 * @license Copyright 2019 Google Inc. All Rights Reserved.
 * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
 * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.
 */
'use strict';

const {createServer} = require('@lhci/server');

console.log('Starting server...');
createServer({
  port: process.env.PORT,
  storage: {
    storageMethod: 'sql',
    sqlDialect: 'postgres',
    sqlConnectionSsl: true,
    sqlConnectionUrl: process.env.DATABASE_URL,
  },
}).then(({port}) => console.log('Listening on port', port));

sqlDialect でデータベースの種類と　sqlConnectionUrlでデータベースのURLを指定していますね。

LHCI Serverではデータベースの接続としてURLを利用します。

postgresの例公式

postgres://{ユーザー名}:{パスワード}@{ホスト名}:{ポート番号}/{DB名}

さて早速herokuにデプロイしてみましょう！！

heroku CLIをここから使用していきます。


# heroku上に新しいプロジェクトを作成します。
heroku create
# プロジェクトでpostgresqlを使えるようにします。
heroku addons:create heroku-postgresql:hobby-dev
# herokuにデプロイしてみます。
git push heroku master
# 実行確認し、デプロイされたアプリを開きます。
heroku ps:scale web=1
heroku open

このような画面が確認できればOKです。

なんか　lhci wizard とか書いてますね、このコマンドは LHCI Serverに計測したいプロジェクトを登録するのに必要なコマンドになります。

早速herokuの lhci serverにプロジェクトを登録したい方はこちら

dockerでやってみる

dockerとはさくらナレッジさんの記事が個人的にわかりやすいので添付しておきます。

Dockerは、インフラ関係やDevOps界隈で注目されている技術の一つで、Docker社が開発している、コンテナ型の仮想環境を作成、配布、実行するためのプラットフォームです。
引用元: Docker入門（第一回）～Dockerとは何か、何が良いのか～

docker でLHCI Serverを動かしてみましょう。
こちらも公式のREADMEの内容を触っていこうと思います。

Docker Hubにimageが上がっているので使っていきます。

patrickhulce/lhci-server

今回は docker-compose.ymlを利用する方法で準備していきましょう

mkdir lhci-docker && cd lhci-docker && touch docker-compose.yml

docker-compose.yml

version: '3'
services:
  lhserver:
    image: patrickhulce/lhci-server
    ports:
      - '9001:9001'
    volumes:
      - lhci-data:/data
volumes:
  lhci-data:

patrickhulce/lhci-serverはデフォルトだとsqliteを利用しているので　データ保存先の/data　を永続化しています。

patrickhulce/lhci-server中をみてみましょう

lighthouserc.json

{
  "ci": {
    "server": {
      "port": 9001,
      "storage": {
        "storageMethod": "sql",
        "sqlDialect": "sqlite",
        "sqlDatabasePath": "/data/lhci.db"
      }
    }
  }
}

sqlDialect で sqlite

sqlDatabasePathで sqliteの保存先が書いてあります。登録先をheroku同様postgresなどに変更することもできます。

ローカル環境で起動してみる

docker-compose up -d

http://localhost:9001/
こちらにアクセス

このような画面になればOKです。

なんか　lhci wizard とか書いてますね、このコマンドは LHCI Serverに計測したいプロジェクトを登録するのに必要なコマンドになります。

計測結果を記録してみる

lhci serverで先ほどからデプロイ完了した後に出てくる、lhci wizardこちらのコマンドを使用してプロジェクトの登録からlhci autorunというコマンドを利用してプロジェクトを計測しlhci serverに計測結果を登録しましょう。

プロジェクトのLHCI Serverへの登録

登録したいプロジェクトのディレクトリで作業していきましょう


# lhci serverのバージョンを確認する
curl https://{lhci serverのURL}/version # Make sure you can connect to your server.
0.x.x

僕の場合は 0.44 と返ってきました

# 取得したバージョンに対応した物をインストールします。
# 僕の場合だと0.44が返ってきたので...
npm install -g @lhci/cli@0.4.4

# lhci wizardコマンドを使用
lhci wizard
# 何個か質問がきます。
# lhci serverに新規でプロジェクトを登録します
? Which wizard do you want to run? new-project
# lhci serverのURLを登録
? What is the URL of your LHCI server? https://your-lhci-server.example.com/
# lhci serverに登録するプロジェクト名を登録
? What would you like to name the project? My Favorite Project
# プロジェクトのコードが管理されている場所　自分のソースがあるリポジトリのUR
? Where is the project's code hosted? https://github.com/GoogleChrome/lighthouse-ci
# 対象のブランチ名
? What branch is considered the repo's trunk or main branch? master

これらのコマンドを実行し終わると

build token
admin token

が出てきますのでメモしておきましょう


Created project My Favorite Project (XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX)!
Use build token XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX to connect.
Use admin token XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX to manage the project.

この時点で確認してみると今回僕は　testという名前でプロジェクトを登録しました。
しかしこの状態ではサイトの計測は行われていないので計測していこうと思います。

プロジェクトの計測

計測のために必要なlighthouserc.jsというファイルを書いていきましょう

lighthouserc.js

module.exports = {
  ci: {
    upload: {
      target: 'lhci',
      serverBaseUrl: 'https://your-lhci-server-url.example.com',
      token: 'Your *build token* goes here', // could also use LHCI_TOKEN variable instead
    },
  },
};

今回は lhci serverに計測結果を記録するので
targetはlhci
serverBaseUrl
ここで登録したURLを記載


? What is the URL of your LHCI server? https://your-lhci-server.example.com/

tokenは

ここのtokenを記載


Use build token XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX to connect.

この状態ではどこのURLを計測すればいいのか記載されていないため追記してみましょう

静的サイトを対象に計測する時

lighthouserc.js

module.exports = {
  ci: {
    collect: {
      staticDistDir: './dist',
      url: ['/'],
    },
    upload: {
      target: 'lhci',
      serverBaseUrl: 'https://your-lhci-server-url.example.com',
      token: 'Your *build token* goes here', // could also use LHCI_TOKEN variable instead
    },
  },
};

staticDistDirに静的ファイルがある場所を選択します。
urlに計測したいURLを記載します。

静的なサイトではない場合

lighthouserc.js

module.exports = {
  ci: {
    collect: {
      startServerCommand: 'rails server -e production',
      url: ['http://localhost:3000/'],
    },
    upload: {
      target: 'lhci',
      serverBaseUrl: 'https://your-lhci-server-url.example.com',
      token: 'Your *build token* goes here', // could also use LHCI_TOKEN variable instead
    },
  },
};

startServerCommand にサーバーの起動のコマンドを入れてあげます　上記は railsの例です。
url に計測したいURLを記載します。

指定したURLで計測

本番のURLとか実在するサイトに対して行う場合は、startServerCommandは必要ないため
URL指定だけでも計測可能です。

lighthouserc.js

module.exports = {
  ci: {
    collect: {
      url: ['URL']
    },
    upload: {
      target: 'lhci',
      serverBaseUrl: 'https://your-lhci-server-url.example.com',
      token: 'Your *build token* goes here', // could also use LHCI_TOKEN variable instead
    },
  },
};

計測

# 計測
lhci autorun

デフォルトだと計測回数は３回計測されます。

計測回数を変えたい時は、

lighthouserc.js

    collect: {
      numberOfRuns: 1,
    },

numberOfRuns に回数を指定すれば問題ないです

当たり前ですが計測回数を増やせばそれだけ計測にかかる時間は増えます

Github Actionsで計測する

GithubActionsとは
プッシュ、Issue、リリースなどのGitHubプラットフォームのイベントをトリガーとしてワークフローを起動しましょう。コミュニティが開発・保守し、ユーザが熟知・愛用しているサービスについて、対応するアクションを組み合わせて設定できます。
引用元: https://github.co.jp/features/actions

これを利用すれば好きなタイミングで自動的に計測を行ってくれますね。

今回はリポジトリpush時に作動する簡単なciファイルが、Lighthouse-ciの公式に書いてあるのでそちらを利用していきます。

.github/workflows/ci.yml

name: CI
on: [push]
jobs:
  lighthouseci:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - uses: actions/setup-node@v1
      - run: npm install && npm install -g @lhci/cli@0.4.4
      - run: npm run export
      - run: lhci autorun

僕の場合はサンプルから　

npm run build -> npm run export
npm install -g @lhci/cli@0.4.x -> npm install -g @lhci/cli@0.4.4

変更しています。

いざpush!!

無事CI実行できましたね

まとめ

Lighthouseの計測結果を記録することができる
コミット単位で計測結果を見ることができる
今までの計測結果をグラフとして可視化することができる
ローカル環境や本番URLどちらも計測することができる
計測ごとの詳細の差分を可視化することができる

他にもassertを設定したり。

Basic認証を設定したりできるので色々試してみてください。

push 時のタイミングで計測し一定を下回ったら失敗するようにしてみたり
スケジューリングで毎日一定時間に本番のURLを計測してみたり

などいろんな使い方があるのかと思います。

また記録が保存されているデータベースの中身をみに行くと面白いです。

僕自身も使い始めたばかりなので知っている方色々教えてくださると助かります。

長い間お付き合いいただき,ありがとうございました。

いざ！WEB爆速の貴公子へと