LoginSignup
41
37

More than 3 years have passed since last update.

@takaHALin株式会社エイチームライフデザイン

WEB爆速の貴公子を目指して Lighthouse-ciを動かしてみる

Last updated at Posted at 2020-09-02

はじめに

速さが足りない!!

image.png

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

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

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

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

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

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

  • Node v10 LTS以降
  • データベースストレージ（sqlite、mysql、またはpostgresql）

公式の参考画像

image.png
image.png

引用元: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です。

スクリーンショット 2020-08-31 3.06.21.png

なんか　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です。

スクリーンショット 2020-08-31 3.06.21.png

なんか　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という名前でプロジェクトを登録しました。
しかしこの状態ではサイトの計測は行われていないので計測していこうと思います。

スクリーンショット 2020-08-31 4.20.08.png

プロジェクトの計測

計測のために必要な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 に回数を指定すれば問題ないです

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

スクリーンショット 2020-08-31 5.34.01.png

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!!

スクリーンショット 2020-08-31 5.39.50.png

無事CI実行できましたね

まとめ

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

他にもassertを設定したり。

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

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

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

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

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

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

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

image.png

41
37
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
41
37