この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。
いわさです。
ちょっと時間が経ってしまいましたが先月、QuickSightに「1クリックの公開埋め込み」と呼ばれる機能が追加されていました。
Enterprise Editionで使えるのですが、公開埋め込みは前提としてリーダーセッションキャパシティ機能を有効化する必要があり、なかなか試すことが出来ずにいました。
埋め込み自体は有効化しなくても出来るのですが、埋め込んだダッシュボードへはパブリックアクセスする形になるので、この機能がないと結局ダッシュボードを表示できないのです。
前回の記事でリーダーセッションキャパシティを1日だけ有効化してみたので、この機能も試してみることにしました。
外部サイトを用意
外部サイトへ埋め込む形になるので、まずは埋め込み先のWebサイトを用意します。
後述しますが、外部サイトはHTTPSでホストする必要があります。
そこで今回は S3 + CloudFront の構成を取りたいと思います。
静的ホスティングを有効化したS3を作成
このあたりはたくさん記事があるのでササッと行きたいと思います。
CloudFrontを前段に配置する場合はS3は静的ウェブサイトホスティング機能を使わない場合もあるのですが、HTTPの場合も確認したかったので、この記事では静的ウェブサイトホスティングを有効化しています。
バケットの許可ポリシーを設定し、静的ウェブサイトホスティングを有効化します。
バケットポリシー
{
"Version": "2012-10-17",
"Statement": [
{
"Sid": "PublicReadGetObject",
"Effect": "Allow",
"Principal": "*",
"Action": "s3:GetObject",
"Resource": "arn:aws:s3:::hoge0630quicksight/*"
}
]
}
パブリックアクセス可能な状態となりました。
CloudFrontでオリジンを設定
CloudFrontはオリジンドメインでS3を指定するだけです。
静的ウェブサイトホスティングと非静的ウェブサイトホスティングでオリジンドメインが若干違うので、その点だけ注意が必要です。
カスタムドメインは今回利用せず、デフォルトドメインを使わせてもらいます。
埋め込みコードを取得する
さて、では今回のメイン機能です。
インターネット上の全ユーザーへアクセスを許可したダッシュボードで、「埋め込みコードをコピー」を選択します。
この機能なのですが、これ何が出来るかっていうと実態としては以下のような埋め込み用のコードを取得出来る、というだけだったりします。
<iframe
width="960"
height="720"
src="https://ap-northeast-1.quicksight.aws.amazon.com/sn/embed/share/accounts/123456789012/dashboards/a8b5dee9-0f70-4ce7-856a-9b575ad1f7dd?directory_alias=iwasa-quicksight">
</iframe>あとは、取得したこのコードを埋め込むだけで、ここは手動で行う必要があります。
1クリック埋め込みという名前から、自動で埋め込まれるのではなど最初想像したのですが、ちょっと違いました。
とはいえ、以前はCLIを叩いて埋め込み用URLを取得していたので、だいぶ楽です。
CloudFrontでホストする静的HTMLへ設定してアップロードしてみましょう。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p>
<h1>hoge quicksight</h1>
</p>
<iframe
width="960"
height="720"
src="https://ap-northeast-1.quicksight.aws.amazon.com/sn/embed/share/accounts/123456789012/dashboards/a8b5dee9-0f70-4ce7-856a-9b575ad1f7dd?directory_alias=iwasa-quicksight">
</iframe>
</body>
</html>実は、この時点ではまだこのコンテンツへアクセスしてもダッシュボードは表示出来ません。
試しにCloudFrontへアクセスしてみましょう。
表示されないですね。
対象の外部サイトを許可する
外部埋め込みサイトのURLをQuickSightの管理画面へ追加することで埋め込み先を許可する、ホワイトリスト方式で管理を行っています。 ここでは以下のようにCloudFrontのURLを追加します。
なお、ここではHTTPSなURLでなければ登録出来ないので、HTTPのみのS3静的ウェブサイトでは登録が出来ませんでした。
さてURLを登録後にダッシュボードを埋め込んだ外部コンテンツへ再度アクセスしてみましょう。
今度はアクセスすることが出来ました。
QuickSightへの認証も不要でした。
パブリック公開されてないダッシュボードを埋め込むと
冒頭で少し紹介しましたが、パブリック公開されていない場合でも埋め込みURLは取得出来ます。
このURLを埋め込んでサイトを公開してみるとどうなるか試してみました。
この場合は、以下のようにダッシュボードが正常に表示されなくなります。
さいごに
本日はQuickSightで新しく使えるようになった、1クリックの公開埋め込み機能を試してみました。
埋め込みコードがGUIで簡単に取得出来るようになりましたよ、くらいな感じですね。
静的コンテンツへ公開ダッシュボードを埋め込む場合は、本機能で取得出来る埋め込みURLは静的なURLなのでこちらを使うと良いと思います。
一方でパブリック埋め込みの場合でもセッション制御したい場合などに動的URLを取得する方法も実はあります。
動的コンテンツの場合はURLを発行してパブリックアクセスさせる方法もあるので、そちらを使うシーンも出てきます。
それはまた別の記事で紹介できればと思います。
19
