翻訳は機械翻訳により提供されています。提供された翻訳内容と英語版の間で齟齬、不一致または矛盾がある場合、英語版が優先します。

# Amazon Cognito と IaC オートメーションを使用して Amazon Quick Sight ビジュアルコンポーネントをウェブアプリケーションに埋め込む
<a name="embed-quick-sight-visual-components-into-web-apps-cognito-iac"></a>

*Ishita Gupta、Saurabh Singh、Srishti Wadhwa、Amazon Web Services*

## 概要
<a name="embed-quick-sight-visual-components-into-web-apps-cognito-iac-summary"></a>

このパターンは、登録済みユーザー埋め込みと合理化された 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) 開発者** 
+ インタラクティブなクイックサイトチャートを内部ツールに埋め込む**エンタープライズチーム** 

## 前提条件と制限
<a name="embed-quick-sight-visual-components-into-web-apps-cognito-iac-prereqs"></a>

**前提条件**

このパターンを正常に実装するには、以下が設定されていることを確認してください。
+ **アクティブ AWS アカウント** – CloudFormation スタックをデプロイし、Lambda、API Gateway、Amazon Cognito、CloudFront、Amazon S3 リソースを作成するアクセス許可 AWS アカウント を持つ 。
+ **Amazon Quick Sight アカウント** – ビジュアルを含むダッシュボードが少なくとも 1 つあるアクティブな Quick Sight アカウント。セットアップ手順については、[「Amazon Quick ドキュメント」の「チュートリアル: サンプルデータを使用して Amazon Quick Sight ダッシュボードを作成する](https://docs.aws.amazon.com/quicksuite/latest/userguide/example-analysis.html)」を参照してください。
+ 以下で構成される**開発環境**。
  + 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 のサービス by Region](https://aws.amazon.com/about-aws/global-infrastructure/regional-product-services/)」をご確認ください。

**製品バージョン**
+ [Quick Sight Embedding SDK](https://www.npmjs.com/package/amazon-quicksight-embedding-sdk) バージョン 2.10.1
+ [React](https://www.npmjs.com/package/react) バージョン 19.1.1
+ このソリューションで使用される最新の React および Vite バージョンとの互換性を確保するための [Node.js](https://nodejs.org/en/download) バージョン 16 以降

## アーキテクチャ
<a name="embed-quick-sight-visual-components-into-web-apps-cognito-iac-architecture"></a>

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

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

![\[Quick Sight ビジュアルを React アプリケーションに埋め込むためのアーキテクチャとワークフロー。\]](http://docs.aws.amazon.com/ja_jp/prescriptive-guidance/latest/patterns/images/pattern-img/75ad12b1-caaa-4532-b709-8f3eaf3f9cc0/images/d0905f61-9055-49cf-887d-f46f5ca6c871.png)


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

1. **ユーザーはアプリケーションにアクセスします**。ユーザーはブラウザを使用して React ウェブアプリケーションを開きます。リクエストは CloudFront ディストリビューションにルーティングされ、アプリケーションのコンテンツ配信ネットワークとして機能します。

1. は**AWS WAF 悪意のあるリクエストをフィルタリング**します。** **リクエストが CloudFront に到達する前に、トラフィックを検査し、セキュリティルールに基づいて悪意のあるリクエストや疑わしいリクエストをブロック AWS WAF AWS WAF します。

1. **Amazon S3 は静的ファイル**を提供します。リクエストがクリーンの場合、CloudFront はオリジンアクセスコントロール (OAC) を使用してプライベート S3 バケットから静的フロントエンドアセット (HTML、JS、CSS) を取得し、ブラウザに配信します。

1. **ユーザーがサインインします**。アプリケーションがロードされると、ユーザーは Amazon Cognito を通じてサインインします。Amazon Cognito はユーザーを認証し、承認された API アクセス用の安全な JSON ウェブトークン (JWT) を返します。

1. **アプリケーションは API リクエストを行います**。ログイン後、React アプリケーションは API Gateway 上の`/get-embed-url`エンドポイントに安全な呼び出しを行い、認証のためにリクエストヘッダーに JWT トークンを渡します。

1. **トークンが検証**されます。API Gateway は、Amazon Cognito オーソライザーを使用してトークンを検証します。トークンが有効な場合、リクエストは続行されます。それ以外の場合は、401 (未承認) レスポンスで拒否されます。

1. **リクエストは処理のために Lambda に送信されます**。その後、検証されたリクエストはバックエンドの Lambda 関数に転送されます。この関数は、リクエストされた Quick Sight ビジュアルの埋め込み URL の生成を担当します。

1. **Lambda は Quick Sight から埋め込み URL を生成します**。IAM は、適切なアクセス許可を持つ IAM ロールを使用して Quick Sight `GenerateEmbedUrlForRegisteredUser` API を呼び出し、安全でユーザースコープのビジュアル URL を生成します。

1. **Lambda は API Gateway に埋め込み URL を返します**。Lambda は、生成された埋め込み URL を JSON レスポンスの一部として API Gateway に送信します。その後、このレスポンスはフロントエンドに配信される準備が整います。

1. **埋め込み URL がブラウザに送信されます**。埋め込み URL は API レスポンスとしてブラウザに返されます。

1. **ビジュアルがユーザーに表示されます**。** **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 は受信リクエストに合わせてスケーリングします。

## ツール
<a name="embed-quick-sight-visual-components-into-web-apps-cognito-iac-tools"></a>

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

**開発ツール**
+ [React JS](https://react.dev/) は、このパターンがウェブアプリケーションを構築し、埋め込み Quick Sight ビジュアルを統合するために使用されるフロントエンドフレームワークです。
+ [Vite](https://vite.dev/) は、React アプリケーションの迅速な開発と最適化された本番稼働用ビルドに使用されるビルドツールです。
+ [Quick Sight Embedding SDK](https://www.npmjs.com/package/amazon-quicksight-embedding-sdk/v/2.10.1) は、Quick Sight ビジュアルを React アプリケーションに埋め込むことを容易にし、アプリケーションとビジュアル間のシームレスなやり取りを可能にします。

**コードリポジトリ**

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

## ベストプラクティス
<a name="embed-quick-sight-visual-components-into-web-apps-cognito-iac-best-practices"></a>

このパターンでは、次のセキュリティのベストプラクティスが自動的に実装されます。
+ 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](https://aws.amazon.com/blogs/compute/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) などのコンプライアンスフレームワークとの整合性を確保するため、定期的なセキュリティ評価を実施します。

## エピック
<a name="embed-quick-sight-visual-components-into-web-apps-cognito-iac-epics"></a>

### 環境の準備
<a name="prepare-the-environment"></a>


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

### CloudFormation スタックをデプロイする
<a name="deploy-the-cfn-stack"></a>


| タスク | 説明 | 必要なスキル | 
| --- | --- | --- | 
| テンプレートのデプロイ | [\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/ja_jp/prescriptive-guidance/latest/patterns/embed-quick-sight-visual-components-into-web-apps-cognito-iac.html) 詳細については、 CloudFormation ドキュメントの[「スタックの作成と管理](https://docs.aws.amazon.com/AWSCloudFormation/latest/UserGuide/stacks.html)」を参照してください。 | AWS 管理者 | 
| スタックの作成をモニタリングします。 | ステータスが **CREATE\$1COMPLETE** になるまで、**イベント**タブでスタックをモニタリングします。 | AWS 管理者 | 
| スタック出力を取得します。 | [\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/ja_jp/prescriptive-guidance/latest/patterns/embed-quick-sight-visual-components-into-web-apps-cognito-iac.html) | AWS 管理者 | 

### フロントエンド環境を設定する
<a name="configure-the-frontend-environment"></a>


| タスク | 説明 | 必要なスキル | 
| --- | --- | --- | 
| Quick Sight ビジュアル識別子を取得します。 | [\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/ja_jp/prescriptive-guidance/latest/patterns/embed-quick-sight-visual-components-into-web-apps-cognito-iac.html) | Quick Sight 管理者 | 
| ローカル React 環境を設定します。 | ローカル React 環境をセットアップして AWS リソースにリンクするには、ローカル GitHub リポジトリの `my-app/`フォルダに `.env` ファイルを作成します。ファイルに以下を入力します。[\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/ja_jp/prescriptive-guidance/latest/patterns/embed-quick-sight-visual-components-into-web-apps-cognito-iac.html)`.env` ファイルの例を次に示します。<pre>VITE_AWS_REGION=us-east-1<br /><br /># Cognito Configuration (from CloudFormation outputs)<br />VITE_USER_POOL_ID=us-east-1_xxxxxxxxx VITE_USER_POOL_WEB_CLIENT_ID=xxxxxxxxxxxxxxxxxxxxxxxxxx<br /><br /># API Configuration (from CloudFormation outputs)<br />VITE_API_URL=https:/your-api-id.execute-api.us-east-1.amazonaws.com/prod<br /><br /># QuickSight Visual Configuration<br />VITE_DASHBOARD_ID=your-dashboard-id <br />VITE_SHEET_ID=your-sheet-id <br />VITE_VISUAL_ID=your-visual-id</pre> | アプリ開発者 | 

### ユーザー認証を設定する
<a name="set-up-user-authentication"></a>


| タスク | 説明 | 必要なスキル | 
| --- | --- | --- | 
| Cognito でユーザーを作成または管理する | 埋め込み Quick Sight ビジュアルへの認証されたユーザーアクセスを有効にするには、まず Amazon Cognito でユーザーを作成します。[\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/ja_jp/prescriptive-guidance/latest/patterns/embed-quick-sight-visual-components-into-web-apps-cognito-iac.html) | AWS 管理者 | 
| Quick Sight ダッシュボードへのアクセスを提供する | Quick Sight ビジュアルへのアクセスを提供するには、認証されたユーザーにビューワーアクセス許可を付与します。[\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/ja_jp/prescriptive-guidance/latest/patterns/embed-quick-sight-visual-components-into-web-apps-cognito-iac.html)各ユーザーには、ダッシュボードへのリンクが記載された E メールが送信されます。アクセス許可は、**共有**メニューからいつでも変更できます。詳細については、[Amazon Quick ドキュメントの「個々の Amazon Quick Sight ユーザーとグループに Amazon Quick Sight のダッシュボードへのアクセス権を付与](https://docs.aws.amazon.com/quicksuite/latest/userguide/share-a-dashboard-grant-access-users.html)する」を参照してください。 | Quick Sight 管理者 | 

### React フロントエンドを構築およびデプロイする
<a name="build-and-deploy-the-react-frontend"></a>


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

### Quick Sight 許可リストを設定する
<a name="configure-the-qsight-allowlist"></a>


| タスク | 説明 | 必要なスキル | 
| --- | --- | --- | 
| CloudFront ドメインを Quick Sight 許可リストに追加します。 | CloudFront ドメインで Quick Sight ビジュアルを安全に埋め込むには:[\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/ja_jp/prescriptive-guidance/latest/patterns/embed-quick-sight-visual-components-into-web-apps-cognito-iac.html) | Quick Sight 管理者 | 

### アプリケーションにアクセスして機能を検証する
<a name="access-the-application-and-verify-functionality"></a>


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

### アプリケーションのモニタリングと保守
<a name="monitor-and-maintain-the-application"></a>


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

## トラブルシューティング
<a name="embed-quick-sight-visual-components-into-web-apps-cognito-iac-troubleshooting"></a>


| 問題 | ソリューション | 
| --- | --- | 
| 「ドメインが許可されません」エラー | [\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/ja_jp/prescriptive-guidance/latest/patterns/embed-quick-sight-visual-components-into-web-apps-cognito-iac.html) | 
| 認証エラー | 考えられる原因:[\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/ja_jp/prescriptive-guidance/latest/patterns/embed-quick-sight-visual-components-into-web-apps-cognito-iac.html)解決方法:[\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/ja_jp/prescriptive-guidance/latest/patterns/embed-quick-sight-visual-components-into-web-apps-cognito-iac.html) | 
| API Gateway エラー | 考えられる原因:[\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/ja_jp/prescriptive-guidance/latest/patterns/embed-quick-sight-visual-components-into-web-apps-cognito-iac.html)解決方法:[\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/ja_jp/prescriptive-guidance/latest/patterns/embed-quick-sight-visual-components-into-web-apps-cognito-iac.html) | 
| Quick Sight ビジュアルはロードされません | 考えられる原因:[\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/ja_jp/prescriptive-guidance/latest/patterns/embed-quick-sight-visual-components-into-web-apps-cognito-iac.html)解決方法:[\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/ja_jp/prescriptive-guidance/latest/patterns/embed-quick-sight-visual-components-into-web-apps-cognito-iac.html) | 
| 「ユーザーにアクセスできません」エラー | 考えられる原因:[\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/ja_jp/prescriptive-guidance/latest/patterns/embed-quick-sight-visual-components-into-web-apps-cognito-iac.html)解決策:[\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/ja_jp/prescriptive-guidance/latest/patterns/embed-quick-sight-visual-components-into-web-apps-cognito-iac.html) | 

## 関連リソース
<a name="embed-quick-sight-visual-components-into-web-apps-cognito-iac-resources"></a>

** AWS ドキュメント**
+ [Amazon Quick サブスクリプションにサインアップする](https://docs.aws.amazon.com/quicksight/latest/user/signing-up.html)
+ [Amazon Quick Sight の埋め込み分析](https://docs.aws.amazon.com/quicksuite/latest/userguide/embedded-analytics.html)
+ [Quick Sight API リファレンス – GenerateEmbedUrlForRegisteredUser](https://docs.aws.amazon.com/quicksight/latest/APIReference/API_GenerateEmbedUrlForRegisteredUser.html)
+ [Amazon Cognito ユーザープール](https://docs.aws.amazon.com/cognito/latest/developerguide/cognito-user-pools.html)
+ [AWS Lambda デベロッパーガイド](https://docs.aws.amazon.com/lambda/latest/dg/welcome.html)
+ [Amazon API Gateway デベロッパーガイド](https://docs.aws.amazon.com/apigateway/latest/developerguide/welcome.html)
+ [CloudWatch での基本的なモニタリングと詳細なモニタリング](https://docs.aws.amazon.com/AmazonCloudWatch/latest/monitoring/cloudwatch-metrics-basic-detailed.html)
+ [AWS CloudFormation ユーザーガイド](https://docs.aws.amazon.com/AWSCloudFormation/latest/UserGuide/Welcome.html)
+ [Amazon CloudFront 開発者ガイド](https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/Introduction.html)
+ [AWS WAF デベロッパーガイド](https://docs.aws.amazon.com/waf/latest/developerguide/waf-chapter.html)

**チュートリアルと動画**
+ [Amazon Quick Sight の埋め込み分析](https://docs.aws.amazon.com/quicksight/latest/user/embedded-analytics.html)
+ [Amazon Quick Sight YouTube チュートリアル](https://www.youtube.com/results?search_query=amazon+quicksight+embedding)