TL;DR
re:Invent 2021で発表されたCloudWatchの新機能「CloudWatch RUM(Real-User Monitoring)」を使ってCloudFrontで配信中のNext.js製WEBをモニタリングしてみました。
CloudWatch RUM is 何？
以下、公式ドキュメント より引用。
CloudWatch RUM を使用すると、現実的なユーザーモニタリングを実行できます。ウェブアプリケーションのパフォーマンスに関するクライアント側のデータを、ほぼリアルタイムで実際のユーザーセッションから収集し、それを表示できます。ページの読み込み時間、クライアント側のエラー、およびユーザーの活動などのデータを、視覚化および分析することが可能です。この表示機能では、すべてのデータを集約的に見ることができ、同時に、顧客が使用しているブラウザやデバイスに関する詳細も確認できます。
はい、WEBのアクセス解析サービスですね。
他社サービスだと、Google AnalyticsやAdobe Analyticsがあります。アクセス解析サービスとしては他社と比較すると後発ですが、本機能の登場でAWSでホスティング〜アクセス解析まで一気通貫で実現できるようになりました。「WEBはAWSでホスティングしているけど、アクセス解析は他社サービスを利用」といった具合の泣き別れも解消できるはず！
Next.js製WEBに導入してみる
全体構成
CloudWatch RUMでは、S3に格納している静的コンテンツにRUM用JavaScriptを仕込んでおき、クライアントからのリクエスト時にトラッキング用スクリプトが発火、CloudWatch RUMに対してデータを投げ込む、という仕組みです。
1. アプリケーションモニターを追加
CloudWatchコンソールからRUMの設定をしていきます。デフォ設定のままでトレースできます。優しい。
設定項目を何個かピックアップ
-
データストレージ
- 「CloudWatch RUM により収集されたエンドユーザーデータは、30日間保持された後で自動的に削除されます」と公式ドキュメントに記載が。30日以上前のデータに遡及して分析したい場合はこのチェックをONにしておきましょう。CloudWatchLogsにデータを保存してくれます。（CWLogs側の期限設定も忘れずに）
-
承諾（Authorization）
- 日本語訳に違和感ありですが、原文だとAuthorizationです。Cognito IDプールを利用してクライアントからのデータ送信を許可する模様。Cognitoでは無認証のIDがサポートされており、この機能を利用することでクライアント側にてCloudWatch RUMへのデータ送信が許可されたIAMロール(※)を引き受けることが可能となります。「新しいIDEAプールを作成する」を選択でOK。
- (※)
rum:PutRumEventsのAllow権限が付与されます
-
アクティブトレース
- X-Rayトレースを有効化することができます。有効化することでセッション中の
XMLHttpRequestおよびfetchリクエストをトレースする事が可能になり、RUMダッシュボード、CloudWatch ServiceLensコンソール、X-Rayコンソール上で確認できるようになります。今回はONに設定を変更。設定項目「セッションサンプル」で100%指定しているので、今回の場合だと全セッショントレース対象となります。
- X-Rayトレースを有効化することができます。有効化することでセッション中の
2. スニッペスト取得
必要項目の入力が完了すると、コードスニッペストが表示されます。これを控えて静的コンテンツに貼り付けます。（控えるの忘れても後で再確認可能）
3. スニッペストを埋め込み
ぶっちゃけ、ここが一番苦労しました。。
Next.jsでは_app.tsxに全ページ共通の項目を記載するのですが、<Head>タグの中にスクリプトを埋め込むとエラーが複数発生。
SyntaxError: '}' expected. だの Cannot find name 'sessionSampleRate'.ts、等 エラー吐きまくりでSSGできませんでした。
結局、静的コンテンツを生成した後の生HTMLファイルに先程のスニッペストを貼り付けてデプロイをすると問題なく動きました。(フロント強者の方、是非良い方法を教えていただきたく、、！)
Scriptタグで下記画像のように埋め込んであげるとビルドできました。
ダッシュボードを眺めてニヤニヤする
ダッシュボードに表示できる物が多すぎるので、全量は紹介しきれませんが、幾つか面白いものをピックアップしてみます。
パフォーマンス>リソースリクエスト
各種リソース取得にかかったロード時間を表示することが可能です。
WEBページの表示が遅いんだけど！といった際に、どこがボトルネックになっているのかを確認することができます。
（今回のパターンだと、RUM実行用スクリプトの取得に一番時間がかかっています）
パフォーマンス>経時的なリソースリクエスト
リクエスト数を可視化することができます。今回の例だとCloudFront＋S3なのであまり考慮する必要はありませんが、EC2やECSでWEBホスティングをしている場合、リクエスト数が多い時間帯は事前にスケールアウトしておく、といったリソース戦略を実現することが可能となります
ユーザージャーニー
ページ遷移をマッピングし、ドロップオフ（=WEB離脱）を確認することができます。
例えば複数ページにまたがるフォームを実装している際に、どのページで離脱したか？を確認することでページ構成を最適化するためのヒントとして活用、コンバージョン率の向上を期待できます。
ブラウザとデバイス
WEBにアクセスしてきたブラウザ内訳を確認することができます。
クライアントから飛んでくるUserAgentを元に集計して統計を出してくれます。
エンタープライズのシステムだと、エンドユーザに対して動作保証ブラウザを設定していたりしますが、その際の保証ブラウザ×バージョン選定に役立てることができそうですね。IE対応しなきゃいけないんだよ！といってくる人にはこの画面を見せつけましょう。
まとめ
とうとうAWS純正のWEBアクセス解析サービスが登場したので使ってみました。
他社製品と比べても利用できる機能は遜色なく、ようやくAWSだけでWEB監視やトレースを完結させることが可能となりました。
もちろんAWSの他サービスとの連携も可能で、RUMのメトリクスを監視、CloudWatch Alarmを仕込んで閾値を超えたらLambdaやSlackをフック といった使い方も可能です。外形監視のCloudWatch Synthetics等も組み合わせるとより信頼性の高いWEB運用が可能になるのではないでしょうか。
備考
GoogleAnalyticsについて調べていると、日経新聞にこんな記事がありました。
米にGoogleアナリティクスの情報送信 仏当局「違法」
フロントエンド界隈では3rdパーティ製Cookieも制限されたことですし、そのうちWEBアクセス解析ツールも規制されるのか..!?