【AWSワークショップ】QuickSight Workshop③ ～ダッシュボードの公開～

過去2回のワークショップでは、

• 作成者向け：コンソールを使った分析・ダッシュボードの作り方
• 管理者向け：CLIを使ったユーザ・グループやテナントの作り方

を学習してきました。

ただこれだとせっかく作ったダッシュボードもQuickSightにログインしたユーザしか見れない状態です。そこで今回はダッシュボートを一般公開する方法を学びます。

前回の管理者向けワークショップは以下から参照ください。

frontse.hatenablog.jp

QuickSightワークショップの構成

毎度ですが、最初にワークショップ全体の構成を確認しておきます。ワークショップには下記からアクセスできます。

learnquicksight.workshop.aws

全体構成は次の通りです。

「Dashboard Enbedding」と「Session Embedding」はこの記事を書いている時点ではまだ存在しているのですが、近々コンテンツから消されるそうです。

その代わり「User-based Embedding」という類似コンテンツに集約されています。

Author Workshop	ダッシュボードの作成者向けワークショップ。様々な表・グラフの作成方法や、独自の計算ロジックの実装方法を学びます。
Admin Workshop	QuickSightの管理者向けワークショップ。ユーザ・グループ・権限などの設定を通じてセキュアな運用を行う方法を学びます。
Anonymous Embedding	ダッシュボードを不特定多数に公開する方法を学びます。具体的にはLambdaやAPIGatewayと統合させます。
User-based Embedding	ダッシュボードを認証したユーザにのみ公開する方法を学びます。具体的にはLambdaやAPIGatewayに加えてさらにIAM・STSを使います。
Dashboard Embedding	ダッシュボードを外部Webページに埋め込む方法を学びます。Cognitoと統合させ、アクセス管理も行います。
Session Embedding	ダッシュボードそのものだけでなく、ダッシュボード作成画面も含めてQuickSight全体を外部ページに埋め込む方法を学びます。
Business Level-Up	（オプション）上記迄のワークショップに触れられなかったオプションやパラメータ、関数などを学びます。
Admin Level-Up	（オプション）Lake Formationで構築したデータレイクのデータをインプットに、QuickSightを構築する方法を学びます。

本日は「Anonymous Embedding」を取り扱います。

注意！！

自分が作ったダッシュボードを公開するには、250USD/月のサブスクリプションに申し込まないといけません。個人の勉強ではとても支払えない金額ですが、今回はワークショップ側がサンプルダッシュボードを用意してくれているのでそれを使います。

Anonymous Embedding（ダッシュボードの公開）

今回の構成

　

動的Webページ、静的Webページで分けて記載がありますが構成は同じです。

API GatewayがあたかもWebサーバかのようにユーザフロントに直接たっているのが特徴ですね。

もちろん動的Webページの時はEC2やECS等でWebサーバをフロントに立てるのが一般的でしょうし、静的Webページの時はS3＋CloudFrontで運用するほうが性能面でもコスト面でもメリットはあると思いますが、あくまで今回は上記を例にしています。

フレームワークの埋め込み

Lambdaの実行ロール

Step 1 - ポリシーの作成

IAMコンソールから下記JSONを使ってポリシーを作ります。

ここでは2つのダッシュボードを公開する想定のポリシーになっています。

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Action": [
                "quicksight:GetDashboardEmbedUrl",
                "quickSight:GetAnonymousUserEmbedUrl"
            ],
            "Resource": [
                "arn:aws:quicksight:*:*:dashboard/<Dashboard1Id>",
                "arn:aws:quicksight:*:*:dashboard/<Dashboard2Id>"
            ],
            "Effect": "Allow"
        },
        {
            "Action": [
                "logs:CreateLogGroup",
                "logs:CreateLogStream",
                "logs:PutLogEvents"
            ],
            "Resource": "*",
            "Effect": "Allow"
        }
    ]
}

ここでDashboard1IdとDashboard2Idを書き換える必要があるのですが、ダッシュボードIDは分析からダッシュボードを公開したときのURLの末尾の文字列です。

公開したいダッシュボードを開いて確認してください。

ワークショップでは予めサンプルダッシュボードを用意してくれているので、下記2つのダッシュボードIDを使います。

24c67326-a5fa-48f3-9218-721ed74859b5
2acd4076-d799-478e-978a-e8e733cb344d

Step 2 - ロールの作成

同じくIAMコンソールから今度はロールを作成します。

下記画面で「AWS service」→「Lambda」を選択して次の画面に遷移して下さい。

遷移先の画面でポリシーを選択できるので、Step 1で作成したポリシーを選択してロール作成を完了させます。

Lambda関数の作成

ここでのLambda関数は、HTTPコンテンツとダッシュボードのURLを返却します。
動的モードでは、QuickSightから埋め込み用のURLを生成し、そのURLを指定してHTMLページをレスポンスとして返却します。
静的モードでは、最初に静的HTMLを返却し、ページが読み込まれるとそのページのJavaScriptが別のAPIゲートウェイ呼び出しを行って埋め込みURLを取得してダッシュボードを起動するという流れになります。

Step 1 - Lambda関数の作成

Lambdaコンソールを開き「関数の作成」ボタンをクリックして次を入力します。

• 関数名：QSAnonymousEmbedSample
• ランタイム：Python 3.8
• 実行ロール：「既存のロールを使用する」から先ほど作ったロールを選択。

Step 2 - ソースコードの登録

こちらからソースコードのZIPファイルをダウンロードし、「アップロード元」ボタンから「.zipファイル」を選択してダウンロードしたZIPファイルをアップロードして保存する。

Step 3 - 環境変数の設定

設定タブ > 環境変数から次の３つの環境変数を登録します。

• DashboardIdList：24c67326-a5fa-48f3-9218-721ed74859b5,2acd4076-d799-478e-978a-e8e733cb344d
• DashboardNameList：Dashboard One,Dashboard Two
• DashboardRegion：us-east-1

Step 4 - タイムアウト値の設定

同じく設定タブ > 一般設定から「編集」ボタンをクリックして、タイムアウト値を30秒に変更し「保存」ボタンをクリックします。

APIゲートウェイ

先ほど作成したLambda関数「QSAnonymousEmbedSample」を起動するAPIゲートウェイを実装します。

Step 1 - APIの作成

API Gatewayコンソールに移動し、APIタイプに「REST API」を選択します。

API名に「QSAnonymousEmbedSample」を記入し「APIの作成」ボタンをクリックします。

Step 2 - リソースの作成

「アクション」から「リソースの作成」を選択し、リソース名に「anonymous-embed-sample」と入力して「リソースの作成」ボタンをクリックします

Step 3 - メソッドの作成

作成した「anonymous-embed-sample」リソースを選択した状態で「アクション」から「メソッドの作成」を選択し、リストからGETを選んでチェックボタンをクリックします。

Step 4 - GETメソッドのセットアップ

下記のように設定して「保存」ボタンをクリックします。

• 統合タイプ：Lambda関数
• Lambdaプロキシ統合の使用：チェックを入れる
• Lambdaリージョン：ap-northeast-1
• Lambda関数：QSAnonymousEmbedSample
• デフォルトタイムアウトの仕様：チェックを入れる

Step 5 - APIをデプロイする

「アクション」から「APIのデプロイ」を選択し、表示されたダイアログで

• デプロイされるステージ：[新しいステージ]
• ステージ名：test

にして「デプロイ」ボタンをクリックする。その後表示された「URLの呼び出し」のURLはメモしておく。

埋め込みダッシュボードのドメイン管理

Step 1 - リージョン変更

QuickSightを開き、右上のユーザ名をクリックしてリージョンをダッシュボードがあるリージョンに変更します。今回は「米国東部（バージニア北部）」にします。

Step 2 -  送信元ドメインの登録

同じく右上のユーザ名から「QuickSightの管理」を選び、「ドメインと埋め込み」メニューからドメインに先ほどのAPI GatewayのURLを入力して「追加」ボタンをクリックします。

サイトの起動

Pattern 1 - 動的フロー

プライベートブラウザでAPI GatewayのURLに/anonymous-embed-sampleを追記して実行します。するとSample 1ダッシュボードが表示されました。

画面上部にSelect Dashboardのドロップダウンリストがあるので変更してみます。

最初に生成された埋め込みURLは、2つのダッシュボードへのアクセスが許可されているので、別の埋め込みURLを生成せずにダッシュボードを変更できます。

Pattern 2 - 静的フロー

プライベートブラウザでAPI GatewayのURLに/anonymous-embed-sample?mode=staticを追記して実行します。

同じく画面上部のドロップダウンリストからDashboardを変更してみます。

こちらも最初に生成された埋め込みURLは、2つのダッシュボードへのアクセスが許可されているので、別の埋め込みURLを生成せずにダッシュボードを変更できます。

まとめ

今回はダッシュボートを一般公開する方法を学習しました。

肝心のLambda→QuickSightのダッシュボード埋め込みURLの取得部分が、サンプルソースコードを適用するだけだったのであまりピンとこなかったかもしれません。

その場合はすこしPythonコードと呼び出されるHTMLファイルの中身を見てみると良いですが、PythonのQuickSight SDKでget_dashboard_embed_url関数からダッシュボード表示用のURLを取得している箇所が肝です。IndetityTypeを’ANONYMOUS’に指定しています。

動的モードの時はそれを最初のAPI呼び出しの時に実行しており、静的モードの時は最初のAPI呼び出しで表示されるHTMLページの中のJavaScript経由で実行されています。

このSDKの関数は最初にしていたポリシー設定があれば、特に呼び出し元のユーザは限定していませんでした。

次のワークショップで、呼び出し元のユーザの認証・認可を考慮したダッシュボード公開方法を学びます。