Amazon QuickSight ダッシュボードをローカルの Angular アプリケーションに埋め込みます。

ショーン・グリフィン (AWS) とミレーナ・ゴダウ (AWS) が作成

概要

このパターンは、Amazon QuickSight ダッシュボードをローカルでホストされている Angular アプリケーションに埋め込んで開発またはテストするためのガイダンスを提供します。QuickSight の 「埋め込み分析特徴量」は、この機能をネイティブではサポートしていません。既存のダッシュボードと Angular の知識を備えた QuickSight アカウントが必要です。

埋め込まれた QuickSight ダッシュボードを使用する場合、通常、ダッシュボードを表示するには Web サーバー上でアプリケーションをホストする必要があります。これにより、変更内容を Web サーバーに継続的にプッシュして、すべてが正しく動作していることを確認する必要があるため、開発がより困難になります。このパターンは、ローカルでホストされたサーバーを稼働させ、QuickSight の埋め込み分析を使用して開発プロセスをより簡単かつ合理化する方法を示しています。

前提条件と制限

前提条件

• 「Amazon Web Services (AWS) (AWS) アカウント」

• 「セッションキャパシティ料金が設定されたアクティブな QuickSight アカウント」

• 「QuickSight 埋め込み SDK がインストールされました」

• 「Angular CLI がインストールされました」

• 「アンギュラーに精通していること」

• 「mkcert がインストールされました」

機能制限

• このパターンは、ANONYMOUS (公開アクセス可能な) 認証タイプを使用して QuickSight ダッシュボードを埋め込む際のガイダンスを提供します。埋め込みダッシュボードで AWS Identity and Access Management (IAM) または QuickSight 認証を使用している場合は、提供されたコードは適用されません。ただし、「エピック」セクションの Angular アプリケーションをホストする手順は引き続き有効です。

• GetDashboardEmbedUrl API ANONYMOUS をアイデンティティタイプで使用するには、QuickSight キャパシティ料金プランが必要です。

バージョン

• 「アンギュラー CLI バージョン 13.3.4」

• 「QuickSight 埋め込み SDK バージョン 2.3.1」

アーキテクチャ

テクノロジースタック

• アンギュラフロントエンド

• AWS Lambda と Amazon API Gateway バックエンド

アーキテクチャ

このアーキテクチャでは、API ゲートウェイ の HTTP API により、ローカルの Angular アプリケーションが Lambda 関数を呼び出すことができます。Lambda 関数は QuickSight ダッシュボードを埋め込むための URL を返します。

自動化とスケール

AWS CloudFormation または AWS サーバーレスアプリケーションモデル (AWS SAM) を使用してバックエンドデプロイを自動化できます。

ツール

ツール

• 「Angular CLI」は、Angular アプリケーションをコマンドシェルから直接初期化、開発、スキャフォールド、保守するために使用するコマンドラインインターフェイスツールです。

• 「QuickSight 埋め込み SDK」は、QuickSight ダッシュボードを HTML に埋め込むために使用されます。

• 「mkcert」は、ローカルで信頼される開発用証明書を作成するためのシンプルなツールです。設定は不要です。QuickSight ではダッシュボードの埋め込みに HTTPS リクエストしか許可されないため、mkcert が必要です。

AWS サービス

• Amazon API Gateway は、あらゆる規模の REST、HTTP、WebSocket API を作成、公開、管理、モニタリング、保護するための AWS のサービスです。 

• 「AWS Lambda」 – AWS Lambda はサーバーのプロビジョニングや管理を行わずにコードの実行を支援できるコンピューティングサービスです。Lambda は必要に応じてコードを実行し、1 日あたり数個のリクエストから 1 秒あたり数千のリクエストまで自動的にスケールします。課金は実際に消費したコンピューティング時間に対してのみ発生します。コードが実行されていない場合、料金は発生しません。 

• 「Amazon QuickSight」は、ビジュアルの構築、アドホック分析の実行、データからのビジネス上の洞察の取得に使用できるビジネス分析サービスです。

エピック

埋め込み URL を生成

タスク	説明	必要なスキル
EmbedURL ポリシーを作成します。	以下のプロパティを含む QuickSightGetDashboardEmbedUrl という名前の IAM ポリシーを作成します。 { "Version": "2012-10-17", "Statement": [ { "Effect": "Allow", "Action": [ "quicksight:GetDashboardEmbedUrl", "quickSight:GetAnonymousUserEmbedUrl" ], "Resource": "*" } ] }	AWS 管理者
Lambda 関数を作成します。	1. Lambda コンソールで 「関数ページ」を開きます。 2. [関数の作成] を選択します。 3. Author from scratch (製作者を最初から) を選択します。 4. [関数名] に「get-qs-embed-url」と入力します。 5. [Runtime] (ランタイム) では、[Python 3.9] を選択します。 6. [関数の作成] を選択します。 7. コードタブでは、下記のコードを Lambda 関数にコピーします。 import json import boto3 from botocore.exceptions import ClientError import time from os import environ qs = boto3.client('quicksight',region_name='us-east-1') sts = boto3.client('sts') ACCOUNT_ID = boto3.client('sts').get_caller_identity().get('Account') DASHBOARD_ID = environ['DASHBOARD_ID'] def getDashboardURL(accountId, dashboardId, quicksightNamespace, resetDisabled, undoRedoDisabled): try: response = qs.get_dashboard_embed_url( AwsAccountId = accountId, DashboardId = dashboardId, Namespace = quicksightNamespace, IdentityType = 'ANONYMOUS', SessionLifetimeInMinutes = 600, UndoRedoDisabled = undoRedoDisabled, ResetDisabled = resetDisabled ) return response except ClientError as e: print(e) return "Error generating embeddedURL: " + str(e) def lambda_handler(event, context): url = getDashboardURL(ACCOUNT_ID, DASHBOARD_ID, "default", True, True)['EmbedUrl'] return { 'statusCode': 200, 'url': url } 8. [デプロイ] を選択します。	アプリ開発者
ダッシュボード ID を環境変数として追加します。	Lambda 関数に環境変数として、DASHBOARD_ID を追加します。 設定タブで、環境変数、編集、環境変数の追加を選択します。 キー DASHBOARD_ID で環境変数を追加します。 DASHBOARD_ID の値を取得するには、QuickSight のダッシュボードに移動し、ブラウザの URL の末尾にある UUID をコピーします。たとえば、URL が https://us-east-1.quicksight.aws.amazon.com/sn/dashboards/<dashboard-id> の場合、URL <dashboard-id> の一部をキー値として指定します。 [Save] を選択します。	アプリ開発者
Lambda 関数のアクセス許可を追加します。	Lambda 関数の実行ロールを変更し、それに QuickSightGetDashboardEmbedURL ポリシーを追加します。 設定タブで権限を選択し、ロール名を選択します。 ポリシーをアタッチを選択し、QuicksightGetDashboardEmbedUrl を検索してチェックボックスを選択し、ポリシーをアタッチを選択します。	アプリ開発者
Lambda 関数をテストします。	テストイベントを作成して実行します。この関数はテストイベントのデータを使用しないため、「Hello World」テンプレートを使用できます。 [テスト] タブを選択します。 テストイベントに名前を付け、Save を選択します。 テストを選択して、Lambda 関数をテストします。レスポンスは次のようになります。 { "statusCode": 200, "url": "\"https://us-east-1.quicksight.aws.amazon.com/embed/f1acc0786687783b9a4543a05ba929b3a/dashboards/... } 注記 「前提条件と制限」セクションで説明したように、QuickSight アカウントはセッションキャパシティ料金プランの対象である必要があります。そうしないと、エラーメッセージが表示されます。	アプリ開発者
API ゲートウェイで API を作成します。	「API ゲートウェイコンソール」で API の作成を選択し、REST API、ビルドの順に選択します。 API 名では、qs-embed-api を入力します。 API の作成 を選択します。 アクションでメソッドの作成を選択します。 GET を選択し、チェックマークを選択して確定します。 統合タイプとして、Lambda 関数を選択します。 Lambda 関数の場合、get-qs-embed-url を入力します。 [Save] を選択します。 Lambda 関数に権限を追加するダイアログボックスで、 OK を選択します。 CORS を有効にします。 アクションでCORS を有効にするを選択します。 Access-Control-Allow-Origin では、'https://my-qs-app.net:4200' を入力します。 CORS を有効にして既存の CORS ヘッダーを置換を選択して、確認します。 API をデプロイします。 [Actions] (アクション) で [Deploy API] (API のデプロイ) を選択します。 [デプロイされるステージ] で、[新しいステージ] を選択します。 [Stage name (ステージ名)] に dev と入力します。 デプロイを選択します。 呼び出し URL をコピーします。 注記 my-qs-app.net は任意のドメインにすることができます。別のドメイン名を使用する場合は、ステップ 3 で Access-Control-Allow-Origin 情報を更新し、my-qs-app.net 以降の手順で変更してください。	アプリ開発者

埋め込み URL を生成

タスク	説明	必要なスキル
EmbedURL ポリシーを作成します。	以下のプロパティを含む QuickSightGetDashboardEmbedUrl という名前の IAM ポリシーを作成します。 { "Version": "2012-10-17", "Statement": [ { "Effect": "Allow", "Action": [ "quicksight:GetDashboardEmbedUrl", "quickSight:GetAnonymousUserEmbedUrl" ], "Resource": "*" } ] }	AWS 管理者
Lambda 関数を作成します。	1. Lambda コンソールで 「関数ページ」を開きます。 2. [関数の作成] を選択します。 3. Author from scratch (製作者を最初から) を選択します。 4. [関数名] に「get-qs-embed-url」と入力します。 5. [Runtime] (ランタイム) では、[Python 3.9] を選択します。 6. [関数の作成] を選択します。 7. コードタブでは、下記のコードを Lambda 関数にコピーします。 import json import boto3 from botocore.exceptions import ClientError import time from os import environ qs = boto3.client('quicksight',region_name='us-east-1') sts = boto3.client('sts') ACCOUNT_ID = boto3.client('sts').get_caller_identity().get('Account') DASHBOARD_ID = environ['DASHBOARD_ID'] def getDashboardURL(accountId, dashboardId, quicksightNamespace, resetDisabled, undoRedoDisabled): try: response = qs.get_dashboard_embed_url( AwsAccountId = accountId, DashboardId = dashboardId, Namespace = quicksightNamespace, IdentityType = 'ANONYMOUS', SessionLifetimeInMinutes = 600, UndoRedoDisabled = undoRedoDisabled, ResetDisabled = resetDisabled ) return response except ClientError as e: print(e) return "Error generating embeddedURL: " + str(e) def lambda_handler(event, context): url = getDashboardURL(ACCOUNT_ID, DASHBOARD_ID, "default", True, True)['EmbedUrl'] return { 'statusCode': 200, 'url': url } 8. [デプロイ] を選択します。	アプリ開発者
ダッシュボード ID を環境変数として追加します。	Lambda 関数に環境変数として、DASHBOARD_ID を追加します。 設定タブで、環境変数、編集、環境変数の追加を選択します。 キー DASHBOARD_ID で環境変数を追加します。 DASHBOARD_ID の値を取得するには、QuickSight のダッシュボードに移動し、ブラウザの URL の末尾にある UUID をコピーします。たとえば、URL が https://us-east-1.quicksight.aws.amazon.com/sn/dashboards/<dashboard-id> の場合、URL <dashboard-id> の一部をキー値として指定します。 [Save] を選択します。	アプリ開発者
Lambda 関数のアクセス許可を追加します。	Lambda 関数の実行ロールを変更し、それに QuickSightGetDashboardEmbedURL ポリシーを追加します。 設定タブで権限を選択し、ロール名を選択します。 ポリシーをアタッチを選択し、QuicksightGetDashboardEmbedUrl を検索してチェックボックスを選択し、ポリシーをアタッチを選択します。	アプリ開発者
Lambda 関数をテストします。	テストイベントを作成して実行します。この関数はテストイベントのデータを使用しないため、「Hello World」テンプレートを使用できます。 [テスト] タブを選択します。 テストイベントに名前を付け、Save を選択します。 テストを選択して、Lambda 関数をテストします。レスポンスは次のようになります。 { "statusCode": 200, "url": "\"https://us-east-1.quicksight.aws.amazon.com/embed/f1acc0786687783b9a4543a05ba929b3a/dashboards/... } 注記 「前提条件と制限」セクションで説明したように、QuickSight アカウントはセッションキャパシティ料金プランの対象である必要があります。そうしないと、エラーメッセージが表示されます。	アプリ開発者
API ゲートウェイで API を作成します。	「API ゲートウェイコンソール」で API の作成を選択し、REST API、ビルドの順に選択します。 API 名では、qs-embed-api を入力します。 API の作成 を選択します。 アクションでメソッドの作成を選択します。 GET を選択し、チェックマークを選択して確定します。 統合タイプとして、Lambda 関数を選択します。 Lambda 関数の場合、get-qs-embed-url を入力します。 [Save] を選択します。 Lambda 関数に権限を追加するダイアログボックスで、 OK を選択します。 CORS を有効にします。 アクションでCORS を有効にするを選択します。 Access-Control-Allow-Origin では、'https://my-qs-app.net:4200' を入力します。 CORS を有効にして既存の CORS ヘッダーを置換を選択して、確認します。 API をデプロイします。 [Actions] (アクション) で [Deploy API] (API のデプロイ) を選択します。 [デプロイされるステージ] で、[新しいステージ] を選択します。 [Stage name (ステージ名)] に dev と入力します。 デプロイを選択します。 呼び出し URL をコピーします。 注記 my-qs-app.net は任意のドメインにすることができます。別のドメイン名を使用する場合は、ステップ 3 で Access-Control-Allow-Origin 情報を更新し、my-qs-app.net 以降の手順で変更してください。	アプリ開発者

Angular アプリケーションを作成します。

タスク	説明	必要なスキル
Angular CLI を使用してアプリケーションを作成します。	アプリケーションの作成 ng new quicksight-app --defaults cd quicksight-app/src/app ダッシュボードコンポーネントを作成します。 ng g c dashboard src/environments/environment.ts ファイルに移動し、apiUrl: '<Invoke URL from previous steps>' 環境オブジェクトに追加します。 export const environment = { production: false, apiUrl: '<Invoke URL from previous steps>', };	アプリ開発者
QuickSight 埋め込み SDK を追加します。	プロジェクトのルートフォルダで次のコマンドを実行して QuickSight Embedding SDK をインストールします。 npm i amazon-quicksight-embedding-sdk src フォルダで、新しい decl.d.ts ファイルを次の内容でを作成します。 declare module 'amazon-quicksight-embedding-sdk';	アプリ開発者
ダッシュボード.component.ts ファイルにコードを追加します。	import { Component, OnInit } from '@angular/core'; import { HttpClient } from '@angular/common/http'; import * as QuicksightEmbedding from 'amazon-quicksight-embedding-sdk'; import { environment } from "../../environments/environment"; import { take } from 'rxjs'; import { EmbeddingContext } from 'amazon-quicksight-embedding-sdk/dist/types'; import { createEmbeddingContext } from 'amazon-quicksight-embedding-sdk'; @Component({ selector: 'app-dashboard', templateUrl: './dashboard.component.html', styleUrls: ['./dashboard.component.scss'] }) export class DashboardComponent implements OnInit { constructor(private http: HttpClient) { } loadingError = false; dashboard: any; ngOnInit() { this.GetDashboardURL(); } public GetDashboardURL() { this.http.get(environment.apiUrl) .pipe( take(1), ) .subscribe((data: any) => this.Dashboard(data.url)); } public async Dashboard(embeddedURL: any) { var containerDiv = document.getElementById("dashboardContainer") || ''; const frameOptions = { url: embeddedURL, container: containerDiv, height: "850px", width: "100%", resizeHeightOnSizeChangedEvent: true, } const embeddingContext: EmbeddingContext = await createEmbeddingContext(); this.dashboard = embeddingContext.embedDashboard(frameOptions); } }	アプリ開発者
ダッシュボード.component.html ファイルにコードを追加します。	以下のコードを src/app/dashboard/dashboard.component.html ファイルに追加します。 <div id="dashboardContainer"></div>	アプリ開発者
app.component.html ファイルを変更して、ダッシュボードコンポーネントをロードします。	src/app/app.component.html ファイルの内容を削除します。 以下を追加します。 <app-dashboard></app-dashboard>	アプリ開発者
HttpClientModule を app.module.ts ファイルにインポートします。	src/app/app.module.ts ファイルの先頭に下記の内容を追加します。 import { HttpClientModule } from '@angular/common/http'; imports の配列に HttpClientModule を追加してあなたの AppModule とします。	アプリ開発者

Angular アプリケーションを作成します。

タスク	説明	必要なスキル
Angular CLI を使用してアプリケーションを作成します。	アプリケーションの作成 ng new quicksight-app --defaults cd quicksight-app/src/app ダッシュボードコンポーネントを作成します。 ng g c dashboard src/environments/environment.ts ファイルに移動し、apiUrl: '<Invoke URL from previous steps>' 環境オブジェクトに追加します。 export const environment = { production: false, apiUrl: '<Invoke URL from previous steps>', };	アプリ開発者
QuickSight 埋め込み SDK を追加します。	プロジェクトのルートフォルダで次のコマンドを実行して QuickSight Embedding SDK をインストールします。 npm i amazon-quicksight-embedding-sdk src フォルダで、新しい decl.d.ts ファイルを次の内容でを作成します。 declare module 'amazon-quicksight-embedding-sdk';	アプリ開発者
ダッシュボード.component.ts ファイルにコードを追加します。	import { Component, OnInit } from '@angular/core'; import { HttpClient } from '@angular/common/http'; import * as QuicksightEmbedding from 'amazon-quicksight-embedding-sdk'; import { environment } from "../../environments/environment"; import { take } from 'rxjs'; import { EmbeddingContext } from 'amazon-quicksight-embedding-sdk/dist/types'; import { createEmbeddingContext } from 'amazon-quicksight-embedding-sdk'; @Component({ selector: 'app-dashboard', templateUrl: './dashboard.component.html', styleUrls: ['./dashboard.component.scss'] }) export class DashboardComponent implements OnInit { constructor(private http: HttpClient) { } loadingError = false; dashboard: any; ngOnInit() { this.GetDashboardURL(); } public GetDashboardURL() { this.http.get(environment.apiUrl) .pipe( take(1), ) .subscribe((data: any) => this.Dashboard(data.url)); } public async Dashboard(embeddedURL: any) { var containerDiv = document.getElementById("dashboardContainer") || ''; const frameOptions = { url: embeddedURL, container: containerDiv, height: "850px", width: "100%", resizeHeightOnSizeChangedEvent: true, } const embeddingContext: EmbeddingContext = await createEmbeddingContext(); this.dashboard = embeddingContext.embedDashboard(frameOptions); } }	アプリ開発者
ダッシュボード.component.html ファイルにコードを追加します。	以下のコードを src/app/dashboard/dashboard.component.html ファイルに追加します。 <div id="dashboardContainer"></div>	アプリ開発者
app.component.html ファイルを変更して、ダッシュボードコンポーネントをロードします。	src/app/app.component.html ファイルの内容を削除します。 以下を追加します。 <app-dashboard></app-dashboard>	アプリ開発者
HttpClientModule を app.module.ts ファイルにインポートします。	src/app/app.module.ts ファイルの先頭に下記の内容を追加します。 import { HttpClientModule } from '@angular/common/http'; imports の配列に HttpClientModule を追加してあなたの AppModule とします。	アプリ開発者

Angular アプリケーションをホストします。

タスク	説明	必要なスキル
mkcert を設定します。	注記 次のコマンドは、Unix または MacOS マシン用です。Windows を使用している場合は、対応する echo コマンドの 「追加情報」セクションを参照してください。 マシンにローカル認証機関 (CA) を作成します。 mkcert -install 常にローカル PC my-qs-app.net にリダイレクトするように設定します。 echo "127.0.0.1 my-qs-app.net" | sudo tee -a /private/etc/hosts Angular src プロジェクトのディレクトリにいることを確認します。 mkcert my-qs-app.net 127.0.0.1	アプリ開発者
ドメインを許可するように QuickSight を設定します。	QuickSight では、右上にある名前を選択し、QuickSight を管理を選択します。 ドメインと埋め込みに移動します。 https://my-qs-app.net:4200 を許可されたドメインとして追加。	AWS 管理者
ソリューションをテストします。	次のコマンドを実行して、ローカルの Angular 開発サーバーを開始します。 ng serve --host my-qs-app.net --port 4200 --ssl --ssl-key "./src/my-qs-app.net-key.pem" --ssl-cert "./src/my-qs-app.net.pem" -o これにより、以前に作成したカスタム証明書で Secure Sockets Layer (SSL) が有効になります。 ビルドが完了すると、ブラウザウィンドウが開き、Angularでローカルにホストされている埋め込みQuickSightダッシュボードを表示できます。	アプリ開発者

Angular アプリケーションをホストします。

タスク	説明	必要なスキル
mkcert を設定します。	注記 次のコマンドは、Unix または MacOS マシン用です。Windows を使用している場合は、対応する echo コマンドの 「追加情報」セクションを参照してください。 マシンにローカル認証機関 (CA) を作成します。 mkcert -install 常にローカル PC my-qs-app.net にリダイレクトするように設定します。 echo "127.0.0.1 my-qs-app.net" | sudo tee -a /private/etc/hosts Angular src プロジェクトのディレクトリにいることを確認します。 mkcert my-qs-app.net 127.0.0.1	アプリ開発者
ドメインを許可するように QuickSight を設定します。	QuickSight では、右上にある名前を選択し、QuickSight を管理を選択します。 ドメインと埋め込みに移動します。 https://my-qs-app.net:4200 を許可されたドメインとして追加。	AWS 管理者
ソリューションをテストします。	次のコマンドを実行して、ローカルの Angular 開発サーバーを開始します。 ng serve --host my-qs-app.net --port 4200 --ssl --ssl-key "./src/my-qs-app.net-key.pem" --ssl-cert "./src/my-qs-app.net.pem" -o これにより、以前に作成したカスタム証明書で Secure Sockets Layer (SSL) が有効になります。 ビルドが完了すると、ブラウザウィンドウが開き、Angularでローカルにホストされている埋め込みQuickSightダッシュボードを表示できます。	アプリ開発者

関連リソース

• 「Angular ウェブサイト」

• 「匿名 (未登録) ユーザー向けの QuickSight データダッシュボードの埋め込み」 (QuickSight ドキュメント)

• 「QuickSight 埋め込み SDK」

• 「モックサートツール」

追加情報

Windows を使用している場合は、管理者としてコマンドプロンプトウィンドウを実行し、次のコマンドを使用して常にローカル PC my-qs-app.net にリダイレクトするように設定します。 

echo 127.0.0.1 my-qs-app.net >> %WINDIR%\System32\Drivers\Etc\Hosts