可観測性パイプライン構築の実践
フロントエンドの可観測性パイプラインをどう組み立てるかを、収集・転送・可視化の3段階で整理する検証記事。
はじめに#
この記事では、静的サイトを支える可観測性パイプラインの組み立て方を解説します。
可観測性パイプラインの3段階#
可観測性パイプラインは、次の3段階に分解できます。
- 収集 (collect): ブラウザやサーバからテレメトリを取り出す
- 転送 (forward): エッジからバックエンドへ集約して送る
- 可視化 (visualize): ダッシュボードやアラートとして表示する
収集#
収集では、Web Vitals やカスタムイベントを取得します。取得したデータは軽量なまま保つことが重要です。
転送#
転送層では、バッチ送信とリトライを実装します。エッジ関数でフィルタリングすると通信量を抑えられます。
可視化#
可視化では、取り込んだデータをクエリで集計し、SLO と突き合わせます。
TypeScript による送信例#
export interface TelemetryEvent { name: string; payload: Record<string, unknown>; sentAt: string;}
export async function sendTelemetry(events: TelemetryEvent[]): Promise<void> { const response = await fetch("/api/telemetry", { method: "POST", headers: { "content-type": "application/json" }, body: JSON.stringify(events), });
if (!response.ok) { throw new Error(`telemetry rejected with ${response.status}`); }}
export function collectWebVitals(): void { // この関数はビルド時ではなく実行時に呼び出される想定です。 void sendTelemetry([{ name: "page-view", payload: {}, sentAt: new Date().toISOString() }]);}デプロイのシェルスクリプト#
#!/usr/bin/env bashset -euo pipefail
SITE_DIR="dist"BUCKET="s3://demo-bucket"
echo "deploying to ${BUCKET}"aws s3 sync "${SITE_DIR}" "${BUCKET}" --delete --exact-timestampsaws cloudfront create-invalidation --distribution-id E2EXAMPLE --paths "/*"
echo "invalidation done; pipeline complete."横に長いコマンド出力の例です。
$ aws s3 sync dist s3://demo-bucket --delete --exact-timestamps --only-show-errors --no-progress --quiet --sse aws:kms --region ap-northeast-1 --endpoint-url https://example.internal.local:8443upload: ./dist/search-index.json to s3://demo-bucket/search-index.json [byte count: 1,234,567] [total time: 1.2s]upload: ./dist/index.html to s3://demo-bucket/index.html [byte count: 45,678] [total time: 0.4s]completed 2 object(s) successfully, 0 object(s) failedまとめ#
可観測性パイプラインは、収集・転送・可視化の各層を疎結合に保つことで、段階的に育てられます。