Amazon QuickSight ダッシュボードをローカル Angular アプリケーションに埋め込む - AWS 規範ガイダンス
[概要]前提条件と制限アーキテクチャツールエピック関連リソース追加情報

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

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

作成者: Sean Griffin (AWS) と Milena Godau (AWS）

環境：PoC またはパイロット

テクノロジー: ウェブおよびモバイルアプリ、分析

AWS サービス: AWS Lambda、Amazon、 QuickSightAmazon API Gateway

[概要]

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

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

前提条件と制限

前提条件

機能制限

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

  • ANONYMOUS ID タイプGetDashboardEmbedUrlAPIで を使用するには、 QuickSight 容量料金プランが必要です。

バージョン

アーキテクチャ

テクノロジースタック

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

  • AWS Lambda および Amazon API Gateway バックエンド

アーキテクチャ

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

ローカル Angular アプリケーションに QuickSight ダッシュボードを埋め込むためのアーキテクチャ

自動化とスケール

バックエンドデプロイを自動化するには、 AWS CloudFormation または AWS Serverless Application Model (AWS ) を使用しますSAM。

ツール

ツール

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

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

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

AWS サービス

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

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

  • Amazon QuickSight は、視覚化の構築、アドホック分析の実行、データからビジネスインサイトを取得するためのビジネス分析サービスです。

エピック

タスク説明必要なスキル

EmbedUrl ポリシーを作成します。

次のプロパティQuicksightGetDashboardEmbedUrlを持つ という名前のIAMポリシーを作成します。

{
      "Version": "2012-10-17",
      "Statement": [
            {
                  "Effect": "Allow",
                  "Action": [
                        "quicksight:GetDashboardEmbedUrl",
                        "quickSight:GetAnonymousUserEmbedUrl"
                  ],
                  "Resource": "*"
            }
      ]
}
AWS 管理者

Lambda 関数を作成します。

1. Lambda コンソールで 「関数ページ」を開きます。

2. [関数の作成] を選択します。

3. [最初から作成] を選択します。

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 を追加します。

  1. 設定タブで、環境変数、編集、環境変数の追加を選択します。

  2. キー DASHBOARD_ID で環境変数を追加します。

  3. の値を取得するにはDASHBOARD_ID、 のダッシュボードに移動 QuickSight し、ブラウザURLの UUID の最後に をコピーします。例えば、 URLが の場合https://us-east-1.quicksight.aws.amazon.com/sn/dashboards/<dashboard-id>、 <dashboard-id>の一部をキー値URLとして指定します。

  4. [Save] を選択します。

アプリ開発者

Lambda 関数のアクセス許可を追加します。

Lambda 関数の実行ロールを変更し、QuicksightGetDashboardEmbedUrlポリシーを追加します。

  1. 設定タブで権限を選択し、ロール名を選択します。

  2. ポリシーをアタッチを選択し、QuicksightGetDashboardEmbedUrl を検索してチェックボックスを選択し、ポリシーをアタッチを選択します。

アプリ開発者

Lambda 関数をテストします。

テストイベントを作成して実行します。この関数はテストイベントのデータを使用しないため、「Hello World」テンプレートを使用できます。

  1. [テスト] タブを選択します。

  2. テストイベントに名前を付け、Save を選択します。

  3. テストを選択して、Lambda 関数をテストします。レスポンスは次のようになります。

{
  "statusCode": 200,
  "url": "\"https://us-east-1.quicksight.aws.amazon.com/embed/f1acc0786687783b9a4543a05ba929b3a/dashboards/...
}

注： 前提条件と制限セクションで説明したように、 QuickSight アカウントはセッションキャパシティ料金プランの対象である必要があります。そうしないと、エラーメッセージが表示されます。

アプリ開発者

API Gateway APIで を作成します。

  1. Gateway API コンソール で、「 の作成API」を選択し、「 の構築RESTAPI」を選択します。

    • API 名前には、 と入力しますqs-embed-api。

    • Create APIを選択します。

  2. アクションでメソッドの作成を選択します。

    • チェックマークを選択して、 を選択してGET確認します。

    • 統合タイプとして、Lambda 関数を選択します。

    • Lambda 関数の場合、get-qs-embed-url を入力します。

    • [Save] を選択します。

    • Lambda 関数に権限を追加するダイアログボックスで、 OK を選択します。

  3. を有効にしますCORS。

    • アクション で、 を有効にする CORSを選択します。

    • Access-Control-Allow-Origin では、'https://my-qs-app.net:4200' を入力します。

    • 既存のCORSヘッダー を有効にCORSして置き換え、確認します。

  4. をデプロイしますAPI。

    • アクション で、デプロイ APIを選択します。

    • [デプロイされるステージ] で、[新しいステージ] を選択します。

    • [Stage name (ステージ名)] に dev と入力します。

    • デプロイを選択します。

    • を呼び出す URLをコピーします。

注:my-qs-app.net どのドメインでもかまいません。別のドメイン名を使用する場合は、ステップ 3 で Access-Control-Allow-Origin 情報を更新し、my-qs-app.net 以降の手順で変更してください。

アプリ開発者
タスク説明必要なスキル

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

  1. アプリケーションの作成

    ng new quicksight-app --defaults
cd quicksight-app/src/app

  2. ダッシュボードコンポーネントを作成します。

    ng g c dashboard

  3. src/environments/environment.ts ファイルに移動し、apiUrl: '<Invoke URL from previous steps>' 環境オブジェクトに追加します。

    export const environment = {
  production: false,
  apiUrl: '<Invoke URL from previous steps>',
};
アプリ開発者

QuickSight 埋め込み を追加しますSDK。

  1. プロジェクトのルートフォルダで次のコマンドSDKを実行して QuickSight 、埋め込みをインストールします。

    npm i amazon-quicksight-embedding-sdk

  2. 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 ファイルを変更して、ダッシュボードコンポーネントをロードします。

  1. src/app/app.component.html ファイルの内容を削除します。

  2. 以下を追加します。

    <app-dashboard></app-dashboard>
アプリ開発者

app.module.ts ファイルにインポート HttpClientModule します。

  1. src/app/app.module.ts ファイルの先頭に下記の内容を追加します。

    import { HttpClientModule } from '@angular/common/http';

  2. imports の配列に HttpClientModule を追加してあなたの AppModule とします。

アプリ開発者
タスク説明必要なスキル

mkcert を設定します。

注:以下のコマンドは UNIX または macOS マシン用です。Windows を使用している場合は、対応する echo コマンドの 「追加情報」セクションを参照してください。

  1. マシンにローカル認証機関 (CA) を作成します。

    mkcert -install

  2. 常にローカル PC my-qs-app.net にリダイレクトするように設定します。

    echo "127.0.0.1 my-qs-app.net" | sudo tee -a /private/etc/hosts

  3. Angular src プロジェクトのディレクトリにいることを確認します。

    mkcert my-qs-app.net 127.0.0.1
アプリ開発者

ドメインを許可する QuickSight ように を設定します。

  1. で QuickSight、右上隅で名前を選択し、クイックサイトの管理 を選択します。

  2. ドメインと埋め込みに移動します。

  3. 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 ダッシュボードを表示できます。

アプリ開発者

関連リソース

追加情報

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

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