概要前提条件と制限アーキテクチャツールベストプラクティスエピックトラブルシューティング関連リソース

Amazon Cognito と IaC オートメーションを使用して Amazon Quick Sight ビジュアルコンポーネントをウェブアプリケーションに埋め込む

Ishita Gupta と Srishti Wadhwa、Amazon Web Services

概要

このパターンは、登録済みユーザー埋め込みと効率的な Amazon Cognito 認証を使用して、Amazon Quick Sight ビジュアルコンポーネントを React アプリケーションに埋め込むための特殊なアプローチを提供します。これらのリソースは、Infrastructure as Code (IaC) テンプレートを通じてデプロイされます。従来のダッシュボード埋め込みとは異なり、このソリューションは特定のグラフとグラフを分離して React アプリケーションに直接統合するため、パフォーマンスとユーザーエクスペリエンスの両方が大幅に向上します。

このアーキテクチャは、Amazon Cognito ユーザー管理と Quick Sight アクセス許可の間に効率的な認証フローを確立します。ユーザーは Amazon Cognito を介して認証し、Quick Sight のダッシュボード共有ルールに基づいて承認されたビジュアライゼーションにアクセスします。この合理化されたアプローチにより、堅牢なセキュリティコントロールを維持しながら、Quick Sight コンソールに直接アクセスする必要がなくなります。

完全な環境は、以下を含むすべての必要なインフラストラクチャコンポーネントをプロビジョニングする単一の AWS CloudFormation テンプレートを介してデプロイされます。

AWS Lambda と Amazon API Gateway を使用するサーバーレスバックエンド
Amazon CloudFront、Amazon Simple Storage Service (Amazon S3)、および AWS WAF
Amazon Cognito を使用した ID 管理

すべてのコンポーネントは、最小特権 AWS Identity and Access Management (IAM) ポリシー、 AWS WAF 保護、end-to-end暗号化によるセキュリティのベストプラクティスに従って設定されます。

このソリューションは、ユーザーアクセスをきめ細かく制御しながら、安全でインタラクティブな分析をアプリケーションに統合したい開発チームや組織に最適です。このソリューションは、 AWS マネージドサービスと自動化を使用して、埋め込みプロセスを簡素化し、セキュリティを強化し、進化するビジネスニーズを満たすスケーラビリティを確保します。

対象者とユースケース:

React アプリに分析を埋め込むフロントエンド開発者
ユーザーまたはロールベースのデータ視覚化を提供する Software as a Service (SaaS) 製品チーム
AWS 分析をカスタムポータルに統合したいソリューションアーキテクト
ダッシュボードへのフルアクセスを必要とせずに、認証されたユーザーにビジュアルを公開したいビジネスインテリジェンス (BI) 開発者
インタラクティブなクイックサイトチャートを内部ツールに埋め込むエンタープライズチーム

前提条件と制限

前提条件

このパターンを正常に実装するには、以下が設定されていることを確認してください。

アクティブ AWS アカウント – CloudFormation スタックをデプロイし、Lambda、API Gateway、Amazon Cognito、CloudFront、Amazon S3 リソースを作成するアクセス許可 AWS アカウントを持つ。
Amazon Quick Sight アカウント – ビジュアルを含むダッシュボードが少なくとも 1 つあるアクティブな Quick Sight アカウント。セットアップ手順については、Amazon Quick Suite ドキュメントの「チュートリアル: サンプルデータを使用して Amazon Quick Sight ダッシュボードを作成する」を参照してください。
以下で構成される開発環境。
- Node.js (バージョン 16 以降)
- npm または yarn がインストールされている
- React ビルドツールとしての Vite
- React (バージョン 19.1.1)
ダッシュボードの共有 – ダッシュボードは Quick Sight で共有する必要があり、実装者は埋め込みビジュアルまたはダッシュボードにアクセスするにはログインする必要があります。

制限事項

このパターンでは、登録されたユーザー埋め込み方法を使用します。そのため、実装者はアクティブな Quick Sight アカウントを持っている必要があります。
アクセスは、このパターンを実装している認証された Quick Sight ユーザーと明示的に共有されているダッシュボードとビジュアルに制限されます。実装者に正しいアクセス権がない場合、埋め込み URL の生成は失敗し、ビジュアルはロードされません。
CloudFormation スタックは、Quick Sight、API Gateway、Amazon Cognito AWS リージョンがサポートされているにデプロイする必要があります。利用可能なリージョンについては、「AWS のサービス (リージョン別)」を参照してください。

製品バージョン

Quick Sight Embedding SDK バージョン 2.10.1
React バージョン 19.1.1
このソリューションで使用される最新の React および Vite バージョンとの互換性を確保するための Node.js バージョン 16 以降

アーキテクチャ

ターゲットアーキテクチャ

次の図は、本パターンのアーキテクチャとワークフローを示したものです。

Quick Sight ビジュアルを React アプリケーションに埋め込むためのアーキテクチャとワークフロー。

このワークフローでは、次の操作を行います。

ユーザーはアプリケーションにアクセスします。ユーザーはブラウザを使用して React ウェブアプリケーションを開きます。リクエストは CloudFront ディストリビューションにルーティングされ、アプリケーションのコンテンツ配信ネットワークとして機能します。
はAWS WAF 悪意のあるリクエストをフィルタリングします。リクエストが CloudFront に到達する前に、トラフィックを検査し、セキュリティルールに基づいて悪意のあるリクエストや疑わしいリクエストをブロック AWS WAF AWS WAF します。
Amazon S3 は静的ファイルを提供します。リクエストがクリーンの場合、CloudFront はオリジンアクセスコントロール (OAC) を使用してプライベート S3 バケットから静的フロントエンドアセット (HTML、JS、CSS) を取得し、ブラウザに配信します。
ユーザーがサインインします。アプリケーションがロードされると、ユーザーは Amazon Cognito を通じてサインインします。Amazon Cognito はユーザーを認証し、承認された API アクセス用の安全な JSON ウェブトークン (JWT) を返します。
アプリケーションは API リクエストを行います。ログイン後、React アプリケーションは API Gateway 上の/get-embed-urlエンドポイントに安全な呼び出しを行い、認証のためにリクエストヘッダーに JWT トークンを渡します。
トークンが検証されます。API Gateway は、Amazon Cognito オーソライザーを使用してトークンを検証します。トークンが有効な場合、リクエストは続行されます。それ以外の場合は、401 (未承認) レスポンスで拒否されます。
リクエストは処理のために Lambda に送信されます。その後、検証されたリクエストはバックエンドの Lambda 関数に転送されます。この関数は、リクエストされた Quick Sight ビジュアルの埋め込み URL の生成を担当します。
Lambda は Quick Sight から埋め込み URL を生成します。IAM は、適切なアクセス許可を持つ IAM ロールを使用して Quick Sight GenerateEmbedUrlForRegisteredUser API を呼び出し、安全でユーザースコープのビジュアル URL を生成します。
Lambda は API Gateway に埋め込み URL を返します。Lambda は、生成された埋め込み URL を JSON レスポンスの一部として API Gateway に送信します。その後、このレスポンスはフロントエンドに配信される準備が整います。
埋め込み URL がブラウザに送信されます。埋め込み URL は API レスポンスとしてブラウザに返されます。
ビジュアルがユーザーに表示されます。 React アプリケーションはレスポンスを受け取り、Quick Sight Embedding SDK を使用して特定のビジュアルをユーザーにレンダリングします。

自動化とスケール

バックエンドとフロントエンドのデプロイは、を使用して完全に自動化されます。これにより CloudFormation、Amazon Cognito、Lambda、API Gateway、Amazon S3、CloudFront AWS WAF、IAM ロール、Amazon CloudWatch など、必要なすべての AWS リソースが 1 回のデプロイでプロビジョニングされます。

この自動化により、すべての環境で一貫した反復可能なインフラストラクチャが確保されます。すべてのコンポーネントは自動的にスケーリングされます。Lambda は関数呼び出しに合わせて調整し、CloudFront はキャッシュされたコンテンツをグローバルに提供し、API Gateway は受信リクエストに合わせてスケーリングします。

ツール

AWS のサービス

Amazon Quick Sight は、インタラクティブなダッシュボードやビジュアルの作成、管理、埋め込みに役立つクラウドネイティブのビジネスインテリジェンスサービスです。
Amazon API Gateway はAPIs を管理します。
AWS Lambdaは、このパターンが安全な Quick Sight 埋め込み URLs動的に生成するために使用するサーバーレスコンピューティングサービスであり、リクエストに基づいて自動的にスケーリングされます。
Amazon Cognito はユーザーに認証と認可を提供し、API アクセス用の安全なトークンを発行します。
Amazon S3 は、このパターンの静的フロントエンドアセットをホストし、CloudFront を通じて安全に提供します。
Amazon CloudFront は、低レイテンシーでフロントエンドコンテンツをグローバルに配信し、トラフィックフィルタリング AWS WAF のためにと統合します。
AWS WAF セキュリティルールとレート制限を適用することで、はウェブアプリケーションを悪意のあるトラフィックから保護します。
AWS CloudFormationは、すべてのアプリケーションリソースのプロビジョニングと設定を 1 回のデプロイで自動化します。
Amazon CloudWatch は、Lambda、API Gateway、およびからログとメトリクスを収集し、モニタリングとトラブルシューティング AWS WAF を行います。

開発ツール

React JS は、このパターンがウェブアプリケーションを構築し、埋め込み Quick Sight ビジュアルを統合するために使用されるフロントエンドフレームワークです。
Vite は、React アプリケーションの迅速な開発と最適化された本番稼働用ビルドに使用されるビルドツールです。
Quick Sight Embedding SDK は、Quick Sight ビジュアルを React アプリケーションに埋め込むことを容易にし、アプリケーションとビジュアル間のシームレスなやり取りを可能にします。

コードリポジトリ

このパターンのコードは、React リポジトリの GitHub Amazon Quick Sight Visual Embedding で入手できます。 https://github.com/aws-samples/sample-quicksight-visual-embedding

ベストプラクティス

このパターンでは、次のセキュリティのベストプラクティスが自動的に実装されます。

JWT ベースの認証に Amazon Cognito ユーザープールを使用し、オプションの多要素認証 (MFA) を使用します。
Amazon Cognito オーソライザーで APIs を保護し、すべてのサービスに最小特権の IAM ポリシーを適用します。
Quick Sight に登録されたユーザーの埋め込みを実装し、リーダーロールを使用してユーザーを自動プロビジョニングします。
CloudFront と HTTPS を介して TLS 1.2 以降のバージョンをサポートする転送中の暗号化を適用します。
バージョニングと OAC で Amazon S3 の AES-256 を使用して、保管中のデータを暗号化します。
スロットリングとクォータを使用して API Gateway 使用量プランを設定します。
リザーブド同時実行と環境変数保護を使用して Lambda を保護します。
Amazon S3、CloudFront、Lambda、API Gateway のログ記録を有効にします。CloudWatch を使用してサービスをモニタリングします。
ログを暗号化し、アクセスコントロールを適用し、HTTPS 以外のアップロードまたは暗号化されていないアップロードに対して拒否ポリシーを適用します。

さらに、以下をお勧めします。

CloudFormation を使用してデプロイを自動化し、環境間で一貫した設定を維持します。
各ユーザーに、埋め込みビジュアルにアクセスするための正しい Quick Sight アクセス許可があることを確認します。
Amazon Cognito オーソライザーで API Gateway エンドポイントを保護し、すべての IAM ロールに最小特権の原則を適用します。
Amazon リソースネーム (ARNs) や IDs などの機密情報は、ハードコーディングするのではなく、環境変数に保存します。
依存関係を減らし、コールドスタートのパフォーマンスを向上させることで、Lambda 関数を最適化します。詳細については、 AWS ブログ記事「Optimizing cold start performance of AWS Lambda using advanced priming strategies with SnapStart」を参照してください。
CloudFront ドメインを Quick Sight 許可リストに追加して、安全なビジュアル埋め込みを有効にします。
CloudWatch とを使用してログ記録、アラート、トラフィック保護 AWS WAF を行い、パフォーマンスとセキュリティをモニタリングします。

その他の推奨されるベストプラクティス

からの SSL 証明書でカスタムドメインを使用して AWS Certificate Manager 、安全でブランド化されたユーザーエクスペリエンスを提供します。
カスタマーマネージド AWS Key Management Service (AWS KMS) キーを使用して Amazon S3 データおよび CloudWatch ログを暗号化し、暗号化をより詳細に制御します。
ジオブロッキング、SQL インジェクション (SQLi)、クロスサイトスクリプティング (XSS) 保護、および脅威防止を強化するためのカスタムフィルターを使用して AWS WAF ルールを拡張します。
CloudWatch アラーム、およびを有効に AWS CloudTrail して AWS Config、リアルタイムのモニタリング、監査、設定コンプライアンスを実現します。
きめ細かな IAM ポリシーを適用し、API キーローテーションを適用し、絶対に必要な場合にのみクロスアカウントアクセスを許可します。
System and Organization Controls 2 (SOC 2)、General Data Protection Regulation (GDPR)、Health Insurance Portability and Accountability Act (HIPAA) などのコンプライアンスフレームワークとの整合性を確保するため、定期的なセキュリティ評価を実施します。

エピック

タスク説明必要なスキル

タスク	説明	必要なスキル
リポジトリのクローン作成	このソリューションの GitHub リポジトリをローカルシステムにクローンし、プロジェクトディレクトリに移動します。 `git clone https://github.com/aws-samples/sample-quicksight-visual-embedding.git cd sample-quicksight-visual-embedding` このリポジトリには、ソリューションをデプロイするために必要な CloudFormation テンプレートと React ソースコードが含まれています。	アプリ開発者

リポジトリのクローン作成

このソリューションの GitHub リポジトリをローカルシステムにクローンし、プロジェクトディレクトリに移動します。


git clone https://github.com/aws-samples/sample-quicksight-visual-embedding.git

cd sample-quicksight-visual-embedding

このリポジトリには、ソリューションをデプロイするために必要な CloudFormation テンプレートと React ソースコードが含まれています。

アプリ開発者

タスク	説明	必要なスキル
テンプレートのデプロイ	にサインイン AWS マネジメントコンソールし、 AWS CloudFormation コンソールを開きます。スタックページで、右上のスタックの作成を選択し、新しいリソース (標準) でを選択します。「スタックの作成」ページの「前提条件 – テンプレートを準備する」で、「既存のテンプレートを選択する」を選択します。 [テンプレートの指定] で、[テンプレートファイルのアップロード] を選択します。ローカル GitHub リポジトリから`template.yaml`ファイルをアップロードし、次へを選択します。スタックの詳細を指定ページで、スタック名 ( など`quicksight-embedding-stack`) を入力します。スタックオプションの設定ページで、デフォルト設定のままにして、IAM リソースの作成を承認するチェックボックスをオンにします。[次へ] を選択します。 [確認して作成] ページで、[送信] を選択します。詳細については、 CloudFormation ドキュメントの「スタックの作成と管理」を参照してください。	AWS 管理者
スタックの作成をモニタリングします。	ステータスが CREATE_COMPLETE になるまで、イベントタブでスタックをモニタリングします。	AWS 管理者
スタック出力を取得します。	デプロイが完了したら、出力タブを選択します。キー出力に注意してください: `ApiGatewayUrl`、`UserPoolId`、`UserPoolClientId`、`CloudFrontDomainName`、および `S3BucketName`。この情報は、以降のステップで使用します。	AWS 管理者

タスク説明必要なスキル

タスク	説明	必要なスキル
Quick Sight ビジュアル識別子を取得します。	Quick Sight ダッシュボードを開きます。ウェブアプリケーションに埋め込む予定の各ビジュアルのダッシュボード ID、シート ID、ビジュアル ID を書き留めます。	Quick Sight 管理者
ローカル React 環境を設定します。	ローカル React 環境をセットアップして AWS リソースにリンクするには、ローカル GitHub リポジトリの `my-app/`フォルダに `.env` ファイルを作成します。ファイルに以下を入力します。の AWS リージョン Amazon Cognito プール情報 ( CloudFormation スタック出力から) API Gateway エンドポイント ( CloudFormation スタック出力から) Quick Sight ビジュアル IDs (`DashboardId`、`SheetId`、`VisualId`) `.env` ファイルの例を次に示します。 `VITE_AWS_REGION=us-east-1 # Cognito Configuration (from CloudFormation outputs) VITE_USER_POOL_ID=us-east-1_xxxxxxxxx VITE_USER_POOL_WEB_CLIENT_ID=xxxxxxxxxxxxxxxxxxxxxxxxxx # API Configuration (from CloudFormation outputs) VITE_API_URL=https:/your-api-id.execute-api.us-east-1.amazonaws.com/prod # QuickSight Visual Configuration VITE_DASHBOARD_ID=your-dashboard-id VITE_SHEET_ID=your-sheet-id VITE_VISUAL_ID=your-visual-id`	アプリ開発者

Quick Sight ビジュアル識別子を取得します。

Quick Sight ダッシュボードを開きます。
ウェブアプリケーションに埋め込む予定の各ビジュアルのダッシュボード ID、シート ID、ビジュアル ID を書き留めます。

Quick Sight 管理者

ローカル React 環境を設定します。

ローカル React 環境をセットアップして AWS リソースにリンクするには、ローカル GitHub リポジトリの my-app/フォルダに .env ファイルを作成します。ファイルに以下を入力します。

の AWS リージョン
Amazon Cognito プール情報 ( CloudFormation スタック出力から)
API Gateway エンドポイント ( CloudFormation スタック出力から)
Quick Sight ビジュアル IDs (DashboardId、SheetId、VisualId)

.env ファイルの例を次に示します。


VITE_AWS_REGION=us-east-1

# Cognito Configuration (from CloudFormation outputs)
VITE_USER_POOL_ID=us-east-1_xxxxxxxxx VITE_USER_POOL_WEB_CLIENT_ID=xxxxxxxxxxxxxxxxxxxxxxxxxx

# API Configuration (from CloudFormation outputs)
VITE_API_URL=https:/your-api-id.execute-api.us-east-1.amazonaws.com/prod

# QuickSight Visual Configuration
VITE_DASHBOARD_ID=your-dashboard-id 
VITE_SHEET_ID=your-sheet-id 
VITE_VISUAL_ID=your-visual-id

アプリ開発者

タスク説明必要なスキル

タスク	説明	必要なスキル
Cognito でユーザーを作成または管理する	埋め込み Quick Sight ビジュアルへの認証されたユーザーアクセスを有効にするには、まず Amazon Cognito でユーザーを作成します。 Amazon Cognito コンソールで、ユーザープールを選択し、一致するプール `UserPoolId` ( CloudFormation 出力から) を選択します。プールにユーザーを追加します。2 つのオプションから選択できます。 Amazon Cognito で、E メールアドレスと一時パスワードを使用してユーザーを手動で作成します (詳細については、Amazon Cognito ドキュメントを参照してください）。 —または— `my-app/src/auth/AuthWrapper.jsx` ファイルでを設定して、UI `hideSignUp={false}`でセルフサインアップを有効にします。	AWS 管理者
Quick Sight ダッシュボードへのアクセスを提供する	Quick Sight ビジュアルへのアクセスを提供するには、認証されたユーザーにビューワーアクセス許可を付与します。 Quick Sight コンソールで、ダッシュボードを選択します。名前を選択して、共有するダッシュボードを選択します。ダッシュボードページの右上隅で、共有を選択します。共有パネルで、特定のユーザーと共有を選択します。新しいユーザーを追加するには、ユーザーの招待またはプラス (+) アイコンを選択します。 E メールフィールドに、受信者の完全な E メールアドレスを入力します。(この E メールは、ユーザーの Amazon Cognito ログインと正確に一致する必要があります) E メールフィールドの横にあるアクセス許可メニューから、ビューワーを選択します。招待を送信してアクセス権を付与するには、共有を選択します。各ユーザーには、ダッシュボードへのリンクが記載された E メールが送信されます。アクセス許可は、共有メニューからいつでも変更できます。詳細については、Amazon Quick Suite ドキュメントの「個々の Amazon Quick Sight ユーザーとグループに Amazon Quick Sight のダッシュボードへのアクセス権を付与する」を参照してください。	Quick Sight 管理者

Cognito でユーザーを作成または管理する

埋め込み Quick Sight ビジュアルへの認証されたユーザーアクセスを有効にするには、まず Amazon Cognito でユーザーを作成します。

Amazon Cognito コンソールで、ユーザープールを選択し、一致するプール UserPoolId ( CloudFormation 出力から) を選択します。
プールにユーザーを追加します。2 つのオプションから選択できます。
- Amazon Cognito で、E メールアドレスと一時パスワードを使用してユーザーを手動で作成します (詳細については、Amazon Cognito ドキュメントを参照してください）。
  —または—
- my-app/src/auth/AuthWrapper.jsx ファイルでを設定して、UI hideSignUp={false}でセルフサインアップを有効にします。

AWS 管理者

Quick Sight ダッシュボードへのアクセスを提供する

Quick Sight ビジュアルへのアクセスを提供するには、認証されたユーザーにビューワーアクセス許可を付与します。

Quick Sight コンソールで、ダッシュボードを選択します。
名前を選択して、共有するダッシュボードを選択します。
ダッシュボードページの右上隅で、共有を選択します。
共有パネルで、特定のユーザーと共有を選択します。
新しいユーザーを追加するには、ユーザーの招待またはプラス (+) アイコンを選択します。
E メールフィールドに、受信者の完全な E メールアドレスを入力します。(この E メールは、ユーザーの Amazon Cognito ログインと正確に一致する必要があります)
E メールフィールドの横にあるアクセス許可メニューから、ビューワーを選択します。
招待を送信してアクセス権を付与するには、共有を選択します。

各ユーザーには、ダッシュボードへのリンクが記載された E メールが送信されます。アクセス許可は、共有メニューからいつでも変更できます。

詳細については、Amazon Quick Suite ドキュメントの「個々の Amazon Quick Sight ユーザーとグループに Amazon Quick Sight のダッシュボードへのアクセス権を付与する」を参照してください。

Quick Sight 管理者

タスク説明必要なスキル

タスク	説明	必要なスキル
依存関係をインストールし、プロジェクトを構築します。	React アプリケーションディレクトリで、次のコマンドを実行して、最適化された本稼働ファイルを生成します。 `cd my-app npm install npm run build`	アプリ開発者
ビルドファイルを Amazon S3 にアップロードします。	ディレクトリからによってプロビジョニングされた S3 バケット`my-app/dist/`にすべてのファイルをアップロードします CloudFormation (フォルダ自体はアップロードしないでください）。	アプリ開発者
CloudFront の無効化を作成します。	CloudFront コンソールで、デプロイ後にキャッシュされたコンテンツ`/*`を更新するパスの無効化を作成します。手順については、CloudFront ドキュメントの「ファイルの無効化」を参照してください。	AWS 管理者

依存関係をインストールし、プロジェクトを構築します。

React アプリケーションディレクトリで、次のコマンドを実行して、最適化された本稼働ファイルを生成します。


cd my-app
npm install
npm run build

アプリ開発者

ビルドファイルを Amazon S3 にアップロードします。

ディレクトリからによってプロビジョニングされた S3 バケットmy-app/dist/にすべてのファイルをアップロードします CloudFormation (フォルダ自体はアップロードしないでください）。

アプリ開発者

CloudFront の無効化を作成します。

CloudFront コンソールで、デプロイ後にキャッシュされたコンテンツ/*を更新するパスの無効化を作成します。手順については、CloudFront ドキュメントの「ファイルの無効化」を参照してください。

AWS 管理者

タスク	説明	必要なスキル
CloudFront ドメインを Quick Sight 許可リストに追加します。	CloudFront ドメインで Quick Sight ビジュアルを安全に埋め込むには: クイックサイトコンソールで、クイックサイト、ドメイン、埋め込みの管理を選択します。 CloudFront ドメインをドメインボックスに追加します (例: `https://d1234567890abc.cloudfront.net`)。 [ドメインを追加する] を選択します。	Quick Sight 管理者

タスク	説明	必要なスキル
React アプリケーションを開きます。	CloudFront ドメイン ( CloudFormation 出力から) を使用して、デプロイされた React ウェブアプリケーションをブラウザで開きます。	アプリ所有者
認証を確認します。	Amazon Cognito 認証情報を使用してアプリケーションにサインインし、API Gateway を介して認証フローと JWT 検証を検証します。	アプリ所有者
埋め込みビジュアルを確認します。	Quick Sight ビジュアルが、ユーザー固有のアクセス許可に基づいてアプリケーション内で正しくロードされていることを確認します。	アプリ所有者
API と Lambda の接続を検証します。	アプリケーションが `/get-embed-url` API を正常に呼び出し、エラーなしで有効な Quick Sight 埋め込み URLs を取得できることを確認します。	アプリ所有者

タスク	説明	必要なスキル
CloudWatch を使用してモニタリングします。	AWS オブザーバビリティツールを使用してアプリケーションをモニタリングし、本番環境で安全でスケーラブルなパフォーマンスを維持できます。 CloudWatch で Lambda ログ、API Gateway メトリクス、Amazon Cognito 認証イベントを確認して、アプリケーションのヘルスを確認し、異常を検出します。	AWS 管理者
ログ AWS WAF と CloudFront ログを追跡します。	AWS WAF ログにブロックされたリクエストや疑わしいリクエストがないか、CloudFront アクセスログにパフォーマンスとキャッシュメトリクスがないかを検査します。	AWS 管理者

タスク

説明

必要なスキル

CloudWatch を使用してモニタリングします。

AWS オブザーバビリティツールを使用してアプリケーションをモニタリングし、本番環境で安全でスケーラブルなパフォーマンスを維持できます。

CloudWatch で Lambda ログ、API Gateway メトリクス、Amazon Cognito 認証イベントを確認して、アプリケーションのヘルスを確認し、異常を検出します。

AWS 管理者

ログ AWS WAF と CloudFront ログを追跡します。

AWS WAF ログにブロックされたリクエストや疑わしいリクエストがないか、CloudFront アクセスログにパフォーマンスとキャッシュメトリクスがないかを検査します。

AWS 管理者

トラブルシューティング

問題	ソリューション
「ドメインが許可されません」エラー	クイックサイトコンソールで、クイックサイト、ドメイン、埋め込みの管理を選択します。 CloudFront ドメイン ( など`https://d1234567890abc.cloudfront.net`) を追加します。設定を保存し、アプリケーションを再ロードします。
認証エラー	考えられる原因: `.env` ファイル内の Amazon Cognito ユーザープール ID またはアプリケーションクライアント ID が正しくありません。 Amazon Cognito ユーザープールでユーザーが確認されませんでした。 API リクエストの JWT トークンが無効または欠落しています。解決方法: `.env` ファイル内の Amazon Cognito 設定値を確認します。 Amazon Cognito コンソールで、ユーザータブをチェックして、ユーザーがアクティブであることを確認します。認可ヘッダーに有効な JWT トークンが含まれていることを確認します。 API Gateway コンソールで、オーソライザーをチェックして、API Gateway が認証に Amazon Cognito オーソライザーを使用していることを確認します。
API Gateway エラー	考えられる原因: API Gateway で Amazon Cognito オーソライザーがないか、正しく設定されていません。 Quick Sight API を呼び出すための Lambda アクセス許可が不十分です。出力`.env`と CloudFormation 出力の API URL が一致しません。解決方法: API Gateway 呼び出し URL が `.env` ファイルにあることを再確認します。 API Gateway コンソールで、オーソライザーをチェックして Amazon Cognito のセットアップを確認します。で必要な IAM ポリシーを Lambda 実行ロール`quicksight:GenerateEmbedUrlForRegisteredUser`にアタッチします。詳細な API またはアクセス許可エラーについては、CloudWatch ログを確認してください。詳細については、API Gateway のドキュメントを参照してください。
Quick Sight ビジュアルはロードされません	考えられる原因: 環境設定の Quick Sight ダッシュボード ID、シート ID、またはビジュアル ID が正しくありません。 Quick Sight ユーザーがビジュアルまたはダッシュボードにアクセスできない。 API Gateway にクロスオリジンリソース共有 (CORS) 設定がありません。解決方法: ダッシュボードビジュアルの右上隅にある 3 つのドットメニューから Quick Sight IDs を確認します。 Quick Sight ユーザーに共有ダッシュボードのビューワーロールがあることを確認します。 API Gateway で CORS を有効にし、API を再デプロイします。詳細については、API Gateway のドキュメントを参照してください。ブラウザコンソールで CORS にネットワーク関連のエラーがないか検査します。
「ユーザーにアクセスできません」エラー	考えられる原因: ユーザーの E メールは Quick Sight ダッシュボードと共有されませんでした。 Quick Sight のユーザーロールまたはアクセス許可が正しくありません。解決策: Quick Sight コンソールでダッシュボードを開き、共有、ダッシュボードの共有を選択します。ユーザーの E メールアドレスを追加します (Amazon Cognito ログイン E メールと一致する）。ビューワーアクセス許可ロールを割り当てます。アクセス許可を更新するには、ログアウトして再度サインインするようにユーザーに依頼します。