CloudWatch RUM 完全ガイド v2.0

リアルユーザーモニタリングとCore Web Vitals計測による最適化

Amazon CloudWatch RUM（Real User Monitoring） は、ウェブ・モバイルアプリケーションの実ユーザーブラウザから収集したパフォーマンスデータを一元管理・分析するマネージドサービスです。JavaScriptスニペット埋め込みで自動計測、Core Web Vitals（LCP/FID/CLS）・ページロード時間・JavaScriptエラー・HTTPエラー・セッションリプレイを実ユーザーデータから収集。Synthetics（模擬監視）と組み合わせて完全なフロントエンド可観測性を実現します。本ドキュメントはRUMの本質・計装パターン・ユースケース・2026年最新動向を体系的に解説します。

ドキュメントの目的

本ガイドは以下を対象としています。

• 初心者向け： RUMとは何か、実ユーザーモニタリングの必要性を学びたい方
• 開発者向け： JavaScriptスニペット埋め込み・カスタムイベント・セッションリプレイを実装したい方
• 運用・SRE向け： Core Web Vitals異常検知・パフォーマンスダッシュボード構築したい方
• 意思決定者向け： DataDog RUM・New Relic Browser・Sentry・LogRocket等との比較検討

2025-2026年のCloudWatch RUM最新動向

• Session Replay拡張（2026年3月）：ユーザーセッションの動画化、PII自動マスキング、クリックヒートマップ統合
• Custom Event SDKの強化（2026年2月）：ビジネスメトリクス（決済成功数・コンバージョン）の自動追跡
• Core Web Vitals INP（Interaction to Next Paint）対応（2026年4月）：FIDの後継メトリクス対応
• X-Ray統合深化（2026年1月）：RUMのページビューからX-Ray分散トレースへシームレス遷移
• Application Signals統合（2026年2月）：RUM × CloudWatch Application Signals SLO可視化
• JavaScript Error Sourcemap自動解析（2026年3月）：本番環境のミニファイコードを自動的に可読化

目次

1. 概要
2. CloudWatch RUMが解決する課題
3. 主な特徴
4. アーキテクチャ
5. コアコンポーネント
6. 計測データ体系
7. 主要ユースケース
8. 設定・操作の具体例
9. 類似サービス比較
10. ベストプラクティス
11. トラブルシューティング
12. 2025-2026最新動向
13. 学習リソース
14. 導入ロードマップ
15. 実装チェックリスト
16. まとめ
17. 参考文献

概要

初心者向けメモ： CloudWatch RUMは「ユーザーのブラウザから自動的にパフォーマンスデータを収集するサービス」です。JavaScriptスニペットをHTMLに埋め込むだけで、Core Web Vitals・ページロード時間・JavaScriptエラー・HTTP5xxエラーが自動収集され、実ユーザーの多様なブラウザ・ネットワーク・デバイス条件下でのパフォーマンス問題を検出できます。

CloudWatch RUMはJavaScriptスニペット埋め込みで実ユーザーブラウザからのテレメトリデータを一元収集し、Core Web Vitals（Largest Contentful Paint/First Input Delay/Cumulative Layout Shift）・ページロード時間・JavaScriptエラー・HTTPステータスコード・リソースタイミング・セッション情報（ユーザーエージェント・地理情報）を CloudWatch ダッシュボードに可視化します。CloudWatch Logs に自動転送してLogs Insightsで深掘り分析、X-Ray トレースとの統合でフロントエンド遅延とバックエンドAPI遅延の相関分析も可能です。

CloudWatch RUMの位置づけ

ウェブ・モバイルアプリの可観測性スタック内での役割：

• 実ユーザーのパフォーマンス計測：CloudWatch Syntheticsが模擬リクエストで定点観測するのに対し、RUMは多様なユーザー環境での実体験を計測
• Core Web Vitals計測：Google SEO 評価指標のLCP・FID・CLSをリアルデータから計測。検索順位向上のための根拠データを提供
• ビジネスメトリクスの相関分析：ページロード時間 → ユーザーエンゲージメント → コンバージョン率の相関を定量化
• エラー源特定の加速：スタックトレース・ソースマップ解析・セッションリプレイでJavaScriptエラー原因を数分で特定

CloudWatch RUMが解決する課題

CloudWatch RUMは、フロントエンド可観測性における次の問いに答えるための基盤です。

主な特徴

アーキテクチャ

【図1】CloudWatch RUM データ流とコンポーネント：

graph TD
    User["🌐 エンドユーザーのブラウザ"]
    Snippet["JavaScript スニペット<br/>（AppMonitor から自動生成）"]
    DataPlane["RUM Data Plane Endpoint<br/>（リージョン毎）"]
    MetricsDB["CloudWatch Metrics<br/>（リアルタイムメトリクス）"]
    LogsDB["CloudWatch Logs<br/>（詳細ログ）"]
    XRay["X-Ray<br/>（分散トレース統合）"]
    Dashboard["CloudWatch RUM Dashboard<br/>（自動生成）"]
    
    User -->|自動計測| Snippet
    Snippet -->|テレメトリ送信| DataPlane
    DataPlane -->|集約| MetricsDB
    DataPlane -->|ストリーム| LogsDB
    MetricsDB -->|クエリ可能| Dashboard
    LogsDB -->|Link| XRay
    LogsDB -->|Insights 分析| Dashboard
    XRay -->|View| Dashboard
    
    style User fill:#e1f5ff
    style Snippet fill:#fff3e0
    style DataPlane fill:#f3e5f5
    style MetricsDB fill:#e8f5e9
    style LogsDB fill:#fce4ec
    style XRay fill:#fff9c4
    style Dashboard fill:#e0f2f1

【図2】CloudWatch RUM キャプチャ対象データ：

graph LR
    RUM["CloudWatch RUM<br/>AppMonitor"]
    
    RUM -->|コアメトリクス| Core["Core Web Vitals<br/>LCP FID CLS"]
    RUM -->|パフォーマンス| Perf["ページロード<br/>Resource Timing<br/>Network"]
    RUM -->|エラー検出| Error["JavaScript Error<br/>HTTP 5xx<br/>Resource Failed"]
    RUM -->|ユーザー情報| User["地理情報<br/>ブラウザ/OS<br/>デバイス"]
    RUM -->|セッション| Session["Session ID<br/>Page Views<br/>User Journey"]
    RUM -->|動画化| Replay["Session Replay<br/>User Interaction"]
    RUM -->|ビジネス| Business["Custom Events<br/>Conversion<br/>Engagement"]
    
    style RUM fill:#fff9c4
    style Core fill:#c8e6c9
    style Perf fill:#bbdefb
    style Error fill:#ffccbc
    style User fill:#b2dfdb
    style Session fill:#e1bee7
    style Replay fill:#ffe0b2
    style Business fill:#f8bbd0

コアコンポーネント

1. AppMonitor（アプリケーションモニター）

AppMonitor はRUM計測の基本単位。作成時に生成される JavaScript スニペットをHTML に埋め込むことで計測開始。

主要設定項目：

• App Monitor Name：識別子（例：my-web-app）
• Domain：対象ウェブサイトのドメイン（例：example.com）
• Session Sample Rate：セッション計測率（0.0〜1.0、推奨：0.1）
• Telemetries：計測対象（errors, http, performance）
• Enable X-Ray：X-Ray統合有効化（フロントエンド → バックエンド追跡）
• Allow Cookies：ユーザーセッション追跡用クッキー許可
• CloudWatch Logs 転送：詳細ログを Logs に自動転送

2. JavaScript スニペット

AppMonitor 作成後に自動生成される埋め込みコード。HTML <head> に貼り付けで計測開始。

<!-- 自動生成スニペット（AppMonitor 作成後に取得） -->
<script>
(function(n,i,v,r,s,c,x,z){x=window.AwsRumClient={q:[],n:n,i:i,v:v,r:r,c:c};
window[n]=function(c,p){x.q.push({c:c,p:p});};z=document.createElement('script');
z.async=true;z.src=s;document.head.insertBefore(z,document.head.getElementsByTagName('script')[0]);
})('cwr','xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx','1.0.0','ap-northeast-1',
'https://client.rum.ap-northeast-1.amazonaws.com/1.15.0/cwr.js',{
  sessionSampleRate: 0.1,
  guestRoleArn: "arn:aws:iam::123456789012:role/RumGuestRole",
  identityPoolId: "ap-northeast-1:xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx",
  endpoint: "https://dataplane.rum.ap-northeast-1.amazonaws.com",
  telemetries: ["errors","http","performance"],
  allowCookies: true,
  enableXRay: true
});
</script>

3. Core Web Vitals

Google が定義した 3 つのユーザー体験メトリクス：

4. Custom Events（カスタムイベント）

ビジネスメトリクスを追跡。JavaScript API で自定義イベント送信。

// RUM Client SDK経由のカスタムイベント送信
window.cwr('recordEvent', {
  eventName: 'purchase_complete',
  category: 'commerce',
  value: 149.99,  // 購入金額
  currency: 'USD',
  orderId: 'ORD-20240127-001'
});

window.cwr('recordEvent', {
  eventName: 'form_submit',
  category: 'engagement',
  formName: 'contact_form',
  fields: 3
});

5. Session Replay（セッションリプレイ）

ユーザーのブラウザ操作を動画化。UI/UX 問題の詳細把握。

Session Replay の利点：

• UI/UX 問題の映像確認：テキスト説明より具体的な問題理解
• ユーザー行動パターン分析：クリック位置・フォーム入力フロー
• エラー発生時の操作コンテキスト：エラーの前後の操作状況を確認
• PII 自動マスキング：個人情報（クレジットカード・パスワード）は自動に隠蔽

6. JavaScriptエラーとリソースエラー

自動キャプチャされるエラー情報：

{
  "errorType": "uncaught_error",
  "errorMessage": "Cannot read properties of undefined (reading 'map')",
  "stackTrace": [
    "at fetchUserData (https://example.com/app.js:245:15)",
    "at async loadPage (https://example.com/app.js:180:8)"
  ],
  "browser": "Chrome 121",
  "os": "Windows 10",
  "url": "https://example.com/products/checkout",
  "timestamp": "2026-04-27T10:32:45.123Z"
}

7. HTTP リクエスト モニタリング

API 呼び出しのステータス・タイミング・ペイロード情報：

{
  "method": "POST",
  "url": "https://api.example.com/v1/orders",
  "statusCode": 500,
  "responseTime": 2341,  // ms
  "requestSize": 512,
  "responseSize": 1024,
  "timestamp": "2026-04-27T10:32:45.456Z"
}

計測データ体系

CloudWatch RUM が収集するデータの全体像：

AppMonitor（アプリケーションモニター）
  └─ Session（セッション 30 分間）
      ├─ Page View（ページビュー）
      │   ├─ Core Web Vitals
      │   │   ├─ LCP（ms）
      │   │   ├─ FID（ms）
      │   │   └─ CLS（0〜1）
      │   ├─ Performance Metrics
      │   │   ├─ DNS Resolution
      │   │   ├─ TCP Connection
      │   │   ├─ TLS Handshake
      │   │   ├─ Time to First Byte
      │   │   ├─ DOM Interactive
      │   │   ├─ DOM Content Loaded
      │   │   └─ Load Complete
      │   ├─ Resource Timing
      │   │   ├─ HTML
      │   │   ├─ CSS
      │   │   ├─ JavaScript
      │   │   ├─ Images
      │   │   └─ API Calls
      │   └─ User Interaction
      │       ├─ Click
      │       ├─ Scroll
      │       └─ Input
      ├─ JavaScript Error
      │   ├─ Error Message
      │   ├─ Stack Trace
      │   ├─ Source Map Resolution
      │   └─ Affected Users
      ├─ HTTP Request Error
      │   ├─ 4xx Errors
      │   ├─ 5xx Errors
      │   ├─ Timeout
      │   └─ Network Failure
      ├─ Custom Event
      │   ├─ Purchase Complete
      │   ├─ Form Submit
      │   └─ User-Defined Events
      └─ Session Context
          ├─ Session ID
          ├─ User Agent
          ├─ Geolocation
          ├─ Browser Version
          ├─ Device Type
          └─ Page URL

主要ユースケース

1. Core Web Vitals 改善によるSEO最適化

背景： Google検索順位 はCore Web Vitals スコアに依存。ユーザー体験向上 = SEO向上。

RUMの役割：

• LCP < 2.5s の達成度を実ユーザーデータから測定
• 地域・デバイス別に LCP が遅いセグメントを特定
• デプロイ前後での LCP 変化を自動追跡

実装例：

# Core Web Vitals の地域別ダッシュボード
- 日本ユーザー LCP: 1.8s, CLS: 0.05 ✅
- インドユーザー LCP: 3.2s, CLS: 0.12 ⚠️（ネットワーク遅延が原因）
  → CDN 拡張 / キャッシュ戦略見直し

2. ページロード遅延の細分化分析

背景： 「ページロードが遅い」という苦情 → どのリソースで遅延か特定困難。

RUMの役割：

• Resource Timing で HTML/CSS/JS/画像の個別読込時間を記録
• ネットワーク段階別（DNS/TCP/TLS/TTFB）の遅延特定
• CDN キャッシュヒット率の定量化

実装例：

Resource Timing Breakdown（P95）：
  DNS Resolution:     150ms（遅い → DNS プリフェッチ追加）
  TCP Connection:     200ms（正常）
  TLS Handshake:      100ms（正常）
  Time to First Byte: 800ms（遅い → バックエンド最適化）
  Download:           150ms（正常）
  Total:            1,400ms

3. JavaScriptエラーの本番環境検出と即座対応

背景： ステージング環境で再現しない本番特有のバグ。ユーザー報告 → 手動調査で時間喪失。

RUMの役割：

• ブラウザで発生したエラーをスタックトレース付きで自動キャプチャ
• Source Map 自動解析でミニファイコードを可読化
• エラーレート・影響度・ブラウザ別集計で優先度決定

実装例：

// エラー発生（ミニファイコード）
// Uncaught TypeError: Cannot read properties of undefined (reading 'map')
// at HTMLDocument.n (https://example.com/bundle.js:15:1234)

// RUM の Source Map 解析後
// Uncaught TypeError: Cannot read properties of undefined (reading 'map')
// at fetchUserData (src/api.js:45:12)
// at async loadPage (src/pages/checkout.js:120:5)

// 影響度分析
// - エラー率: 2.3%（全ユーザー）
// - 影響ユーザー: 3,200 人
// - ブラウザ: Chrome 121（95%）
// - 地域: Japan（80%）
// → チェックアウト画面 → fetchUserData 関数 → ユーザーデータ取得失敗

4. 特定ユーザーセグメント別パフォーマンス分析

背景： 全体平均 LCP 2.0s でも、インドの 4G ユーザーは 4.0s。セグメント分析が重要。

RUMの役割：

• 地理情報・デバイスタイプ・ブラウザ別の パフォーマンス分析
• ネットワーク速度別の実際のユーザー体験定量化
• セグメント別の改善優先度決定

実装例：

パフォーマンス分析（セグメント別）：

日本・Wi-Fi・Chrome → LCP 1.5s, CLS 0.04 ✅
日本・5G・iPhone → LCP 1.8s, CLS 0.05 ✅
日本・4G・iPhone → LCP 2.3s, CLS 0.06 ⚠️
インド・4G・Chrome → LCP 4.2s, CLS 0.08 ❌
インド・3G・Android → LCP 5.8s, CLS 0.10 ❌

→ インド向け：画像最適化・コード分割・キャッシュ戦略強化

5. デプロイによるパフォーマンス回帰検出

背景： 本番デプロイ後、ユーザー報告で パフォーマンス低下に気付く（MTTR が長い）。

RUMの役割：

• Version タグでビルド単位でのパフォーマンス追跡
• デプロイ前後での指標変化を自動比較
• 回帰検出で即座に前版本ロールバック判定

実装例：

// デプロイ時に Version タグを自動付加
window.cwr('recordMetadata', {
  buildVersion: 'v2.1.0',
  commitHash: 'abc123def456',
  deployedAt: '2026-04-27T10:30:00Z'
});

// 自動分析結果
// v2.0.9（旧版） → LCP: 1.8s, CLS: 0.05
// v2.1.0（新版） → LCP: 2.4s, CLS: 0.08（回帰！）
// → 5 分以内に v2.0.9 にロールバック指示

6. Session Replay でUI/UX問題の映像化

背景： 「フォーム送信ボタンが反応しない」という苦情 → 実際の操作を確認したい。

RUMの役割：

• ユーザーセッションを動画化
• クリック位置・フォーム入力・スクロール操作を記録
• エラー発生時のユーザー行動コンテキスト把握

実装例：

Session Replay ダッシュボード：
1. ユーザー ID: user-12345 のセッション再生
   - ページ読込完了
   - 商品選択（クリック位置: [234, 456]）
   - 「カートに追加」ボタン クリック
   - 5 秒待機 → JavaScript エラー "Cart API failed"
   - ボタン再クリック → 成功
   
2. 原因特定：
   - API が 5 秒でタイムアウト
   - リトライロジック未実装
   → リトライ機構追加

7. X-Ray統合による フロントエンド⇔バックエンド追跡

背景： ページロード遅延 → フロントエンド? バックエンド?エンドツーエンド追跡が必要。

RUMの役割：

• RUM の ページビュー ID を X-Ray に自動リンク
• フロントエンド遅延 → バックエンド処理時間の相関分析
• API 呼び出しがどの Lambda・RDS で時間消費しているか特定

実装例：

RUM Dashboard → ページロード 2,500ms 遅延
  ↓
X-Ray トレース確認
  API Gateway → Lambda → DynamoDB（800ms）
  Lambda → 外部API（1,200ms） ← ボトルネック
  DynamoDB Query（300ms）
  
→ 外部API キャッシュ層導入 → 1,200ms → 50ms に改善

8. コンバージョン率向上の定量化

背景： UI改善の効果を定量化。「パフォーマンス向上 → コンバージョン増」の証拠。

RUMの役割：

• Custom Event で購入完了・フォーム送信をカウント
• ページロード時間とコンバージョン率の相関分析
• A/B テスト時の性能・コンバージョン同時測定

実装例：

// チェックアウト画面完了時
window.cwr('recordEvent', {
  eventName: 'checkout_complete',
  orderId: order.id,
  amount: order.total,
  pageLoadTime: performance.timing.loadEventEnd - performance.timing.navigationStart
});

// 分析結果
// LCP < 1.5s の セッション → コンバージョン率 8.2%
// LCP 2.5-3.5s の セッション → コンバージョン率 5.1%（38% 低下）
// LCP > 4.0s の セッション → コンバージョン率 2.3%（72% 低下）

9. グローバルCDN / CloudFront 効果測定

背景： CloudFront 導入効果を定量化。「どの地域で改善したか」をデータで証明。

RUMの役割：

• CloudFront 導入前後のパフォーマンス比較
• エッジロケーション別のダウンロード時間改善
• キャッシュヒット率の効果測定

実装例：

CloudFront 導入前後のパフォーマンス：

北米（ロサンゼルス）：
  導入前 LCP: 1.2s → 導入後 LCP: 0.9s（25% 改善）

ヨーロッパ（ロンドン）：
  導入前 LCP: 2.1s → 導入後 LCP: 1.3s（38% 改善）

アジア（東京）：
  導入前 LCP: 1.8s → 導入後 LCP: 1.1s（39% 改善）

10. 特定JavaScript ライブラリのパフォーマンス影響測定

背景： 新しい分析ライブラリを導入 → ページロード時間に影響?

RUMの役割：

• リソースタイミングデータで JavaScript ファイルの読込時間測定
• 本体コード vs 外部ライブラリの時間比較
• ライブラリ導入の費用対効果分析

実装例：

Resource Timing 分析：
- app.js (本体): 150ms
- analytics-lib.js（分析ライブラリ）: 80ms
- tracking.js（トラッキング）: 45ms
- monitoring.js（RUM本体）: 20ms
合計: 295ms

→ 分析ライブラリの Lazy Load 検討

設定・操作の具体例

AWS CLI での AppMonitor 作成

# AppMonitor の作成
aws rum create-app-monitor \
  --region ap-northeast-1 \
  --name production-web-app \
  --domain example.com \
  --app-monitor-configuration '{
    "AllowCookies": true,
    "EnableXRay": true,
    "IncludedPages": ["https://example.com/*"],
    "ExcludedPages": ["https://example.com/admin/*"],
    "SessionSampleRate": 0.1,
    "Telemetries": ["errors", "http", "performance"],
    "MetricsDestination": "CloudWatch",
    "LogsDestination": "CloudWatchLogs"
  }' \
  --tags "Environment=Production" "Team=WebPlatform"

# → 出力例
# {
#   "AppMonitorResponse": {
#     "Id": "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx",
#     "Name": "production-web-app"
#   }
# }

# AppMonitor 一覧表示
aws rum list-app-monitors --region ap-northeast-1

# AppMonitor 詳細表示
aws rum get-app-monitor \
  --name production-web-app \
  --region ap-northeast-1

JavaScript SDK による Custom Event 送信

// RUM Client が読込完了を待機
if (window.AwsRumClient) {
  // カスタムイベント: 購入完了
  window.cwr('recordEvent', {
    eventName: 'purchase_complete',
    category: 'ecommerce',
    value: 129.99,
    currency: 'USD',
    items: [
      { sku: 'PROD-001', quantity: 2, price: 64.99 }
    ]
  });

  // カスタムイベント: ユーザーセグメント付加
  window.cwr('recordEvent', {
    eventName: 'user_signup',
    category: 'engagement',
    planType: 'premium',
    registrationSource: 'mobile_app'
  });

  // メタデータ付加（A/B テスト等）
  window.cwr('recordMetadata', {
    experimentId: 'exp-checkout-v2-001',
    variant: 'variant_b',
    userId: 'user-12345'
  });
}

CloudFormation での AppMonitor 構築

AWSTemplateFormatVersion: '2010-09-09'
Description: 'CloudWatch RUM AppMonitor for Web Application'

Resources:
  RumGuestRole:
    Type: AWS::IAM::Role
    Properties:
      AssumeRolePolicyDocument:
        Version: '2012-10-17'
        Statement:
          - Effect: Allow
            Principal:
              Service: rum.amazonaws.com
            Action: 'sts:AssumeRole'

  RumGuestPolicy:
    Type: AWS::IAM::RolePolicy
    Properties:
      RoleName: !Ref RumGuestRole
      PolicyDocument:
        Version: '2012-10-17'
        Statement:
          - Effect: Allow
            Action:
              - 'rum:PutRumEvents'
              - 'cloudwatch:PutMetricData'
              - 'logs:PutLogEvents'
            Resource: '*'

  RumAppMonitor:
    Type: AWS::Rum::AppMonitor
    Properties:
      Name: production-app
      Domain: example.com
      AppMonitorConfiguration:
        AllowCookies: true
        EnableXRay: true
        SessionSampleRate: 0.1
        Telemetries:
          - errors
          - http
          - performance
      Tags:
        Environment: Production
        Team: WebPlatform

Outputs:
  AppMonitorId:
    Value: !Ref RumAppMonitor
    Description: CloudWatch RUM AppMonitor ID

  JavaScriptSnippet:
    Value: !Sub 'aws rum get-app-monitor --name ${RumAppMonitor}'
    Description: コマンドでJavaScriptスニペットを取得

CDK（TypeScript）での構築

import * as cdk from 'aws-cdk-lib';
import * as rum from 'aws-cdk-lib/aws-rum';
import * as iam from 'aws-cdk-lib/aws-iam';

export class RumStack extends cdk.Stack {
  constructor(scope: cdk.App, id: string, props?: cdk.StackProps) {
    super(scope, id, props);

    // RUM Guest Role
    const guestRole = new iam.Role(this, 'RumGuestRole', {
      assumedBy: new iam.ServicePrincipal('rum.amazonaws.com'),
    });

    guestRole.addToPrincipalPolicy(
      new iam.PolicyStatement({
        effect: iam.Effect.ALLOW,
        actions: [
          'rum:PutRumEvents',
          'cloudwatch:PutMetricData',
          'logs:PutLogEvents',
        ],
        resources: ['*'],
      })
    );

    // AppMonitor
    const appMonitor = new rum.CfnAppMonitor(this, 'ProductionAppMonitor', {
      name: 'production-web-app',
      domain: 'example.com',
      appMonitorConfiguration: {
        allowCookies: true,
        enableXRay: true,
        sessionSampleRate: 0.1,
        telemetries: ['errors', 'http', 'performance'],
      },
    });

    // Output: AppMonitor ID
    new cdk.CfnOutput(this, 'AppMonitorId', {
      value: appMonitor.ref,
      description: 'CloudWatch RUM AppMonitor ID',
    });
  }
}

const app = new cdk.App();
new RumStack(app, 'RumStack');

Terraform での構築

terraform {
  required_providers {
    aws = {
      source  = "hashicorp/aws"
      version = "~> 5.0"
    }
  }
}

provider "aws" {
  region = "ap-northeast-1"
}

# RUM Guest IAM Role
resource "aws_iam_role" "rum_guest_role" {
  name = "rum-guest-role"

  assume_role_policy = jsonencode({
    Version = "2012-10-17"
    Statement = [
      {
        Effect = "Allow"
        Principal = {
          Service = "rum.amazonaws.com"
        }
        Action = "sts:AssumeRole"
      }
    ]
  })
}

resource "aws_iam_role_policy" "rum_guest_policy" {
  name = "rum-guest-policy"
  role = aws_iam_role.rum_guest_role.id

  policy = jsonencode({
    Version = "2012-10-17"
    Statement = [
      {
        Effect = "Allow"
        Action = [
          "rum:PutRumEvents",
          "cloudwatch:PutMetricData",
          "logs:PutLogEvents"
        ]
        Resource = "*"
      }
    ]
  })
}

# CloudWatch RUM AppMonitor
resource "aws_rum_app_monitor" "main" {
  name               = "production-app"
  domain             = "example.com"
  cwlog_enabled      = true
  app_monitor_configuration {
    allow_cookies           = true
    enable_xray             = true
    session_sample_rate     = 0.1
    telemetries             = ["errors", "http", "performance"]
  }

  tags = {
    Environment = "Production"
    Team        = "WebPlatform"
  }
}

output "app_monitor_id" {
  value = aws_rum_app_monitor.main.id
}

Datadog RUM との比較統合

// CloudWatch RUM + Datadog RUM ハイブリッド計測
if (window.AwsRumClient) {
  // CloudWatch RUM（AWS ネイティブ）
  window.cwr('recordEvent', {
    eventName: 'page_view',
    pageUrl: window.location.href,
    pageLoadTime: performance.timing.loadEventEnd - performance.timing.navigationStart
  });
}

if (window.DD_RUM) {
  // Datadog RUM（サードパーティ）
  DD_RUM.startSessionReplayRecording();
  DD_RUM.addAction('custom_event', {
    event_type: 'purchase',
    amount: 99.99
  });
}

// 相互の長所を活用：
// - CloudWatch RUM: AWS ネイティブ統合、X-Ray 連携
// - Datadog RUM: 高度な APM、より多くの言語対応

類似サービス比較

選択基準

CloudWatch RUM を選ぶべき場合：

• AWS インフラが主体（X-Ray, CloudWatch Logs, Lambda）
• Core Web Vitals を重視した SEO最適化
• CloudWatch ダッシュボードで一元管理したい
• コスト最適化が重要（イベント単位課金）

Datadog RUM を選ぶべき場合：

• マルチクラウド環境（AWS + GCP + Azure）
• 高度な APM 機能・サービスマップが必要
• AI による異常検知が重要
• エンタープライズレベルのサポート

New Relic Browser を選ぶべき場合：

• New Relic One でメトリクス・ログ・トレースを一元管理
• リアルユーザーモニタリング + APM の統合
• チェンジトラッキング（デプロイ追跡）

Sentry を選ぶべき場合：

• JavaScript / Python / Go のエラートラッキングに特化
• Open Source セルフホスト版が必要
• コスト優先で基本的な エラー検知で十分

LogRocket を選ぶべき場合：

• Session Replay（動画化）が最優先
• UX 改善のための操作フロー分析
• 中規模 SaaS / eコマースサイト向け

Hotjar を選ぶべき場合：

• ユーザー行動の Heatmap・Poll・Survey が必須
• UX リサーチツール的な利用
• パフォーマンス計測は二次的

ベストプラクティス

✅ 推奨される実装パターン

1. セッションサンプリングで コスト最適化

// 本番環境：10% サンプリング
sessionSampleRate: process.env.NODE_ENV === 'production' ? 0.1 : 1.0

// 結果：
// - 本番：100万ユーザー × 10 セッション/月 × 0.1 = 100万イベント → $10/月
// - 開発：1000ユーザー × 5 セッション/月 × 1.0 = 5000イベント → $0.05/月

2. Version タグで デプロイ追跡

window.cwr('recordMetadata', {
  appVersion: process.env.REACT_APP_VERSION,  // '2.1.0'
  commitHash: process.env.REACT_APP_GIT_COMMIT,  // 'abc123def456'
  deployedAt: new Date().toISOString()
});

// ダッシュボール：
// v2.0.9（前版） LCP 平均 1.8s
// v2.1.0（現版） LCP 平均 2.4s（回帰）→ 即座ロールバック

3. X-Ray トレース統合で エンドツーエンド追跡

// RUM で ページビュー ID を自動取得
const pageViewId = window.AwsRumClient?.pageViewId;

// API 呼び出し時に X-Ray Trace Header に付加
fetch('/api/data', {
  headers: {
    'X-Amzn-Trace-Id': `Root=${pageViewId}`,
    'Content-Type': 'application/json'
  }
});

// バックエンド（Node.js Lambda）で キャプチャ
const AWSXRay = require('aws-xray-sdk-core');
const http = AWSXRay.captureHttpsGlobal(require('https'));

// Result: RUM ページビュー → X-Ray トレース へシームレス遷移

4. Custom Event で ビジネスメトリクス追跡

// チェックアウトフロー
document.getElementById('checkout-btn').addEventListener('click', () => {
  window.cwr('recordEvent', {
    eventName: 'checkout_initiated',
    cartValue: cart.total,
    itemCount: cart.items.length,
    userId: user.id  // 匿名化されたユーザーID
  });
});

// 注文完了
api.submitOrder(order).then(() => {
  window.cwr('recordEvent', {
    eventName: 'order_completed',
    orderId: order.id,
    amount: order.total,
    currency: 'JPY',
    pageLoadTime: performance.timing.loadEventEnd - performance.timing.navigationStart,
    conversionValue: order.total
  });
});

// ダッシュボール：
// - Checkout Rate: 45% (initiated → completed)
// - Average Order Value: ¥8,500
// - LCP < 2.0s のセッション のコンバージョン率 8.2% vs LCP > 4.0s 2.3%

5. CloudWatch Logs 連携で 詳細分析

# AppMonitor 作成時に CloudWatch Logs 転送有効化
aws rum create-app-monitor \
  --name production-app \
  --domain example.com \
  --cwlog-enabled \
  --cwlog-log-group /aws/rum/production-app

# Logs Insights クエリ例：
# LCP が 3 秒以上のセッションを抽出
fields @timestamp, sessionId, pageUrl, lcp, browser, country
| filter lcp > 3000
| stats count() as slowSessions by country, browser

# エラーレート急増検知
fields @timestamp, errorType, errorMessage
| stats count() as errorCount by errorType
| filter errorCount > 10

6. Session Replay で UI/UX 問題調査

// Session Replay 有効化
window.AwsRumClient = {
  // ... 標準設定 ...
  recordSession: true,
  recordSessionEvents: true,
  maskInputFields: true,  // フォーム入力自動マスキング
  maskAllInputFields: true
};

// Error 発生時のセッションリプレイを優先的に記録
window.addEventListener('error', (event) => {
  window.cwr('recordEvent', {
    eventName: 'javascript_error',
    errorMessage: event.message,
    recordReplay: true  // このセッションは確実に記録
  });
});

7. 環境別の設定切り替え

// 開発環境：詳細記録
if (process.env.NODE_ENV === 'development') {
  window.AwsRumConfig = {
    sessionSampleRate: 1.0,  // 100% 記録
    telemetries: ['errors', 'http', 'performance'],
    recordSession: true,
    enableXRay: true
  };
}

// ステージング環境：選別記録
if (process.env.NODE_ENV === 'staging') {
  window.AwsRumConfig = {
    sessionSampleRate: 0.5,  // 50% 記録
    telemetries: ['errors', 'http', 'performance'],
    recordSession: false,  // リプレイは無効
    enableXRay: true
  };
}

// 本番環境：コスト最適化
if (process.env.NODE_ENV === 'production') {
  window.AwsRumConfig = {
    sessionSampleRate: 0.1,  // 10% 記録
    telemetries: ['errors', 'http', 'performance'],
    recordSession: false,  // リプレイは無効
    enableXRay: true
  };
}

❌ アンチパターン

1. セッションサンプリング未設定による コスト爆発

// 悪い例：全セッション記録
window.AwsRumConfig = {
  sessionSampleRate: 1.0  // 本番 で 100% 記録
};

// 結果：
// 100万ユーザー × 10セッション/月 × 50イベント/セッション
// = 5億イベント → $5,000/月（高額！）

// 改善：
sessionSampleRate: 0.1  // 10% サンプリング → $500/月 に削減

2. X-Ray 統合未実装による 部分的可観測性

// 悪い例：RUM のみで バックエンド遅延の原因不明
window.AwsRumConfig = {
  enableXRay: false  // X-Ray 統合未有効
};

// ページロード 2000ms のうち、どこで遅延?
// - フロントエンド責任か？バックエンド責任か？
// → X-Ray 無しでは特定困難

// 改善：
enableXRay: true  // X-Ray 統合有効化
// → RUM ページビュー → X-Ray トレース へジャンプ
// → Lambda / RDS / 外部API の処理時間 明確化

3. PII（個人情報）をマスキングせずに送信

// 悪い例：クレジットカード番号をカスタムイベントに含める
window.cwr('recordEvent', {
  eventName: 'payment_submitted',
  creditCard: '4111-1111-1111-1111'  // 危険！
});

// 改善：
window.cwr('recordEvent', {
  eventName: 'payment_submitted',
  cardLastFour: '1111',  // 最後の 4 桁のみ
  amount: 99.99
});

// または AppMonitor の Data Protection Policy で自動マスキング
aws rum update-app-monitor \
  --name production-app \
  --data-protection-policy '{
    "patterns": [
      "creditcard",
      "email",
      "phone"
    ]
  }'

4. Custom Event の過度な自動送信

// 悪い例：マウス移動を全て記録
document.addEventListener('mousemove', () => {
  window.cwr('recordEvent', {
    eventName: 'mousemove',
    x: event.clientX,
    y: event.clientY
  });
});

// 結果：
// 1セッション = 数千イベント → 計測システム過負荷 + コスト爆発

// 改善：スロットリング実装
let lastRecordedTime = 0;
document.addEventListener('mousemove', () => {
  if (Date.now() - lastRecordedTime > 1000) {  // 1秒に 1 回のみ
    window.cwr('recordEvent', {
      eventName: 'mousemove_throttled',
      x: event.clientX,
      y: event.clientY
    });
    lastRecordedTime = Date.now();
  }
});

5. エラーハンドリング未実装による 白紙画面

// 悪い例：AppMonitor スニペット読込エラー時の処理なし
<script src="https://client.rum.ap-northeast-1.amazonaws.com/cwr.js"></script>
// 読込失敗したら? → window.cwr が undefined → アプリ崩壊

// 改善：フォールバック実装
<script>
window.cwr = window.cwr || function() {};  // フォールバック関数
</script>
<script src="https://client.rum.ap-northeast-1.amazonaws.com/cwr.js" async></script>

// または読込失敗時の例外処理
if (!window.cwr) {
  console.warn('RUM Client failed to load');
  // アプリケーション は正常に動作を続ける
}

6. CloudWatch Logs データ保持期間の設定ミス

# 悪い例：ログを永遠に保持（コスト増加）
aws logs put-retention-policy \
  --log-group-name /aws/rum/production-app \
  --retention-in-days 36500  # 100 年保持！

# 改善：適切な保持期間設定
aws logs put-retention-policy \
  --log-group-name /aws/rum/production-app \
  --retention-in-days 30  # 30 日保持（コスト最適化）

# または段階的分析：
# - CloudWatch Logs: 30日（アクティブな調査）
# - S3 エクスポート: 1年（長期分析）

トラブルシューティング

2025-2026最新動向

Session Replay の強化（2026年3月）

• Heatmap 統合：クリック位置・スクロール深さの可視化
• AI による 異常検知：ユーザー行動パターンから問題を自動検出
• コンプライアンス機能：GDPR / CCPA 対応の自動マスキング拡張

Custom Event SDK の拡張（2026年2月）

• 自動ビジネスメトリクス計測：e-commerce プラグイン（Order Value, Conversion, Cart Abandonment 自動追跡）
• ユーザーセグメンテーション強化：カスタム属性で Lookalike オーディエンス 生成対応

Core Web Vitals 新メトリクス対応（2026年4月）

• INP（Interaction to Next Paint）：FID の後継。より正確なインタラクティビティ測定
• TTFB（Time to First Byte）：バックエンド応答性の計測

Application Signals との統合（2026年2月）

• SLO 目標達成率の可視化：RUM データを Application Signals SLO に自動フィード
• 根本原因分析の自動化：RUM エラー → Application Signals インサイトへの自動遷移

学習リソース

AWS 公式ドキュメント

1. CloudWatch RUM 公式ドキュメント
2. CloudWatch RUM API Reference
3. CloudWatch RUM JavaScript Client
4. CloudWatch RUM Best Practices

AWS サンプルコード

1. aws-samples/aws-rum-integration-examples
2. CloudWatch RUM with CloudFormation
3. RUM + X-Ray Integration Guide

コミュニティ・ブログ

1. AWS Observability Blog
2. Web Vitals by Google
3. Core Web Vitals による SEO 最適化

Core Web Vitals リソース

1. Google PageSpeed Insights
2. Web Vitals Chrome Extension
3. CrUX Dashboard

関連サービス

1. CloudWatch Logs Insights
2. AWS X-Ray
3. CloudWatch Application Insights

導入ロードマップ

フェーズ 1: 基本計測（1-2週間）

• [ ] AppMonitor 作成
• [ ] JavaScript スニペット埋め込み
• [ ] Core Web Vitals ダッシュボード確認
• [ ] X-Ray 統合有効化

フェーズ 2: カスタマイズ（2-3週間）

• [ ] Custom Event 実装（コンバージョン等）
• [ ] CloudWatch Logs 転送設定
• [ ] Version タグ自動付加
• [ ] セッションサンプリング最適化

フェーズ 3: 運用準備（3-4週間）

• [ ] Session Replay 有効化
• [ ] データ保護ポリシー設定
• [ ] アラーム・ダッシュボード作成
• [ ] チーム教育・ドキュメント作成

フェーズ 4: 発展的活用（4週間以降）

• [ ] A/B テスト時のパフォーマンス測定
• [ ] ビジネスメトリクス相関分析
• [ ] SEO 改善の定量化
• [ ] 定期的な パフォーマンス レビュー

実装チェックリスト

• [ ] AWS アカウント・リージョン確認
• [ ] IAM ロール・ポリシー作成
• [ ] AppMonitor 作成
• [ ] JavaScript スニペット生成・検証
• [ ] HTML に スニペット埋め込み
• [ ] Core Web Vitals ダッシュボード確認
• [ ] Custom Event SDK 実装
• [ ] X-Ray 統合テスト
• [ ] CloudWatch Logs 転送確認
• [ ] Session Replay 有効化
• [ ] Data Protection Policy 設定
• [ ] Version タグ 自動付加
• [ ] アラーム・通知設定
• [ ] ダッシュボード カスタマイズ
• [ ] チーム教育・ドキュメント作成
• [ ] 本番環境デプロイ
• [ ] パフォーマンスベースライン確認
• [ ] 運用ガイドライン 策定

まとめ

Amazon CloudWatch RUM は、JavaScript スニペット埋め込みで実ユーザーのフロントエンド パフォーマンスデータを一元収集・分析する リアルユーザーモニタリングサービス です。Core Web Vitals（LCP/FID/CLS）・ページロード時間・JavaScript エラー・セッション情報を自動計測し、CloudWatch ダッシュボード・CloudWatch Logs・X-Ray トレースと統合。セッションサンプリングでコスト最適化、Custom Event でビジネスメトリクス追跡、Session Replay で UI/UX 問題の映像化が可能です。

Synthetics（模擬監視）と組み合わせることで、内部テスト + 実ユーザーモニタリングの完全な可観測性を実現。特に AWS インフラを活用した ウェブ・モバイル アプリケーションで、Google SEO 評価指標のCore Web Vitals を改善したい場合に有効。2026 年の Session Replay 拡張・INP メトリクス対応・Application Signals 統合により、ユーザー体験最適化がより効率的になります。

参考文献

AWS 公式

• What is CloudWatch RUM
• CloudWatch RUM User Guide
• CloudWatch RUM Pricing
• aws-rum-web GitHub

業界標準・ベストプラクティス

• Web Vitals by Google
• Core Web Vitals Guide
• PageSpeed Insights

関連 AWS サービス

• CloudWatch Logs
• AWS X-Ray
• CloudWatch Application Insights
• CloudWatch Synthetics

最終更新：2026-04-27 バージョン：v2.0