![[小ネタ] QuickSight のワンクリック埋め込みを S3 環境のみでやってみた](https://images.ctfassets.net/ct0aopd36mqt/wp-thumbnail-19e77b9a51519e08b94d0f688c125729/4f439c75e1ee56c70e315fa46fa45f81/amazon-quicksight)
[小ネタ] QuickSight のワンクリック埋め込みを S3 環境のみでやってみた
2025.02.27こんにちは。QuickSight の埋め込み検証で、S3 だけで検証可能では？と思ったので、備忘録です。
前提として、QuickSight では埋め込みダッシュボードのドメインとして HTTP ドメインは登録できません。
以下のようにエラーになります。
そのため、QuickSight のワンクリック埋め込みなどを検証する際は以下ブログのように CloudFront + S3静的ウェブホスティング 環境を準備し、 HTTPS ドメイン環境を構築する必要がありました。
以下ドキュメントにある通り、S3 静的 Web サイトホスティング単体では、HTTPS をサポートしていません。
Amazon S3 ウェブサイトエンドポイントは HTTPS をサポートしていません。HTTPS を使用する場合は、Amazon CloudFront を使用して Amazon S3 でホストされている静的ウェブサイトを提供できます。
https://docs.aws.amazon.com/ja_jp/AmazonS3/latest/userguide/WebsiteHosting.html
一方、S3 にオブジェクトをアップロードするとオブジェクト毎に「オブジェクト URL」が付与され、こちらは HTTPS ドメインでアクセスが可能です。
以下画像のようにオブジェクトの階層を辿ると詳細画面から確認できます。
ということは、このオブジェクト URL を使えば、CloudFront + S3 で HTTPS 環境を作らなくても、埋め込みが試せるのでは？と思い、やってみました。
やってみた
適当な HTML を準備します。
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p>The quick brown fox jumps over the lazy dog.</p>
</body>
</html>
S3 を作成し HTML ファイルをアップロードします。
アップロードしたら、S3 のアカウントレベルのブロックパブリックアクセスをオフにします。
S3 のアカウントレベルのブロックパブリックアクセスに関する詳細については下記ブログをご参照ください。
S3 バケット自体のブロックパブリックアクセスもオフにします。
バケットポリシーに以下ポリシーを設定し、パブリックからオブジェクトの読み取りができるようにします。
{
"Version": "2012-10-17",
"Statement": [
{
"Sid": "PublicReadForAllObjects",
"Effect": "Allow",
"Principal": "*",
"Action": "s3:GetObject",
"Resource": "arn:aws:s3:::<バケット名>/*"
}
]
}
ちなみに S3 静的Webサイトホスティングは無効にしてあります。
アップロードしたオブジェクトのオブジェクト URL をコピーします。
ブラウザで URL を確認すると、きちんと表示されています。
続いて、QuickSight を設定していきます。
適当な分析を表示し、右上の「公開」を選択します。
適当な名前で、「ダッシュボードの公開」をします。
公開したダッシュボード右上の「共有」から「ダッシュボードの共有」を選びます。
「埋め込みコードをコピー」を選択します。
前述の hogehoge.html ファイルにコピーした内容を追記します。
以下の iframe タグの部分がコピー部分です。
<!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>
上記を S3 にアップロードし、オブジェクト URL をコピーします。
コピーした URL をQuickSight の管理画面の「ドメインと埋め込み」より、追加します。
なおこの時、末尾の hogehoge.html は省いておきます。
コピーしたオブジェクト URL をブラウザ（今回は Chrome のシークレットウィンドウ）で表示します。
以下の画面になるので、「もう一度」サインインからサインイン作業を実施します。
サインイン後、ダッシュボードが表示されました。
終わりに
今回は、S3 のオブジェクト URL を利用してワンクリック埋め込みが可能か確認しました。結果、できました。
これまで CloudFront + S3静的Webサイトホスティング環境で検証していましたが、単純な検証であれば今回のやり方で検証環境を用意してみてもいいのかもと思いました。
本記事がお役に立てば幸いです。
参考文献
