Amazon CloudWatch RUM

Fusic Tech Live Vol.6：AWS re:Invent 振り返り会（2022-02-03）での発表資料です。

AWS re:Invent 2021 で発表された Amazon CloudWatch RUM（Real User Monitoring）を取り上げます。

Transcript

1. Amazon CloudWatch RUM Fusic Tech Live Vol.6 2022.2.3 清家史郎 1
2. 自己紹介 - 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
3. Agenda 1. CloudWatch Updates 2. Amazon CloudWatch RUM 3. 実際の見方 4. まとめ 3
4. 01 CloudWatch Updates
5. 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
6. CloudWatch Updates - Amazon CloudWatch RUM - アプリケーションのクライアント側のパフォーマンスをモニタリングする Amazon CloudWatch Evidently - 実験と機能の管理 Amazon CloudWatch Metrics Insights - 高速で柔軟な SQL ベースのクエリエンジン 6
7. 02 CloudWatch RUM
8. CloudWatch RUM - クライアントサイドのパフォーマンスを監視 - DNSルックアップや、 JS及びCSSロードなどのページロードステップの確認 - ロケーション、ブラウザ、およびデバイス間でのパフォーマンスの最適化 - 日本の、DeskTopのChromeからの、パフォーマンス最適化 - JavaScriptとHTTPエラーを含むアプリケーションのパフォーマンスの異常検知 - 400、500エラーが発生した際検知 - CloudWatch ServiceLensやAWS X-Rayとの統合 - バックエンドのパフォーマンスも確認出来る 8
9. 設定
10. CloudWatch RUM - アプリケーションモニター名 - モニターするアプリケーションの名前 - アプリケーションドメイン - 実際に利用するドメイン名 - 違うドメイン名から送信された場合、 接続エラーになる - 開発中はlocalhostなどの指定も可能 - RUMデータ収集設定 - パフォーマンス - CSSやスクリプトのロード DOMの構築などのパフォーマンス - JavaScriptエラー - JSの未処理の例外処理 - HTTPエラー - 500、404などのエラー 10
11. CloudWatch RUM - - - Cookie - ユーザージャーニー ページシーケンスを取得する為の Cookieを設定する セッションサンプル - 50%にするとサーバーに訪れた セッションのうち半分の人数のみ RUMの記録を行う データストレージ - RUMのデータを保存期間の延長 左のようなJSONを保存している ※選択すると、追加料金 11
12. CloudWatch RUM - - - 承諾 - RUMを記録する為に必要な Congnitoの ユーザーIDプールの指定 ページ設定 - URLを指定することで あるページ配下のみ収集したり あるページ配下のみ除外が可能 AWS X-Ray でサービスを追跡する - AWS X-Rayを利用して サービスマップを作成する 時間がかかっている APIなどを確認出来る ※選択すると追加料金 12
13. JavaScriptの設定 上記のようなJavaScriptが配布されるので、実際に HTMLに埋め込みます 13
14. 03 実際の見方
15. 時間別 ロード時間 15
16. ウェブバイタル 16
17. ページロードのステップ（localhost） 17
18. ページロードのステップ(httpsサイト) 18
19. ブラウザ、デバイス、ロケーション 19
20. ユーザジャーニー 20
21. X-Ray CloudWatchの画面から X-Rayの確認も可能 フロントエンドだけでなく、 関連するバックエンドの パフォーマンス監視も可能！ 21
22. X-Ray メトリクス フロントエンドサービスの Metrics バックエンドサービスの Metrics 22
23. X-Ray応答分布 23
24. アラート設定 RUMのメトリクスを利用して、 CloudWatch Alaramsの設定も可能 ユースケースとしては最大値を元にアラート設定を行って、 Webアプリケーションの応答速度に明白な異常が見られた場合に アラートを飛ばす 平均応答時間を担保したい場合の測定等に利用出来そう 24
25. まとめ Point 1 CloudWatchは多機能かつ非常に有用 Point 2 ああああ RUMでインフラ・バックエンドだけでなく、フロントエンドも監視・計測可能に Point 3 X-Rayとの統合でRUM設定する事により、バックエンドのパフォーマンス測定も 25
26. Thank You ご清聴いただきありがとうございました We are Hiring ! https://recruit.fusic.co.jp/