この記事は、Techouse Advent Calendar 2024 19日目です。
昨日は k-hiraoka さんによる プロダクトデザインを前進させるために参考になった本（サイト）たちの話 でした。
はじめに
こんにちは、Techouse の人材プラットフォーム事業部でサーバーサイドエンジニアを担当している imayayoh と申します。
今回はパフォーマンスモニタリングの強化のために導入した APM(Application Performance Monitoring)サービスの AWS X-Ray と RUM(Real User Monitoring) サービスの Amazon CloudWatch RUM をご紹介させていただきます。
概要
ウェブアプリケーションのユーザー体験を向上させるうえで、パフォーマンス監視は欠かせません。特に、複雑なアーキテクチャを持つアプリケーションでは、問題の原因を迅速に特定することがビジネスの成功を左右します。AWS X-Ray と Amazon CloudWatch RUM を活用すれば、フロントエンドからバックエンドまでを包括的に監視し、最適化が可能です。本記事では、実際の使用例を交えながら、この2つのツールを使いこなす方法を解説します。
Amazon CloudWatch RUM とは
Amazon CloudWatch RUM は、実際のエンドユーザーがウェブアプリケーションを利用する際のパフォーマンスデータを収集するサービスです。ブラウザレベルでのパフォーマンスを監視し、ユーザー体験を向上させるための情報を提供します。 具体的には、以下を可視化します。
- 体感速度の追跡: ページロードや初期レンダリング時間を記録。
- インタラクションの可視化: ユーザー操作がどれくらいスムーズかを測定。
- エラーの記録: JavaScript エラーや画像リソースの読み込み失敗を監視。
これにより、「ユーザーがどのページでつまずいているのか」 を明確にします。
引用：https://docs.aws.amazon.com/ja_jp/AmazonCloudWatch/latest/monitoring/CloudWatch-RUM.html
Amazon CloudWatch RUM の活用
実際のダッシュボードを元に弊社でのモニタリング活用例をご紹介します。
ユーザー体験の全体像の把握
アプリケーション全体・ページ別の Load time や Web vitals を監視し、ユーザー体験の改善に活用。
問題の早期発見と解決
アプリケーション全体・ページ別の Error を監視し、問題の早期発見と解決に活用。
AWS X-Ray とは
AWS X-Ray は、アプリケーションの分散トレースを行うためのサービスです。これを利用することで、アプリケーション内の個々のリクエストがどのように処理されているかを可視化し、パフォーマンスのボトルネックを特定できます。X-Rayの主な機能は、以下の通りです。
- リクエストの見える化: API GatewayやLambda、データベースを通るリクエストフローをリアルタイムで可視化。
- 細かな処理の分解: サービス内の遅延箇所を「秒単位」で特定。
- エラー検出: タイムアウトやデータベースの失敗なども漏れなく記録。
例えば、「ページが遅い」と言われたときに、X-Rayを使えばその原因がデータベースのクエリ遅延なのか、API間通信のボトルネックなのかを一発で判別できます。
引用：https://aws.amazon.com/jp/xray/
AWS X-Ray の活用
こちらも実際のダッシュボードを元に弊社でのモニタリング活用例をご紹介します。
パフォーマンスのボトルネックの特定
リクエスト単位での処理時間を監視し、パフォーマンスのボトルネックの特定に活用。
エラートラブルシューティング
データベースでのクエリの失敗、タイムアウト等のエラー監視に活用。
Amazon CloudWatch RUM ✕ AWS X-Ray による問題の迅速なトリアージ
X-RayとRUMの連携による問題解決のプロセスは以下の通りです。
- Amazon CloudWatch RUM でユーザー体験の問題を発見
特定ページの読み込みが遅いことを Amazon CloudWatch RUM で特定。 - AWS X-Ray で根本原因を追跡
AWS X-Ray を使い、バックエンドAPIの処理時間やデータベースの応答速度を分析。 - 即時解決＆再確認
問題を修正後、再度 Amazon CloudWatch RUM と AWS X-Ray で改善状況を確認。
エンドツーエンドのパフォーマンス最適化
Amazon CloudWatch RUM と AWS X-Ray を組み合わせると、フロントエンドからバックエンドまでのパフォーマンスを一元的に監視できます。
ユーザー体験の向上
- Amazon CloudWatch RUM が「どの操作が最もユーザー体験に影響を与えているか」を教えてくれる。
- AWS X-Ray がその問題の「技術的な原因」を明らかにする。
開発と運用の効率化
- 問題解決の時間を短縮し、新機能の開発に集中できる。
まとめ：X-RayとRUMで実現する“全方位監視”
AWS X-RayとAmazon CloudWatch RUMを活用することで、フロントエンドからバックエンドまでのパフォーマンスを一元的に監視でき、ユーザー体験を向上させるための強力な基盤を構築できます。RUMがユーザー視点での課題を明らかにし、X-Rayがその技術的な原因を特定することで、効率的なトラブルシューティングと継続的な改善が実現します。 適切な監視ツールを組み合わせることは、アプリケーションの信頼性を高めるための第一歩です。X-RayとRUMを活用することにより、パフォーマンスの課題を迅速に解決し、ユーザー体験の向上が実現します。パフォーマンス監視ツールにお悩みの方は、ぜひ試してみてください。
明日のTechouse Advent Calendar 2024は nodematerial さんによる 「テスト技法勉強会」で、学生エンジニアが大幅にレベルアップした件 です。
Techouseでは、社会課題の解決に一緒に取り組むエンジニアを募集しております。 ご応募お待ちしております。
