とある日

「画面の描画が遅いの改善できますか」というご依頼をいただきました。
確認してみると、確かに画面開くまでの時間があきらかに遅い…ひどいくらい遅い…

描画するデータ量が増えたことで、描画が遅くなっていることはなんとなくわかっていましたが、
それがなんとなくだと原因も究明できないと思い
各処理の部分のパフォーマンスをチェックして、描画が遅い原因を追求することとしました！
ですが、１つ１つのロジックをタイマーで囲んで調査
…非常に地道な作業になりそうです。

そこで、AWS RUM + X-Ray の組み合わせ技で調査できることを知ることに!!
これがとても便利でした…!

今回はAWS RUM + X-Rayを使ってパフォーマンスチェックを一手間でこなして、解決したというレポートになります！

前提条件

  • ユーザーインターフェース：Webアプリケーション（React）※HTMLであれば実現可能
  • バックエンド・インフラ：CDKで構築したAWSサービス（今回はAmplify Gen 2を使って構築　※おそらくCDKでも実現可能）
  • 言語：TypeScript

CloudWatch RUM + X-Rayを導入してみよう

いくつか導入方法があるみたいです。CloudWatch RUM と AWS X-Ray

今回調査を必要としていたプロジェクトは、Amplify Gen 2にてバックエンドを構築してたので、
CDKを使ってCustom Stackを作成して、導入しました。
これも非常に簡単で、こちらのSampleを参考に実装させていただきました。
参考 aws-samples/aws-real-user-monitoring-amplifyapps

バックエンド・フロントエンド両方に設定を実施します。

  • バックエンド側の設定
    RUMのAppMonitorの構築をCDKでCustom Stack作成して、
    Amplifyバックエンド構築時に合わせてRUM App Monitorを構築。
    これでバックエンド側のトレースが可能になります。
  • フロントエンド側の設定
    フロントエンドからRUMのログを飛ばすためのHTMLタグを追加。
    その際にバックエンドと同じRUMのMonitorIdを追加することで、
    バックエンドとフロントエンドが紐づいたトレースが可能になります。

※Amplifyを使用せずとも、CDKのみ使用してバックエンド構築している場合でもおそらく同じ要領で実装できそうです！

簡単にWebアプリケーションの可視化・分析ができる

1. パフォーマンス調査

X-Rayを使用して、パフォーマンス調査ができます。
HTMLにタグを追加した際に、「enableXRay:true」にすることで、
フロントエンドからRUMにリクエストを投げる際に、リクエストヘッダーにトレースID「X-Amzn-Trace-Id」が付与されます。
そのトレースIDをコピーして使用することで、X-Ray分析ができます！

こちらがX-Rayのコンソール画面になり、トレースIDを元に作成したクエリ結果になります。

このような形で、フロントエンドとバックエンドのAWSサービスを一気通貫でパフォーマンス調査することができます。

ここから分かったのが、フロントエンドの処理が明らかに遅すぎる… でした。
31.92秒…?!
遅すぎる….

急ぎフロントエンド処理を、

  • 描画を高速処理するライブラリ導入
  • 簡素なロジック変更
  • ページング仕様に変更
    等の工夫を行い、下記の結果となりました。

違いが明白すぎて、恥ずかしいですね…。
163ミリ秒になりました。

仕様に忠実ではなく、しっかりとパフォーマンスも考慮した画面設計が必要だなと実感しました
技術検証段階だったので、痛い思いをする前に、非常に良い経験をさせていただきました。

2. その他にもWebアプリケーションのモニタリングができる

CloudWatch Rumのコンソール上ではこんなモニタリングが可能になっています。

Webアプリの動作異常検知、アラート発報等、簡単に実装できそうです…!

3. エンドポイントとバックエンドの性能評価も可能

こちら試していないのですが、X-Rayのトレースマップ機能を使用して、エンドポイントとバックエンドの定期評価・モニタリングすることができるみたいです。
気になったので、機会があったら試してみたいと思います。

参考 AWS X-Ray CloudWatchの合成カナリアのデバッグ

まとめ

  • CloudWatch RUMを使用して、Webアプリケーションのモニタリングができる。
  • X-Rayを使用して、AWSサービスで構築したバックエンド等の評価・分析ができる。

少し薄くまとめすぎましたが、AWSサービスにWebアプリケーションのモニタリング・パフォーマンス評価ができるツールが揃っているということが分かり、
Webアプリの性能調査のハードルが下がったように感じました…！

まだまだ知らないサービス、機能・技術たくさんあると思うので、調べて、引き出しを増やしていこうと思います！
最後までお読みいただきありがとうございました。