QuickSightで1クリックの公開埋め込み機能がGAとなっていたので使ってみた

#Amazon QuickSight

#AWS

いわさ

2022.06.30

この記事は公開されてから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へアクセスしてみましょう。