Amazon CloudWatch RUM Fusic Tech Live Vol.6 2022.2.3 清家史郎 1 

自己紹介 - ID - - - GitHub：seike460 Twitter：@seike460 Work at - 株式会社 Fusic （フュージック） 技術開発本部/技術開発第一部門 - チームリーダー/エバンジェリスト/プリンシパルエンジニア Skill - PHP／Go／AWS Community - AWS Dev Day Online Japan 2021 - JAWS Days 2019-2020 Serverless Days 2019 Co-Chair 清家 史郎 @seike460 2 

Agenda 1. CloudWatch Updates 2. Amazon CloudWatch RUM 3. 実際の見方 4. まとめ 3 

01 CloudWatch Updates 

CloudWatch 引用 [AWS Black Belt Online Seminar] Amazon CloudWatch - - CloudWatch Metrics CloudWatch に発行されたメトリクスを収集し、統計を取得 CloudWatch Alams CloudWatch メトリクスを監視するアラームと関連サービスのアクション CloudWatch Logs AWSサービスおよび構築システムのログファイルの監視、保存、アクセス CloudWatch Logs Insights CloudWatch Logs のログデータをインタラクティブに検索して分析 CloudWatch Dashboard CloudWatch コンソールにあるカスタマイズ可能なホームページ CloudWatch Events → Amazon EventBridge リソース変更のイベントに応答してアクションを実行 5 

CloudWatch Updates - Amazon CloudWatch RUM - アプリケーションのクライアント側のパフォーマンスをモニタリングする Amazon CloudWatch Evidently - 実験と機能の管理 Amazon CloudWatch Metrics Insights - 高速で柔軟な SQL ベースのクエリエンジン 6 

02 CloudWatch RUM 

CloudWatch RUM - クライアントサイドのパフォーマンスを監視 - DNSルックアップや、 JS及びCSSロードなどのページロードステップの確認 - ロケーション、ブラウザ、およびデバイス間でのパフォーマンスの最適化 - 日本の、DeskTopのChromeからの、パフォーマンス最適化 - JavaScriptとHTTPエラーを含むアプリケーションのパフォーマンスの異常検知 - 400、500エラーが発生した際検知 - CloudWatch ServiceLensやAWS X-Rayとの統合 - バックエンドのパフォーマンスも確認出来る 8 

設定 

CloudWatch RUM - アプリケーションモニター名 - モニターするアプリケーションの名前 - アプリケーションドメイン - 実際に利用するドメイン名 - 違うドメイン名から送信された場合、 接続エラーになる - 開発中はlocalhostなどの指定も可能 - RUMデータ収集設定 - パフォーマンス - CSSやスクリプトのロード DOMの構築などのパフォーマンス - JavaScriptエラー - JSの未処理の例外処理 - HTTPエラー - 500、404などのエラー 10 

CloudWatch RUM - - - Cookie - ユーザージャーニー ページシーケンスを取得する為の Cookieを設定する セッションサンプル - 50%にするとサーバーに訪れた セッションのうち半分の人数のみ RUMの記録を行う データストレージ - RUMのデータを保存期間の延長 左のようなJSONを保存している ※選択すると、追加料金 11 

CloudWatch RUM - - - 承諾 - RUMを記録する為に必要な Congnitoの ユーザーIDプールの指定 ページ設定 - URLを指定することで あるページ配下のみ収集したり あるページ配下のみ除外が可能 AWS X-Ray でサービスを追跡する - AWS X-Rayを利用して サービスマップを作成する 時間がかかっている APIなどを確認出来る ※選択すると追加料金 12 

JavaScriptの設定 上記のようなJavaScriptが配布されるので、実際に HTMLに埋め込みます 13 

03 実際の見方 

時間別 ロード時間 15 

ウェブバイタル 16 

ページロードのステップ（localhost） 17 

ページロードのステップ(httpsサイト) 18 

ブラウザ、デバイス、ロケーション 19 

ユーザジャーニー 20 

X-Ray CloudWatchの画面から X-Rayの確認も可能 フロントエンドだけでなく、 関連するバックエンドの パフォーマンス監視も可能！ 21 

X-Ray メトリクス フロントエンドサービスの Metrics バックエンドサービスの Metrics 22 

X-Ray応答分布 23 

アラート設定 RUMのメトリクスを利用して、 CloudWatch Alaramsの設定も可能 ユースケースとしては最大値を元にアラート設定を行って、 Webアプリケーションの応答速度に明白な異常が見られた場合に アラートを飛ばす 平均応答時間を担保したい場合の測定等に利用出来そう 24 

まとめ Point 1 CloudWatchは多機能かつ非常に有用 Point 2 ああああ RUMでインフラ・バックエンドだけでなく、フロントエンドも監視・計測可能に Point 3 X-Rayとの統合でRUM設定する事により、バックエンドのパフォーマンス測定も 25 

Thank You ご清聴いただきありがとうございました We are Hiring ! https://recruit.fusic.co.jp/