サーバーレス構成：全体構成のまとめ

【クライアント層】
ユーザー（ブラウザ）
    ↓
    
【CDN層】
CloudFront
    ↓
    ├─────────────┬─────────────┐
    ↓             ↓             ↓
    
【フロントエンド層】    【認証層】        【バックエンドAPI層】
S3（React）      Cognito User Pool   API Gateway
                      ↓                  ↓
                  JWTトークン発行       Lambda（バックエンド処理）
                                        ↓
                                     データベース
                                     
【横断的サービス】
- IAM（全体のアクセス制御）
- Systems Manager（設定管理）
- CloudWatch（ログ・監視）

ユーザー
  ↓
CloudFront（エッジロケーション）
  ↓
S3バケット（Reactアプリの静的ファイル）
  ↓
ブラウザでReactが実行

ユーザー（ログイン）
  ↓
CloudFront
  ↓
Cognito User Pool（Hosted UIまたはカスタムUI）
  ↓
認証成功
  ↓
JWTトークン（IDトークン、アクセストークン、リフレッシュトークン）
  ↓
Reactアプリ（localStorageに保存）

Reactアプリ（ブラウザ上で実行）
  ↓（JWTトークン付きリクエスト）
CloudFront
  ↓（パス: /api/*）
API Gateway
  ↓（Cognito Authorizer）
JWTトークン検証
  ↓（認可成功）
Lambda関数（バックエンド処理）
  ↓（必要に応じて）
データベース（RDS PostgreSQL等）
  ↓
レスポンス

Lambda関数
  ↓
Systems Manager Parameter Store
  ├─ 環境変数（dev/staging/prod）
  ├─ APIキー
  ├─ データベース接続情報
  └─ 外部サービスの認証情報

各AWSサービス
  ↓
CloudWatch Logs
  ├─ CloudFront アクセスログ
  ├─ API Gateway 実行ログ
  ├─ Lambda 関数ログ
  └─ Cognito ログ
  
CloudWatch Metrics
  ├─ API呼び出し回数
  ├─ Lambda実行時間
  └─ エラー率
  
CloudWatch Alarms
  ├─ エラー率しきい値超過
  └─ レイテンシ上昇

Lambda関数
  ↓
IAM実行ロール
  ├─ CloudWatch Logsへの書き込み権限
  ├─ Systems Manager Parameter Store読み取り権限
  ├─ KMS復号化権限（暗号化されたパラメータ用）
  ├─ RDS接続権限（必要に応じて）
  └─ 他のAWSサービスへのアクセス権限

認証済みユーザー
  ↓
Cognito Identity Pool（必要に応じて）
  ↓
IAM認証ロール
  └─ S3の特定バケットへのアクセス（ユーザーアップロード等）

API Gateway
  ↓
IAM実行ロール
  ├─ Lambda呼び出し権限
  └─ CloudWatch Logsへの書き込み権限

1. ユーザーがブラウザでアクセス
   ↓
   
2. CloudFront → S3 → Reactアプリ（HTML/CSS/JS）がロード
   ↓
   
3. ブラウザ上でReactが実行開始
   ↓
   
4. ユーザーがログインボタンをクリック
   ↓
   
5. CloudFront → Cognito User Pool → 認証
   ↓
   
6. JWTトークンがReactに返される
   ↓
   
7. ReactがlocalStorageにトークンを保存
   ↓
   
8. ユーザーがデータ取得ボタンをクリック
   ↓
   
9. Reactが fetch('/api/users/me', { headers: { Authorization: 'Bearer <token>' }})
   ↓
   
10. CloudFront → API Gateway
    ↓
    
11. API Gateway
    ├─ Cognito Authorizer → トークン検証 → OK
    └─ Lambda呼び出し
    ↓
    
12. Lambda関数（バックエンド処理）
    ├─ Systems Manager → DB接続情報取得
    ├─ データベースクエリ実行
    └─ レスポンス生成
    ↓
    
13. CloudWatch Logs
    ├─ Lambda実行ログ記録
    └─ API Gateway ログ記録
    ↓
    
14. レスポンスがReactに返される
    ↓
    
15. ブラウザに結果表示

レイヤー1: CloudFront
  └─ HTTPS終端、DDoS保護（AWS Shield Standard）

レイヤー2: API Gateway
  ├─ Cognito Authorizerで認証・認可
  ├─ リクエストバリデーション
  └─ スロットリング

レイヤー3: Lambda
  ├─ IAMロールで最小権限の原則
  ├─ 入力値の再検証
  └─ 出力のサニタイズ

レイヤー4: データベース
  ├─ VPC内に配置（プライベートサブネット）
  ├─ セキュリティグループで制限
  └─ 暗号化（保管時・転送時）

1. Cognito User Pool
   ├─ パスワードポリシー（強度要件）
   ├─ MFA（多要素認証）対応
   └─ アカウントロック機能

2. JWTトークン
   ├─ 有効期限（IDトークン: 1時間、アクセストークン: 1時間）
   ├─ リフレッシュトークン（30日）
   └─ 署名検証（RS256）

3. API Gateway Authorizer
   ├─ トークンの有効性検証
   ├─ スコープ・クレーム確認
   └─ キャッシュ（5分、パフォーマンス最適化）

Systems Manager Parameter Store
  ├─ /dev/db/password（SecureString、KMS暗号化）
  ├─ /dev/api/external-service-key（SecureString）
  ├─ /prod/db/password（SecureString、KMS暗号化）
  └─ /prod/api/external-service-key（SecureString）

Lambda関数
  ↓（IAM権限で制御）
Parameter Store（環境別に取得）
  ↓（KMS復号化）
平文として使用

【完成形】
クライアント
  ↓
CloudFront
  ├→ S3（React - 静的ファイル）
  ├→ API Gateway（Cognito Authorizer）→ Lambda（バックエンド処理）
  └→ Cognito User Pool（認証）
  
【横断的サービス】
- IAM（最小権限の原則）
- Systems Manager（シークレット管理）
- CloudWatch（ログ・監視・アラート）