埋め込み分析を使用する アマゾンクイックサイト 複雑な開発を行わずに、アプリケーションに機能の視覚化を装備するプロセスを簡素化できます。 QuickSight ダッシュボードをアプリケーションに埋め込む方法は複数あります。 この投稿では、React と Amazon QuickSight 埋め込み SDK.
多くの場合、ダッシュボードの利用者には AWS アカウントにユーザーが割り当てられていないため、ダッシュボードにアクセスできません。 データを利用できるようにするには、匿名ユーザーがダッシュボードにアクセスできる必要があります。 認証されていないユーザーが React アプリケーションで QuickSight ダッシュボードを表示できるようにするために必要な手順を見てみましょう。
ソリューションの概要
私たちのソリューションは次の主要なサービスを使用します。
ブラウザに Web ページをロードした後、ブラウザは API Gateway を呼び出します。これにより、QuickSight API を呼び出す Lambda 関数が呼び出され、匿名ユーザーのダッシュボード URL が生成されます。 Lambda 関数は、必要な権限を持つ IAM ロールを引き受ける必要があります。 次の図は、アーキテクチャの概要を示しています。
前提条件
次の前提条件が必要です。
認証されていない閲覧者の権限を設定する
アカウントで、アプリケーションが視聴者に代わって想定する IAM ポリシーを作成します。
- IAMコンソールで、 Policies ナビゲーションペインに表示されます。
- 選択する ポリシーを作成する.
- ソフトウェア設定ページで、下図のように JSONの タブで、次のポリシー コードを入力します。
必ず値を変更してくださいダッシュボード ID の値に。 後の手順でも使用するために、この ID をメモしておきます。
ログを含む XNUMX 番目のステートメント オブジェクトの権限は次のとおりです。 任意。 これにより、指定した名前でログ グループを作成し、指定したログ グループのログ ストリームを作成し、指定したログ ストリームにログ イベントのバッチをアップロードすることができます。
このポリシーでは、ユーザーが次のことを実行できるようにします。 GenerateEmbedUrlForAnonymousUser
プレースホルダーに挿入されたダッシュボード ID のリスト内のダッシュボード ID に対するアクション。
- ポリシーの名前を入力します (例:
AnonymousEmbedPolicy
)と選択 ポリシーを作成する.
次に、ロールを作成し、このポリシーをロールにアタッチします。
- 選択する 役割 ナビゲーションペインで、を選択します 役割を作成する.
- 選択する ラムダ 信頼できるエンティティのために。
- 検索して選択します
AnonymousEmbedPolicy
、を選択します Next. - 役割の名前を入力します。
AnonymousEmbedRole
. - ポリシー名が 権限を追加 のセクションから無料でダウンロードできます。
- ロールの作成を完了します。
作成したばかりの AnonymousEmbedRole
実行役。 これで次のステップに進むことができます。
匿名の埋め込み URL Lambda 関数を生成する
このステップでは、QuickSight と対話して匿名ユーザーの埋め込み URL を生成する Lambda 関数を作成します。 私たちのドメインを許可する必要があります。 Amazon QuickSight の統合を実現するには XNUMX つの方法があります。
- Amazon QuickSight 管理コンソールの許可されたドメインのリストに URL を追加する (後で説明します) [オプション] QuickSight にドメインを追加します セクション)。
- [推奨] 実行時に API 呼び出しで埋め込み URL リクエストを追加します。 許可されたドメインを永続化する必要がある場合は、オプション 1 をお勧めします。 それ以外の場合、ドメインはセッション期間に相当する 30 分後に削除されます。 他の使用例の場合は、XNUMX 番目のオプション (以下で説明および実装) を使用することをお勧めします。
Lambdaコンソールで、新しい関数を作成します。
- 選択 最初から作成者.
- 関数名、次のような名前を入力します
AnonymousEmbedFunction
. - ランタイム¸選ぶ Pythonの3.9.
- 実行の役割¸選ぶ 既存の役割を使用する.
- 役割を選択
AnonymousEmbedRole
. - 選択する 関数を作成する.
- 関数の詳細ページで、 Code タブをクリックして次のコードを入力します。
localhost を使用しない場合は、次のように置き換えます。 http://localhost:3000
アプリケーションのホスト名が返されます。 本番環境に移行するには、忘れずに置き換えてください http://localhost:3000
あなたのドメインで。
- ソフトウェア設定ページで、下図のように タブ、下 一般的な設定、選択する 編集.
- タイムアウトを 3 秒から 30 秒に増やしてから、 Save.
- 環境変数、選択する 編集.
- 次の変数を追加します。
- Add
DashboardIdList
ダッシュボード ID をリストします。 - Add
DashboardRegion
ダッシュボードのリージョンを入力します。
- Add
- 選択する Save.
構成は次のスクリーンショットのようになります。
- ソフトウェア設定ページで、下図のように Code タブを選択 配備します 関数をデプロイします。
Lambda 関数を呼び出すように API Gateway を設定する
作成した関数を呼び出すように API Gateway を設定するには、次の手順を実行します。
- API Gateway コンソールで、 REST API セクションと選択 完成に向けてあなたの背中を押してくれる、執筆のための持続可能で本物のモーメンタムを作り出す。.
- 新しいAPIを作成する選択 新しいAPI.
- API名、名前を入力します(たとえば、
QuicksightAnonymousEmbed
). - 選択する APIを作成する.
- ソフトウェア設定ページで、下図のように メニュー、選択 リソースを作成する.
- リソース名、名前を入力します(たとえば、
anonymous-embed
).
それでは、メソッドを作成してみましょう。
- 選択する
anonymous-embed
リソースと メニュー、選択 メソッドの作成. - 選択する GET リソース名の下にあります。
- 統合タイプ選択 ラムダ.
- 選択 Lambdaプロキシ統合を使用する.
- ラムダ関数、作成した関数の名前を入力します。
- 選択する Save、を選択します OK.
これで、API をデプロイする準備が整いました。
- ソフトウェア設定ページで、下図のように メニュー、選択 APIをデプロイする.
- 展開段階選択 新しいステージ.
- ステージの名前を入力します。
embed
. - 選択する 配備します.
[オプション] QuickSight にドメインを追加します
許可されたドメインを追加した場合 匿名の埋め込み URL Lambda 関数を生成する 部分は、お気軽に移動してください 容量の価格設定を有効にする のセクションから無料でダウンロードできます。
QuickSight で許可されたドメインにドメインを追加するには、次の手順を実行します。
- QuickSight コンソールで、ユーザー メニューを選択し、次に QuickSightを管理する.
- 選択する ドメインと埋め込み ナビゲーションペインに表示されます。
- ドメイン、ドメインを入力してください (
http://localhost:
).
必ず交換してください ローカル設定に合わせてください。
- 選択する Add.
localhost ドメインを、テスト後に使用するドメインに必ず置き換えてください。
容量の価格設定を有効にする
セッション容量の価格設定が有効になっていない場合は、このセクションの手順に従ってください。 次に進むには、この機能を有効にすることが必須です。
容量価格設定により、QuickSight の顧客は、QuickSight で個別のリーダーをプロビジョニングすることなく、リーダー セッションを一括購入できます。 容量の価格設定は、組み込みアプリケーションまたは大規模なビジネス インテリジェンス (BI) の導入に最適です。 詳細については、次のサイトをご覧ください。 Amazon QuickSightの料金.
容量価格設定を有効にするには、次の手順を実行します。
- ソフトウェア設定ページで、下図のように QuickSightを管理する ページ、選択 サブスクリプション ナビゲーションペインに表示されます。
- 容量の価格設定 セクション、選択 毎月のサブスクリプションを取得する.
- 選択する サブスクリプションを確認する.
容量料金の詳細については、次を参照してください。 Amazon QuickSight の新機能 – 大規模なデプロイ、公開 Web サイトへの埋め込み、埋め込み分析用の開発者ポータル向けのセッション容量の料金設定.
React アプリケーションをセットアップする
React アプリケーションを設定するには、次の手順を実行します。
- React プロジェクト フォルダーで、ルート ディレクトリに移動し、次を実行します。
npm i amazon-quicksight-embedding-sdk
amazon-quicksight-embedding-sdk パッケージをインストールします。 - あなたの中で
App.js
ファイルを次のように置き換えます。- 交換する
YOUR_API_GATEWAY_INVOKE_URL/RESOURCE_NAME
API Gateway 呼び出し URL とリソース名を使用します (例:https://xxxxxxxx.execute-api.xx-xxx-x.amazonaws.com/embed/anonymous-embed
). - 交換する
YOUR_DASHBOARD1_ID
最初のダッシュボード ID を使用して、DashboardIdList
。 これは、最初のレンダリングで表示されるダッシュボードです。 - 交換する
YOUR_DASHBOARD2_ID
の XNUMX 番目のダッシュボード ID を使用して、DashboardIdList
.
- 交換する
次のコード スニペットは、 App.js
React プロジェクト内のファイル。 このコードは、選択したダッシュボード ID に基づいて QuickSight ダッシュボードを埋め込む React コンポーネントです。 コードには次の主要なコンポーネントが含まれています。
- 状態フック – XNUMX つの状態フックは、
useState()
React からのフック:- ダッシュボード – 現在選択されているダッシュボード ID を保持します。
- クイックサイト埋め込み – によって返された QuickSight 埋め込みオブジェクトを保持します。
embedDashboard()
機能。
- レフフック – ref フックは、
useRef()
React からのフック。 これは、QuickSight ダッシュボードが埋め込まれる DOM 要素への参照を保持するために使用されます。 - useEffect() フック – useEffect() フックは、選択したダッシュボード ID が変更されるたびに、QuickSight ダッシュボードの埋め込みをトリガーするために使用されます。 まず、fetch() メソッドを使用して、選択した ID のダッシュボード URL を QuickSight API から取得します。 URL を取得した後、その URL を引数として embed() 関数を呼び出します。
- ハンドラーの変更 -
changeDashboard()
function は、ユーザーがドロップダウン メニューから別のダッシュボードを選択するたびにダッシュボードの状態を更新する単純なイベント ハンドラーです。 新しいダッシュボード ID が設定されるとすぐに、useEffect フックがトリガーされます。 - 10ミリ秒のタイムアウト – タイムアウトを使用する目的は、API 呼び出しを行う前に 10 ミリ秒のわずかな遅延を導入することです。 この遅延は、即時の API 呼び出しを回避したり、コンポーネントが頻繁にレンダリングされるときに過剰なリクエストを防止したりするシナリオで役立ちます。 タイムアウトにより、API リクエストを開始する前にコンポーネントが落ち着くまでの時間が与えられます。 開発モードでアプリケーションを構築しているため、タイムアウトは、
useEffect
以内StrictMode
。 詳細については、を参照してください。 Strictモードへのアップデート.
次のコードを参照してください。
次に、コンテンツを置き換えます App.css
このファイルは、Web ページのスタイルとレイアウトに使用され、次のコード スニペットの内容が含まれます。
今度はアプリをテストします。 次を実行してアプリケーションを開始します npm start
あなたの端末で。 次のスクリーンショットは、アプリと表示できるダッシュボードの例を示しています。
まとめ
この投稿では、AWS SDK を使用して QuickSight ダッシュボードを React アプリケーションに埋め込む方法を説明しました。 ダッシュボードを匿名ユーザーと共有すると、匿名ユーザーは AWS アカウントへのアクセスを許可せずにダッシュボードにアクセスできるようになります。 ダッシュボードを匿名で共有するには、次のような方法もあります。 ワンクリックで公開埋め込み.
プログラムに参加する(英語) クイックサイトコミュニティ 他の人と一緒に質問し、答え、学び、追加のリソースを探索することができます。
著者について
Adrianna AWS Global Financial Services のソリューションアーキテクトです。 2018 年 XNUMX 月から Amazon に入社し、同社の運営とクラウド ビジネスの両方に携わる機会がありました。 現在、彼女は、特定の顧客のユースケースに合わせた AWS サービスの革新的な使用法を実証するソフトウェア資産を構築しています。 彼女は日々、テクノロジーのさまざまな側面に積極的に取り組んでいますが、彼女の本当の情熱は、Web 開発と分析の組み合わせにあります。
- SEO を活用したコンテンツと PR 配信。 今日増幅されます。
- PlatoData.Network 垂直生成 Ai。 自分自身に力を与えましょう。 こちらからアクセスしてください。
- プラトアイストリーム。 Web3 インテリジェンス。 知識増幅。 こちらからアクセスしてください。
- プラトンESG。 自動車/EV、 カーボン、 クリーンテック、 エネルギー、 環境、 太陽、 廃棄物管理。 こちらからアクセスしてください。
- ブロックオフセット。 環境オフセット所有権の近代化。 こちらからアクセスしてください。
- 情報源: https://aws.amazon.com/blogs/big-data/level-up-your-react-app-with-amazon-quicksight-how-to-embed-your-dashboard-for-anonymous-access/
- :持っている
- :は
- :どこ
- ][p
- $UP
- 1
- 10
- 100
- 11
- 12
- 13
- 14
- 20
- 200
- 2018
- 26
- 30
- 3000
- 60
- 7
- 9
- a
- 私たちについて
- アクセス
- アクセス可能な
- 達成する
- Action
- 積極的に
- 加えます
- 追加されました
- 追加
- NEW
- 管理人
- 後
- すべて
- 許す
- 許可されて
- ことができます
- また
- Amazon
- アマゾンクイックサイト
- Amazon Webサービス
- an
- 分析論
- および
- 匿名の
- 匿名で
- 回答
- どれか
- API
- アプリ
- 申し込み
- 建築
- です
- 引数
- AS
- 側面
- 資産
- 割り当てられた
- 引き受けます
- At
- アタッチ
- 8月
- 著者
- 避ける
- 待つ
- AWS
- ベース
- 基礎
- BE
- なぜなら
- き
- 代わって
- 以下
- ボディ
- 両言語で
- ブラウザ
- ビルド
- 建物
- 構築します
- ビジネス
- ビジネス・インテリジェンス
- 焙煎が極度に未発達や過発達のコーヒーにて、クロロゲン酸の味わいへの影響は強くなり、金属を思わせる味わいと乾いたマウスフィールを感じさせます。
- by
- コール
- コール
- 缶
- 容量
- 例
- 生じました
- センター
- チャンス
- 変化する
- 変更
- 選択する
- クライアント
- クラウド
- コード
- カラー
- 組み合わせ
- 会社
- コンプリート
- 複雑な
- コンポーネント
- コンポーネント
- 領事
- 消費する
- 消費者
- コンテナ
- 含まれています
- コンテンツ
- 中身
- コンテキスト
- 作ります
- 作成した
- 作成
- CSS
- 電流プローブ
- 現在
- 顧客
- Customers
- daily
- ダッシュボード
- ダッシュボード
- データ
- デフォルト
- 定義済みの
- 遅らせる
- 実証します
- 展開します
- 配備
- 記載された
- 細部
- Developer
- 開発
- 異なります
- ディスプレイ
- DOM
- ドメイン
- ドメイン
- 行われ
- ドント
- デュレーション
- 間に
- e
- 効果
- 素子
- 埋め込みます
- 埋め込まれた
- 埋め込み
- enable
- 使用可能
- 従事する
- 入力します
- エンティティ
- 環境
- 同等の
- エラー
- エラー
- エーテル(ETH)
- イベント
- イベント
- 例
- 例
- 除く
- 例外
- 実行
- 既存の
- 説明
- 探る
- export
- 感じます
- File
- ファイナンシャル
- 金融業務
- 名
- フォロー中
- 無料版
- 頻繁に
- から
- function
- 機能的な
- さらに
- ゲートウェイ
- 生成する
- 与える
- グローバル
- グローバルファイナンシャル
- Go
- 付与
- グループ
- 持っていました
- 持ってる
- 持って
- ヘッダーの
- 高さ
- ことができます
- 彼女の
- 保持している
- フック
- ホバー
- 認定条件
- How To
- HTTP
- HTTPS
- i
- IAM
- ID
- 理想
- アイデンティティ
- イド
- if
- 即時の
- 実装
- import
- in
- 含まれました
- 個人
- 情報
- 初期
- 開始する
- 革新的な
- install
- 統合
- インテリジェンス
- 相互作用する
- に
- 紹介する
- 呼び出す
- 関係する
- IT
- JSON
- ただ
- キー
- 欠如
- 大
- 大規模
- 後で
- レイアウト
- LEARN
- レベル
- ある
- リスト
- ローディング
- ローカル
- ログ
- 見て
- メイン
- 作る
- 作成
- 義務的な
- マージン
- 一致
- メニュー
- 方法
- 分
- モード
- monthly
- 他には?
- の試合に
- しなければなりません
- 名
- ナビゲート
- ナビゲーション
- 必要
- ニーズ
- 新作
- 次の
- 通常の
- 今
- オブジェクト
- of
- 頻繁に
- on
- ONE
- 業務執行統括
- オプション
- オプション
- or
- オレンジ
- OS
- その他
- その他
- さもないと
- 私たちの
- 概要
- パッケージ
- ページ
- ペイン
- 部
- 情熱
- 実行する
- パーミッション
- 選ぶ
- プレースホルダー
- プラトン
- プラトンデータインテリジェンス
- プラトデータ
- お願いします
- 方針
- ポータル
- ポスト
- 強力な
- 前提条件
- 防ぐ
- 価格設定
- プロセス
- 生産
- プロジェクト
- 準備
- 代理
- 公共
- 購入
- 目的
- RE
- 反応する
- リーダー
- 読者
- 準備
- 推奨される
- 地域
- 削除済み
- レンダリング
- replace
- 要求
- リクエスト
- の提出が必要です
- リソースを追加する。
- リソース
- 応答
- return
- 収益
- 職種
- ルート
- ラン
- ランニング
- 規模
- シナリオ
- スクリーンショット
- SDDK
- 二番
- 秒
- セクション
- 選択
- サービス
- セッション
- セッション
- セッションに
- 落ち着く
- シェアする
- シェアリング
- 彼女
- すべき
- 表示する
- 示されました
- 示す
- 作品
- 同様の
- 簡単な拡張で
- 簡素化する
- から
- 小さい
- ソフトウェア
- 溶液
- ソリューション
- 一部
- すぐに
- 特定の
- 指定の
- ステージ
- start
- 都道府県
- ステートメント
- 手順
- ステップ
- 流れ
- 厳格な
- そのような
- 確か
- テーラード
- ターゲット
- テクノロジー
- ターミナル
- test
- テスト
- それ
- アプリ環境に合わせて
- それら
- その後
- そこ。
- したがって、
- この
- 時間
- 〜へ
- トリガー
- トリガ
- true
- 信頼されている
- 試します
- 順番
- 2
- 下
- 下線
- 更新版
- URL
- つかいます
- 中古
- ユーザー
- users
- 使用されます
- 値
- さまざまな
- バージョン
- 詳しく見る
- 訪問
- 欲しいです
- 方法
- we
- ウェブ
- ウェブ開発
- Webサービス
- ウェブサイト
- 歓迎
- WELL
- いつ
- たびに
- which
- 意志
- 以内
- 無し
- 貴社
- あなたの
- ゼファーネット