QuickSight のワンクリック埋め込みを CloudFront + S3 環境で試してみた
2025.02.20こんにちは
QuickSight の埋め込み環境の検証をする機会が多いため、さっと環境を作れるよう手順を記録しておきます。
本ブログでやることは、CloudFront + S3 環境を準備し、S3 に配置した index.html ファイルに QuickSight のワンクリック埋め込みで作成したダッシュボードを埋め込むことです。
公式ドキュメント上では以下の手順になります。
S3 バケットの設定
まずは S3 バケットを作成します。
作成時に「このバケットのブロックパブリックアクセス設定」のチェックを外しておきます。それ以外はデフォルト設定で作成します。
バケットを作成できたら、「プロパティ」タブを選択し、
「静的ウェブサイトホスティング」を編集します。
「静的ウェブサイトホスティング」設定を有効にし、インデックスドキュメントにindex.html を指定します。
エラードキュメントは今回の検証とは無関係のため、何も指定しません。(スクリーンショット画像では何か指定しているように見えていますがご放念ください。)
設定が完了しました。S3 静的Webサイトホスティングの設定が “有効” になっています。
続いて、作成した S3 バケットに対し以下のポリシーを設定し、後ほどアップロードする index.html にアクセスできるようにしておきます。
{
"Version": "2012-10-17",
"Statement": [
{
"Sid": "PublicReadForAllObjects",
"Effect": "Allow",
"Principal": "*",
"Action": "s3:GetObject",
"Resource": "arn:aws:s3:::<S3 バケット名>/*"
}
]
}
なお、ここでポリシーを編集できないなどのエラーが出た場合は以下ブログを参考に「このアカウントのブロックパブリックアクセス設定」をオフにして改善されるか試してみてください。(※下記ブログでも記載されていますがこの変更を適用するとセキュリティ上よろしくない場合がありますためご留意ください。)
GuardDuty が有効になっている本番環境などでこれらの設定を変更すると以下のような通知が飛ぶので、関係各所にあらかじめ連絡しておくとよいでしょう。
[小ネタ] AWS アカウントレベルの S3 ブロックパブリックアクセスが設定されていて S3 のオブジェクトを公開するのに少し手間取った
ポリシーを変更したら、適当な index.html を用意し S3 にアップロードしておきます。
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p>The quick brown fox jumps over the lazy dog.</p>
</body>
</html>
CloudFront 設定
CloudFront ディストリビューションを作成します。
Origin domain は S3 のバケットウェブサイトエンドポイントを指定します。
それ以外はデフォルト設定で作成します。
※ バケットウェブサイトエンドポイントは S3 バケットの「プロパティタブ」から確認できます。
CloudFront の作成が完了したら、CloudFront ドメインにアクセスしてみます。
一般タブから「ディストリビューションドメイン名」をコピーします。
適当なブラウザでコピーした URL を表示してみます。
以下のように先ほどアップロードしておいたHTMLが表示されればOKです。
QuickSight 設定
続いて、QuickSight の設定です。
適当な分析を表示し、右上の「公開」を選択します。
適当な名前で、「ダッシュボードの公開」をします。
公開したダッシュボード右上の「共有」から「ダッシュボードの共有」を選びます。
「埋め込みコードをコピー」を選択
すると以下のような iframe タグのコードがコピーされます。
<iframe
width="960"
height="720"
src="https://ap-northeast-1.quicksight.aws.amazon.com/sn/embed/share/accounts/<アカウントID>/dashboards/1e93a75d-0a80-4986-81b9-9750f1447668?directory_alias=xxxx">
</iframe>
前述の index.html ファイルにコピーした内容を追記します。
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p>The quick brown fox jumps over the lazy dog.</p>
<iframe
width="960"
height="720"
src="https://ap-northeast-1.quicksight.aws.amazon.com/sn/embed/share/accounts/<アカウント ID>/dashboards/1e93a75d-0a80-4986-81b9-9750f1447668?directory_alias=xxxx">
</iframe>
</body>
</html>
追記後、上記 index.html を S3 にアップロードします。
その後、CloudFront の「キャッシュ削除を作成」より CloudFront のキャッシュを削除します。
(※削除しないと、古いファイルが表示されていまい、アップロードした最新の index.html が正しく表示されません。)
オブジェクトパスに 「/*」と入力することで、すべての領域のキャッシュを削除できます。
パスを指定したら「キャッシュ削除を作成」を選択。
ステータスが「完了済み」になればキャッシュ削除完了です。
試しに、一度この状態で CloudFront ドメインにアクセスし、QuickSight 埋め込みダッシュボードが表示されるか確認してみます。
現時点では、以下のように ”接続が拒否された” と表示され、中身が表示されません。
上記の状態を改善し、ダッシュボードを見えるようにするため、QuickSight 側で設定を行います。
具体的には、QuickSight の管理画面より「ドメインと埋め込み」を選び、ドメイン部分に CloudFront ドメインを追加します。
追加できました。
ドメインの追加後、再度 CloudFront ドメインにアクセスしてみます。(なお、試しているブラウザはChrome のシークレットウィンドウです)
すると以下の画面になるため、「もう一度サインイン」を選択。
サインインの画面が出てくるため（※既にAWSコンソールにサインインしている場合は表示されません）ユーザー名を入力します。
その後、パスワードを指定し、サインインします。
サインイン後、以下のようにダッシュボードが表示されました。
終わりに
今回は、埋め込みダッシュボード検証ができるよう CloudFront + S3 で環境作成をしてみました。
意外と素早く作れたので、今後の検証が捗りそうです。
本記事がどなたかのお役に立てば幸いです。
参考文献
