ウェブエンジニア珍道中

日々の技術的に関する経験を書いていきます。脱線もしますが助けになれば幸いです。

lighthouseの結果をdatadogに投げるdockerコンテナを立てる

lighthouseのscoreを定点観測して、グラフとかで見るとチューニングのモチベ上がんじゃね?と思っていたところ、datadogが対応をしていました。

なので試しにローカルのdockerコンテナ内で投げるように構築したので紹介します。

いるもの

docker

今回はdocker for macを使用します。

datadog

アカウントを作ってIntegrationにlighthouseがあるのでポチっと有効にしておきます。

f:id:te-nu:20211002161551p:plain

手順

imageづくり

Dockerfileを作ります。

  • Dockerfile
FROM node:latest

RUN apt-get update -y
RUN apt-get install -y sudo chromium

RUN DD_AGENT_MAJOR_VERSION=7 DD_API_KEY=#{DatadogのAPI key} DD_SITE="datadoghq.com" bash -c "$(curl -L https://s3.amazonaws.com/dd-agent/scripts/install_script.sh)"
RUN datadog-agent integration install -tr datadog-lighthouse==2.0.0

COPY conf.yaml /etc/datadog-agent/conf.d/lighthouse.d/conf.yaml

RUN yarn global add lighthouse

CMD ["datadog-agent", "start"]

設定ファイル

datadogでlighthouseを動かすための設定ファイルを作ります。

  • conf.yml
init_config:

instances:
  - min_collection_interval: 3600 # 1時間
    url: #{計測したいサイトのURL}
    name: name
    extra_chrome_flags:
      - --headless
      - --no-sandbox
      - --disable-dev-shm-usage

  # 計測の対象を増やしたい時には同じ要領で書いていけばOK
  - min_collection_interval: 3600 # 1時間
    url: #{計測したいサイトのURL}
    name: name_2
    extra_chrome_flags:
      - --headless
      - --no-sandbox
      - --disable-dev-shm-usage

ファイルを作り終えたらbuildしておきます。タグは任意の名前をつけておきます。

$ docker build  -t dd_lighthouse:latest .

実行確認

$  docker run dd_lighthouse

上手くいくとDatadogのログが流れます。

2021-10-10 06:13:40 UTC | CORE | INFO | (pkg/collector/worker/check_logger.go:37 in CheckStarted) | check:load | Running check...
2021-10-10 06:13:41 UTC | CORE | INFO | (pkg/collector/worker/check_logger.go:37 in CheckStarted) | check:lighthouse | Running check...
2021-10-10 06:13:41 UTC | CORE | INFO | (pkg/collector/worker/check_logger.go:37 in CheckStarted) | check:file_handle | Running check...
2021-10-10 06:14:04 UTC | CORE | INFO | (pkg/collector/worker/check_logger.go:56 in CheckFinished) | check:lighthouse | Done running check
2021-10-10 06:14:09 UTC | CORE | INFO | (pkg/collector/worker/check_logger.go:56 in CheckFinished) | check:lighthouse | Done running check
2021-10-10 06:14:12 UTC | CORE | INFO | (pkg/collector/worker/check_logger.go:37 in CheckStarted) | check:lighthouse | Running check...
2021-10-10 06:14:41 UTC | CORE | INFO | (pkg/collector/worker/check_logger.go:37 in CheckStarted) | check:lighthouse | Running check...
2021-10-10 06:15:17 UTC | CORE | INFO | (pkg/collector/worker/check_logger.go:56 in CheckFinished) | check:lighthouse | Done running check
2021-10-10 06:15:24 UTC | CORE | INFO | (pkg/collector/worker/check_logger.go:56 in CheckFinished) | check:lighthouse | Done running check

確認

設定が上手く行っているとDatadogでグラフが表示されていることが確認できます。

f:id:te-nu:20211010153452p:plain
datadog_lighthouse

あとは任意の環境でこのImageを実行して、Datadog上にDashboardなど設定すればOKです。

これで定点観測ができるようになるので改善業務がはかどりますね!