2023.06.07[Wed]
[シリーズ連載] SpeedCurve 利用例

SpeedCurve 利用例 デプロイのタイミングに線を引く

  • パフォーマンス

目次

Webエンジニアの茄子です。
前回は Favoritesタブのダッシュボードを解説しました。( https://techlab.q-co.jp/articles/93/ )
今回は、グラフの中にデプロイのタイミングで線を引く機能を解説していきます。

Deployについて

(↑ デプロイを記録したタイミングの線を表示したグラフ)

改めてDeployについておさらいします。
Deployは計測とメモのセットです。与えられたメモと共に対象のサイトの計測が1セット記録されます。Deployとして発火されるからといって特別な指標が付与されている等はなく、Syntheticsで設定した時刻ごとに実行される計測と同じです。

CIツールのスクリプト等に入れておいて、デプロイされるたびにこのAPI経由で実行されるようにしておくと、その時点の記録を作れます。また、ダッシュボード党でグラフに線が引かれます。
本記事ではAPIによる発火ですが、UI上のDeploy タブの TEST NOW という右上のボタンから手動で実行することも可能です。

APIの確認

公式ドキュメント: https://support.speedcurve.com/reference/getting-started

APIを通してよくある計測データの取得などが可能です。
この中の Deploys -> Add a deploy を使います。

必要なパラメータは以下
site_id : 計測対象のサイトのIDです。後述します。
url_id : site_idではなくこちらを使うことも可能です。記事の最後で紹介します。
note : deployを表示する際のタイトル的なものです。当社では任意の文字列をデプロイ時に渡しています。コミットメッセージなどから取ってきてもいいです。
detail : 詳細な情報を自由に載せることができます。当社ではgithubのリリースのリンクを入れています。

site_idの取得

site_idはSetting画面のURLから取得できます。Settings内の SITES から対象のサイト設定へ進んだ、URLの最後の部分の数字です(2枚目の画像の赤く囲んだ部分)

API Key

前述のデータに加えてAPI Keyが必要です。
左のメニューの一番下のアカウント設定をホバーすると出る選択肢から Admin -> Teams タブと進んだ先で確認可能です。( ホバー時のTeamではありません )参考: 公式ドキュメント https://support.speedcurve.com/docs/rest-api 

テスト

(以下、curlのレスポンスはJSONなので、リクエストの際は適宜  | jq . を後ろに付けると見やすいです。)
では、deployを追加してみます。API_TOKEN, SITE_ID をご自身のものに置き換えてください。
noteとdetailはURLエンコードが必要ですので --data-urlencode として指定します。

curl https://api.speedcurve.com/v1/deploys -u <YOUR_API_TOKEN>:x --request POST \
  --data site_id=<SITE_ID> --data-urlencode note="Test Deploy 1" --data-urlencode detail="details of the deploy"  

API TokenはBASE64エンコードをして -H "Authorization: Basic <TOKEN_BASE64>" としても送れます。
今回はそのままで使える -u を使っています。その後ろの :x はbasicのパスワードで、自動で x と設定されています。( https://support.speedcurve.com/reference/getting-started#basic-authentication )

{"status":"success","deploy_id":~~~~~~,"note_id":~~~~~~~,"site_id":~~~~~~~," .....

このようなレスポンスが来れば成功です。
レスポンスは計測の予約を入れてすぐに返ってくるため、実際の計測完了までは数分かかります。
Settings -> NOTES -> View Notes から確認します。

リクエストで送った内容が反映されていることが確認できます。
また、Deploys タブから計測結果も確認できます。

グラフへの線も確認します。適当なSyntheticsかFavoritesのページを開きグラフを確認します。右上部の設定で Notes をオンにしてください。

url_id

APIに記載のある url_id をsite_idの代わりに指定すると、サイト設定の中の一つのURLでのみ計測をすることが可能です。
url_id はAPIでリストを受け取ることができます。
( https://support.speedcurve.com/reference/get-all-urls

curl --request GET \
     -u <API_TOKEN>:x \
     --url https://api.speedcurve.com/v1/urls \
     --header 'accept: application/json'

そして取得したurl_idで

curl https://api.speedcurve.com/v1/deploys -u <API_TOKEN>:x --request POST \
  --data url_id=<URL_ID> --data-urlencode note="Test Deploy url_id" --data-urlencode detail="details of the url_id deploy"   

とリクエストします。

終わりに

Deploy APIによってグラフに線を引く方法を紹介しました。
これをCIツールのジョブや、スクリプトに追加することで、パフォーマンスの変化が更に追いやすくなります。

次回は、計測結果の比較の際に使える調べ方をいくつか紹介します。

Share

  1. 01 SpeedCurve 利用例 概要編 >
  2. 02 SpeedCurve 利用例 Syntheticsタブ編 >
  3. 03 SpeedCurve 利用例 Favoritesタブ編 >
  4. 04 SpeedCurve 利用例 計測結果の比較 >
  5. 05 SpeedCurve 利用例 デプロイのタイミングに線を引く
  6. 06 SpeedCurve利用例 Custom Metrics >
  7. 07 SpeedCurve 利用例 サードパーティーの影響を調査する >
SpeedCurve 利用例 計測結果の比較JestでIntersectionObserverをモックする方法