CloudWatch RUMでWebアプリをモニタリングする

# はじめに
※この記事は「[LTSグループAdvent Calendar 2023](https://qiita.com/advent-calendar/2023/ltsgroup)」に参加しています。

はじめまして！私は[株式会社エル・ティー・エス](https://lt-s.jp/)、[株式会社エル・ティー・エス リンク](https://lts-link.com/)のエンジニアysk_ymdyと申します。

最近AWS Certified Solutions Architect – Associate 認定を取得し、業務でAWS CloudWatch RUMを触る機会があったため概要や使い方等を記していけたらと思います。

# CloudWatch RUMとは
ひとことで言うと、Webアプリケーションの動向を可視化しモニタリングする機能です。
具体的に可視化できるものとしては、
* ページのロード時間
* javascriptエラー
* HTTPエラー
* ユーザーの利用ブラウザ
* ユーザーのページ遷移履歴

などです。[Googleアナリティクス](https://analytics.google.com/analytics/web/provision/?hl=ja#/provision)に似てますね。

## 具体的な嬉しいポイント
* javascriptエラーが検出できるため、眠っているwarningエラーに気づくことができる
* ユーザーのページ遷移を追ってユーザー動向を把握できる
* エラーのあるセッションを把握できる

などが挙げられます。
webアプリケーションを運用、保守、監視していく中であったらいいのに。。。と思った機能がまとめて使えるような形となっています。

# 使い方
大まかな流れとしては、
1. CloudWatch RUMにアプリ名やタグなど各種設定をする
1. CloudWatch RUMから、javascript or Typescript or HTML のコードスニペットを取得する
1. Webアプリにコードスニペットを貼り付ける
1. CloudWatch RUMにWebアプリからデータが送信される
1. 各種情報を確認できる🙌

という流れとなっています。
具体的にどんな手順があるかを以下でご紹介します。

# CloudWatchサイドメニューからRUMを選択
Application Signalsアコーディオンの配下にあります。

![スクリーンショット 2023-12-13 19.27.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2727167/7f1519ca-e96c-5f7f-271b-73af3428b68e.png)

# アプリケーションモニターを追加
オレンジ色の「アプリケーションモニターを追加」ボタンから追加します。

![スクリーンショット 2023-12-13 19.30.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2727167/e5f3b064-7dfd-d0e2-573d-d2a896cf8c12.png)

# モニター名とドメインを設定
モニター名は後から編集ができません。
webアプリの環境を分けている場合は、 {環境名}_{アプリ名} などにすると分かりやすいかもですね。

![スクリーンショット 2023-12-13 19.35.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2727167/ac7e597d-79fc-9280-4dae-9a2426d36066.png)

# RUMで収集するデータを設定
RUMで収集したいデータをチェックボックス形式で選択できます。

![スクリーンショット 2023-12-13 19.37.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2727167/e439b0fa-a76e-8d58-f1ce-dd26bcda9de7.png)

# Cookieを許可するか設定
Cookieを許可せずRUMを使うこともできますが、ユーザーやセッションに基づいたデータは取れなくなってしまいます。

![スクリーンショット 2023-12-13 19.40.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2727167/2e258c3e-0128-b402-8d2d-621b1cbe8fe1.png)

# セッションサンプルを指定
収集および分析するセッションの割合を指定できます。

![スクリーンショット 2023-12-13 19.41.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2727167/7417b280-cd91-6d2b-f25c-8a2348a68884.png)

# CloudWatch Logsにデータを保存するかを指定
RUMで収集されたデータは30日間保持されますが、その後削除されます。
データ保持期間を延長したい場合は、CloudWatch Logsにデータを送信する必要があります。

![スクリーンショット 2023-12-13 19.42.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2727167/a22449c4-5eb0-4d7e-d649-c52cdbbc9ee4.png)

# Amazon Cognito ID プールを使用してアクセスを制御
* 新しいIDプールを作成するか
* 既存のIDプールを使うか
* 既存のプロバイダーからのプライベート認証を使うか

を選択することができます。
ログインしたユーザーのみが RUM にデータを送信する場合は、既存のプロバイダーからのプライベート認証を選択する必要があります。

![スクリーンショット 2023-12-13 19.45.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2727167/14bd72d9-8063-f700-5969-6645749252dc.png)

# Webアプリの対象ページを設定
URL単位でデータ収集する対象ページを設定できます。

![スクリーンショット 2023-12-13 19.48.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2727167/e8b185f6-024b-f370-d6f0-a9177ac6903c.png)

![スクリーンショット 2023-12-13 19.49.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2727167/f43ce321-36be-0925-5467-14b52b1d1474.png)

![スクリーンショット 2023-12-13 19.49.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2727167/9b543c0d-0157-9bed-3be6-fa45c44c0d43.png)

# AWS X-Rayと連携して分析機能を設定
別途料金はかかりますが、AWS X-Rayと連携することで、エンドユーザーから開始するエンドツーエンドのリクエストパスを分析およびデバッグし、より高度なユーザー動向の追跡やエラーの特定ができます。

![スクリーンショット 2023-12-13 19.50.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2727167/e6cd8951-9ce7-7737-53a8-b5794289fa22.png)

# タグを設定

RUM リソースにタグを付けて、このアプリケーションモニターのリソースを併せて表示します。

![スクリーンショット 2023-12-13 19.54.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2727167/404d3406-bbf0-222d-2f63-d44e33c31c54.png)

以上でRUM側の設定は終了です。
オレンジ色のアプリケーションモニターを追加ボタンをクリックします。

![スクリーンショット 2023-12-13 19.57.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2727167/2a9d3549-3b4c-243f-7e80-793887bfed0c.png)

# RUMからコードスニペットを取得
画像のように
* TypeScript
* JavaScript
* HTML

の3種類からコードスニペットを選択することができます。

![スクリーンショット 2023-12-13 19.56.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2727167/ca376294-6d57-8364-3386-9e346ab49e83.png)

※TypeScript と JavaScriptを選択する場合は、NPM から CloudWatch RUM ウェブクライアントパッケージをインストールする必要があります。
コマンドは以下です。

```
npm install aws-rum-web
```



# RUMから取得したコードスニペットをWebアプリの起動スクリプトに貼り付け
貼り付けをし、デプロイしてください。
これでRUM アプリケーションモニターは完成です。

# データの確認
作成したRUM アプリケーションモニターをクリックすると
* パフォーマンス
* エラーとセッション
* Http requests
* Sessions
* Events
* ブラウザとデバイス
* ユーザージャーニー

が確認できるようになります！（私はまだデータ受信できていませんが、、、）

![スクリーンショット 2023-12-13 20.07.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2727167/a5d8ec2b-73c5-0d66-9c96-7a4a9c5ee6e4.png)

# 料金
CloudWatchに関しての料金は[こちら](https://aws.amazon.com/jp/cloudwatch/pricing/)にまとまっています。
無料お試しや料金見積もり、フォームでのお問い合わせもあるようなので是非ご覧ください。

![スクリーンショット 2023-12-13 20.12.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2727167/092cc6a8-01e2-7563-13aa-865de358115e.png)

# 利用可能なリージョン
CloudWatch RUM は現在、下記のリージョンで利用可能です。

* 米国東部 (バージニア北部)
* 米国東部 (オハイオ)
* 米国西部 (オレゴン)
* 欧州 (フランクフルト)
* 欧州 (ストックホルム)
* 欧州 (アイルランド)
* 欧州 (ロンドン)
* アジアパシフィック (東京)
* アジアパシフィック (シンガポール)
* アジアパシフィック (シドニー)

最新情報は[こちら](https://docs.aws.amazon.com/ja_jp/AmazonCloudWatch/latest/monitoring/CloudWatch-RUM.html)をご覧ください。

# さいごに
ご覧いただきありがとうございます。
CloudWatch RUMは、コードスニペットをWebアプリに組み込むだけで各種データをモニタリングできるという実装コストが低いのに有用な良いサービスだなと思いました。
この記事がWebアプリを運用、保守、監視している方の助けに少しでもなれたら幸いです。

# 参考
* https://dev.classmethod.jp/articles/cloudwatch-rum-overview/
* https://qiita.com/yu-yama-sra/items/c7f7ca0e45d75ba3908c
* https://aws.amazon.com/jp/blogs/news/cloudwatch-rum/
* https://docs.aws.amazon.com/ja_jp/AmazonCloudWatch/latest/monitoring/CloudWatch-RUM.html
* https://aws.amazon.com/jp/cloudwatch/pricing/