选择您的 Cookie 首选项

我们使用必要 Cookie 和类似工具提供我们的网站和服务。我们使用性能 Cookie 收集匿名统计数据，以便我们可以了解客户如何使用我们的网站并进行改进。必要 Cookie 无法停用，但您可以单击“自定义”或“拒绝”来拒绝性能 Cookie。

如果您同意，AWS 和经批准的第三方还将使用 Cookie 提供有用的网站功能、记住您的首选项并显示相关内容，包括相关广告。要接受或拒绝所有非必要 Cookie，请单击“接受”或“拒绝”。要做出更详细的选择，请单击“自定义”。

首选项
联系我们
反馈
AWS Documentation
创建 AWS 账户

在本地 Angular 应用程序中嵌入亚马逊 QuickSight 控制面板

PDF
聚焦模式
在本地 Angular 应用程序中嵌入亚马逊 QuickSight 控制面板 - AWS Prescriptive Guidance
摘要先决条件和限制架构工具操作说明相关资源其他信息

本文属于机器翻译版本。若本译文内容与英语原文存在差异，则一律以英文原文为准。

本文属于机器翻译版本。若本译文内容与英语原文存在差异，则一律以英文原文为准。

创建者：Sean Griffin (AWS) 和 Milena Godau (AWS)

摘要

此模式为将 Amazon QuickSight 控制面板嵌入到本地托管的 Angular 应用程序中进行开发或测试提供了指导。中的嵌入式分析功能本身 QuickSight 不支持此功能。它需要一个拥有现有仪表板和Angular知识的 QuickSight 帐户。

使用嵌入式 QuickSight 仪表板时，通常必须将应用程序托管在 Web 服务器上才能查看仪表板。这使得开发变得更加困难，因为您必须不断地将更改推送到 Web 服务器以确保一切正常运行。此模式展示了如何运行本地托管的服务器，以及如何使用 QuickSight 嵌入式分析来简化开发流程。

先决条件和限制

先决条件

限制

  • 此模式为使用ANONYMOUS（可公开访问的）身份验证类型嵌入 QuickSight 仪表板提供了指导。如果您使用的是 AWS Identity and Access Management (IAM) 或使用嵌入式控制面板进行 QuickSight 身份验证，则提供的代码将不适用。但是，操作说明部分中托管 Angular 应用程序的步骤仍然有效。

  • 将 GetDashboardEmbedUrlAPI 与ANONYMOUS身份类型一起使用需要 QuickSight 容量定价计划。

版本

架构

技术堆栈

  • Angular 前端

  • AWS Lambda 和 Amazon API Gateway 后端

架构

在这种架构中，API Gateway APIs 中的 HTTP 使本地 Angular 应用程序能够调用 Lambda 函数。Lambda 函数返回用于嵌入控制面板的网址。 QuickSight

在本地 Angular 应用程序中嵌入 QuickSight 仪表板的架构

自动化和扩缩

您可以使用 AWS CloudFormation 或 AWS 无服务器应用程序模型 (AWS SAM) Model 自动进行后端部署。

工具

工具

  • Angular CLI 是命令行界面工具，用于直接从命令 Shell 初始化、开发、搭建和维护 Angular 应用程序。

  • QuickSight 嵌入 SDK 用于将 QuickSight 仪表板嵌入到您的 HTML 中。

  • mkcert 是用于创建本地受信任开发证书的简单工具。它不需要配置。mkcert 是必需的，因为只 QuickSight 允许 HTTPS 请求嵌入仪表板。

Amazon Web Services

  • A@@ mazon API Gateway 是一项 AWS 服务，用于创建、发布、维护、监控和保护任何规模的 RES WebSocket APIs T、HTTP。 

  • AWS Lambda 是一项计算服务，支持无需预置或管理服务器即可运行代码。只有在需要时 Lambda 才运行您的代码，并且能自动扩缩，从每天几个请求扩展到每秒数千个请求。您只需为消耗的计算时间付费 - 代码未运行时不产生费用。 

  • Amazon QuickSight 是一项商业分析服务，用于构建可视化效果、执行临时分析以及从数据中获取业务见解。

操作说明

Task描述所需技能

创建 EmbedUrl 策略。

创建名为的 IAM 策略 QuicksightGetDashboardEmbedUrl，该策略具有以下属性。

{
      "Version": "2012-10-17",
      "Statement": [
            {
                  "Effect": "Allow",
                  "Action": [
                        "quicksight:GetDashboardEmbedUrl",
                        "quickSight:GetAnonymousUserEmbedUrl"
                  ],
                  "Resource": "*"
            }
      ]
}
AWS 管理员

创建 Lambda 函数。

1. 在 Lambda 控制台上，打开函数页面。

2. 选择创建函数。

3. 选择从头开始创作。

4. 对于函数名称，请输入 get-qs-embed-url。

5. 对于 Runtime（运行时），选择 Python 3.9。

6. 选择创建函数。

7. 在代码选项卡上，将以下代码复制到 Lambda 函数中。

import json
import boto3
from botocore.exceptions import ClientError
import time
from os import environ


qs = boto3.client('quicksight',region_name='us-east-1')
sts = boto3.client('sts')

ACCOUNT_ID = boto3.client('sts').get_caller_identity().get('Account')
DASHBOARD_ID = environ['DASHBOARD_ID']

def getDashboardURL(accountId, dashboardId, quicksightNamespace, resetDisabled, undoRedoDisabled):
  try:
    response = qs.get_dashboard_embed_url(
      AwsAccountId = accountId,
      DashboardId = dashboardId,
      Namespace = quicksightNamespace,
      IdentityType = 'ANONYMOUS',
      SessionLifetimeInMinutes = 600,
      UndoRedoDisabled = undoRedoDisabled,
      ResetDisabled = resetDisabled
    )
    return response
          
  except ClientError as e:
    print(e)
    return "Error generating embeddedURL: " + str(e)


def lambda_handler(event, context):
  url = getDashboardURL(ACCOUNT_ID, DASHBOARD_ID, "default", True, True)['EmbedUrl']
  return {
      'statusCode': 200,
      'url': url
  }

8. 选择部署。

应用程序开发人员

将控制面板 ID 添加为环境变量。

将 DASHBOARD_ID 作为环境变量添加到您的 Lambda 函数中：

  1. 在配置选项卡，选择环境变量、编辑、添加环境变量。

  2. 添加含 DASHBOARD_ID 键的环境变量。

  3. 要获取的值DASHBOARD_ID，请导航到您的控制面板， QuickSight 然后在浏览器中复制网址末尾的 UUID。例如，如果 URL 是 https://us-east-1.quicksight.aws.amazon.com/sn/dashboards/<dashboard-id>，则将 URL 的 <dashboard-id> 部分指定为密钥值。

  4. 选择保存。

应用程序开发人员

添加 Lambda 函数的权限。

修改 Lambda 函数的执行角色并向其添加QuicksightGetDashboardEmbedUrl策略。

  1. 在配置选项卡，选择权限，然后选择角色名称。

  2. 选择附加策略，搜索 QuicksightGetDashboardEmbedUrl，选中其复选框，然后选择附加策略。

应用程序开发人员

测试 Lambda 函数。

创建和运行测试事件。您可以使用 Hello World 模板，因为该函数不会使用测试事件中的任何数据。

  1. 选择测试选项卡。

  2. 为您的测试事件命名，然后选择保存。

  3. 要测试您的 Lambda 函数，请选择测试。响应结果应如下所示。

{
  "statusCode": 200,
  "url": "\"https://us-east-1.quicksight.aws.amazon.com/embed/f1acc0786687783b9a4543a05ba929b3a/dashboards/...
}
注意

如前提条件和限制部分所述，您的 QuickSight 账户必须使用会话容量定价计划。否则，此步骤会显示一条错误消息。

应用程序开发人员

在 API Gateway 中创建一个 API。

  1. 在 API Gateway 控制台上，选择创建 API，然后选择 REST API，构建。

    • 对于 API 名称，请输入 qs-embed-api。

    • 选择创建 API。

  2. 在操作中，选择创建方法。

    • 选择 GET，并通过选中复选标记进行确认。

    • 选择 Lambda 函数作为集成类型。

    • 对于 Lambda 函数，请输入 get-qs-embed-url。

    • 选择保存。

    • 在向 Lambda 函数添加权限框中，选择确定。

  3. 启用 CORS。

    • 在操作中，选择启用 CORS。

    • 对于 Access-Control-Allow-Origin，请输入 'https://my-qs-app.net:4200'。

    • 选择启用 CORS 并替换现有 CORS 标头，然后确认。

  4. 部署 API。

    • 对于操作，请选择部署 API。

    • 对于部署阶段，选择[新阶段]。

    • 对于阶段名称，输入 dev。

    • 选择部署。

    • 复制调用 URL。

注意

my-qs-app.net可以是任何域。如果要使用其他域名，请务必更新步骤 3 中的 Access-Control-Allow-Origin 信息，并在后续步骤中更改 my-qs-app.net。

应用程序开发人员

生成 EmbedURL

Task描述所需技能

创建 EmbedUrl 策略。

创建名为的 IAM 策略 QuicksightGetDashboardEmbedUrl，该策略具有以下属性。

{
      "Version": "2012-10-17",
      "Statement": [
            {
                  "Effect": "Allow",
                  "Action": [
                        "quicksight:GetDashboardEmbedUrl",
                        "quickSight:GetAnonymousUserEmbedUrl"
                  ],
                  "Resource": "*"
            }
      ]
}
AWS 管理员

创建 Lambda 函数。

1. 在 Lambda 控制台上，打开函数页面。

2. 选择创建函数。

3. 选择从头开始创作。

4. 对于函数名称，请输入 get-qs-embed-url。

5. 对于 Runtime（运行时），选择 Python 3.9。

6. 选择创建函数。

7. 在代码选项卡上，将以下代码复制到 Lambda 函数中。

import json
import boto3
from botocore.exceptions import ClientError
import time
from os import environ


qs = boto3.client('quicksight',region_name='us-east-1')
sts = boto3.client('sts')

ACCOUNT_ID = boto3.client('sts').get_caller_identity().get('Account')
DASHBOARD_ID = environ['DASHBOARD_ID']

def getDashboardURL(accountId, dashboardId, quicksightNamespace, resetDisabled, undoRedoDisabled):
  try:
    response = qs.get_dashboard_embed_url(
      AwsAccountId = accountId,
      DashboardId = dashboardId,
      Namespace = quicksightNamespace,
      IdentityType = 'ANONYMOUS',
      SessionLifetimeInMinutes = 600,
      UndoRedoDisabled = undoRedoDisabled,
      ResetDisabled = resetDisabled
    )
    return response
          
  except ClientError as e:
    print(e)
    return "Error generating embeddedURL: " + str(e)


def lambda_handler(event, context):
  url = getDashboardURL(ACCOUNT_ID, DASHBOARD_ID, "default", True, True)['EmbedUrl']
  return {
      'statusCode': 200,
      'url': url
  }

8. 选择部署。

应用程序开发人员

将控制面板 ID 添加为环境变量。

将 DASHBOARD_ID 作为环境变量添加到您的 Lambda 函数中：

  1. 在配置选项卡，选择环境变量、编辑、添加环境变量。

  2. 添加含 DASHBOARD_ID 键的环境变量。

  3. 要获取的值DASHBOARD_ID，请导航到您的控制面板， QuickSight 然后在浏览器中复制网址末尾的 UUID。例如，如果 URL 是 https://us-east-1.quicksight.aws.amazon.com/sn/dashboards/<dashboard-id>，则将 URL 的 <dashboard-id> 部分指定为密钥值。

  4. 选择保存。

应用程序开发人员

添加 Lambda 函数的权限。

修改 Lambda 函数的执行角色并向其添加QuicksightGetDashboardEmbedUrl策略。

  1. 在配置选项卡，选择权限，然后选择角色名称。

  2. 选择附加策略，搜索 QuicksightGetDashboardEmbedUrl，选中其复选框，然后选择附加策略。

应用程序开发人员

测试 Lambda 函数。

创建和运行测试事件。您可以使用 Hello World 模板，因为该函数不会使用测试事件中的任何数据。

  1. 选择测试选项卡。

  2. 为您的测试事件命名，然后选择保存。

  3. 要测试您的 Lambda 函数，请选择测试。响应结果应如下所示。

{
  "statusCode": 200,
  "url": "\"https://us-east-1.quicksight.aws.amazon.com/embed/f1acc0786687783b9a4543a05ba929b3a/dashboards/...
}
注意

如前提条件和限制部分所述，您的 QuickSight 账户必须使用会话容量定价计划。否则，此步骤会显示一条错误消息。

应用程序开发人员

在 API Gateway 中创建一个 API。

  1. 在 API Gateway 控制台上，选择创建 API，然后选择 REST API，构建。

    • 对于 API 名称，请输入 qs-embed-api。

    • 选择创建 API。

  2. 在操作中，选择创建方法。

    • 选择 GET，并通过选中复选标记进行确认。

    • 选择 Lambda 函数作为集成类型。

    • 对于 Lambda 函数，请输入 get-qs-embed-url。

    • 选择保存。

    • 在向 Lambda 函数添加权限框中，选择确定。

  3. 启用 CORS。

    • 在操作中，选择启用 CORS。

    • 对于 Access-Control-Allow-Origin，请输入 'https://my-qs-app.net:4200'。

    • 选择启用 CORS 并替换现有 CORS 标头，然后确认。

  4. 部署 API。

    • 对于操作，请选择部署 API。

    • 对于部署阶段，选择[新阶段]。

    • 对于阶段名称，输入 dev。

    • 选择部署。

    • 复制调用 URL。

注意

my-qs-app.net可以是任何域。如果要使用其他域名，请务必更新步骤 3 中的 Access-Control-Allow-Origin 信息，并在后续步骤中更改 my-qs-app.net。

应用程序开发人员
Task描述所需技能

通过 Angular CLI 创建应用程序。

  1. 创建应用程序。

    ng new quicksight-app --defaults
cd quicksight-app/src/app

  2. 创建控制面板组件。

    ng g c dashboard

  3. 导航到您的 src/environments/environment.ts 文件并将 apiUrl: '<Invoke URL from previous steps>' 添加到环境对象。

    export const environment = {
  production: false,
  apiUrl: '<Invoke URL from previous steps>',
};
应用程序开发人员

添加 QuickSight 嵌入式 SDK。

  1. 通过在 QuickSight 项目的根文件夹中运行以下命令来安装 Embedding SDK。

    npm i amazon-quicksight-embedding-sdk

  2. 在 src 文件夹中，创建一个使用以下内容的新 decl.d.ts 文件。

    declare module 'amazon-quicksight-embedding-sdk';
应用程序开发人员

将代码添加到您的 dashboard.component.ts 文件中。

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import * as QuicksightEmbedding from 'amazon-quicksight-embedding-sdk';
import { environment } from "../../environments/environment";
import { take } from 'rxjs';
import { EmbeddingContext } from 'amazon-quicksight-embedding-sdk/dist/types';
import { createEmbeddingContext } from 'amazon-quicksight-embedding-sdk';

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.scss']
})
export class DashboardComponent implements OnInit {

  constructor(private http: HttpClient) { }

  loadingError = false;
  dashboard: any;

  ngOnInit() {
    this.GetDashboardURL();
  }
 
  public GetDashboardURL() {
    this.http.get(environment.apiUrl)
    .pipe(
      take(1),
    )
    .subscribe((data: any) => this.Dashboard(data.url));
  }

  public async Dashboard(embeddedURL: any) {
    var containerDiv = document.getElementById("dashboardContainer") || '';
    const frameOptions = {
      url: embeddedURL,
      container: containerDiv,
      height: "850px",
      width: "100%",
      resizeHeightOnSizeChangedEvent: true,
  }
    const embeddingContext: EmbeddingContext = await createEmbeddingContext();
    this.dashboard = embeddingContext.embedDashboard(frameOptions);
  }
}
应用程序开发人员

将代码添加到您的 dashboard.component.html 文件中。

将以下代码添加到您的 src/app/dashboard/dashboard.component.html文件。

<div id="dashboardContainer"></div>
应用程序开发人员

修改您的 app.component.html 文件，以加载您的控制面板组件。

  1. 删除 src/app/app.component.html 文件的内容。

  2. 添加以下内容。

    <app-dashboard></app-dashboard>
应用程序开发人员

导 HttpClientModule 入到你的 app.module.ts 文件中。

  1. 在 src/app/app.module.ts 文件顶部，添加以下内容。

    import { HttpClientModule } from '@angular/common/http';

  2. 在 imports 数组中为您的 AppModule 添加 HttpClientModule。

应用程序开发人员

创建 Angular 应用程序

Task描述所需技能

通过 Angular CLI 创建应用程序。

  1. 创建应用程序。

    ng new quicksight-app --defaults
cd quicksight-app/src/app

  2. 创建控制面板组件。

    ng g c dashboard

  3. 导航到您的 src/environments/environment.ts 文件并将 apiUrl: '<Invoke URL from previous steps>' 添加到环境对象。

    export const environment = {
  production: false,
  apiUrl: '<Invoke URL from previous steps>',
};
应用程序开发人员

添加 QuickSight 嵌入式 SDK。

  1. 通过在 QuickSight 项目的根文件夹中运行以下命令来安装 Embedding SDK。

    npm i amazon-quicksight-embedding-sdk

  2. 在 src 文件夹中，创建一个使用以下内容的新 decl.d.ts 文件。

    declare module 'amazon-quicksight-embedding-sdk';
应用程序开发人员

将代码添加到您的 dashboard.component.ts 文件中。

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import * as QuicksightEmbedding from 'amazon-quicksight-embedding-sdk';
import { environment } from "../../environments/environment";
import { take } from 'rxjs';
import { EmbeddingContext } from 'amazon-quicksight-embedding-sdk/dist/types';
import { createEmbeddingContext } from 'amazon-quicksight-embedding-sdk';

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.scss']
})
export class DashboardComponent implements OnInit {

  constructor(private http: HttpClient) { }

  loadingError = false;
  dashboard: any;

  ngOnInit() {
    this.GetDashboardURL();
  }
 
  public GetDashboardURL() {
    this.http.get(environment.apiUrl)
    .pipe(
      take(1),
    )
    .subscribe((data: any) => this.Dashboard(data.url));
  }

  public async Dashboard(embeddedURL: any) {
    var containerDiv = document.getElementById("dashboardContainer") || '';
    const frameOptions = {
      url: embeddedURL,
      container: containerDiv,
      height: "850px",
      width: "100%",
      resizeHeightOnSizeChangedEvent: true,
  }
    const embeddingContext: EmbeddingContext = await createEmbeddingContext();
    this.dashboard = embeddingContext.embedDashboard(frameOptions);
  }
}
应用程序开发人员

将代码添加到您的 dashboard.component.html 文件中。

将以下代码添加到您的 src/app/dashboard/dashboard.component.html文件。

<div id="dashboardContainer"></div>
应用程序开发人员

修改您的 app.component.html 文件，以加载您的控制面板组件。

  1. 删除 src/app/app.component.html 文件的内容。

  2. 添加以下内容。

    <app-dashboard></app-dashboard>
应用程序开发人员

导 HttpClientModule 入到你的 app.module.ts 文件中。

  1. 在 src/app/app.module.ts 文件顶部，添加以下内容。

    import { HttpClientModule } from '@angular/common/http';

  2. 在 imports 数组中为您的 AppModule 添加 HttpClientModule。

应用程序开发人员
Task描述所需技能

配置 mkcert。

注意

以下命令适用于 Unix 或 macOS 计算机。如果您使用的是 Windows，请参阅其他信息部分了解等效的 echo 命令。

  1. 在您的计算机创建本地证书颁发机构 (CA)。

    mkcert -install

  2. 配置 my-qs-app.net，以始终重定向到本地 PC。

    echo "127.0.0.1 my-qs-app.net" | sudo tee -a /private/etc/hosts

  3. 确保您位于 Angular 项目的 src 目录中。

    mkcert my-qs-app.net 127.0.0.1
应用程序开发人员

配置 QuickSight 为允许您的域名。

  1. 在中 QuickSight，在右上角选择您的姓名，然后选择 “管理 Quicksight”。

  2. 导航至域和嵌入。

  3. 添加 https://my-qs-app.net:4200 作为允许的域。

AWS 管理员

测试解决方案。

运行以下命令，启动本地 Angular 开发服务器。

ng serve --host my-qs-app.net --port 4200 --ssl --ssl-key "./src/my-qs-app.net-key.pem" --ssl-cert "./src/my-qs-app.net.pem" -o

这将启用您之前创建的自定义证书的 Secure Sockets Layer (SSL)。

构建完成后，它会打开一个浏览器窗口，你可以查看在 Angular 中本地托管的嵌入式 QuickSight 仪表板。

应用程序开发人员

托管 Angular 应用程序

Task描述所需技能

配置 mkcert。

注意

以下命令适用于 Unix 或 macOS 计算机。如果您使用的是 Windows，请参阅其他信息部分了解等效的 echo 命令。

  1. 在您的计算机创建本地证书颁发机构 (CA)。

    mkcert -install

  2. 配置 my-qs-app.net，以始终重定向到本地 PC。

    echo "127.0.0.1 my-qs-app.net" | sudo tee -a /private/etc/hosts

  3. 确保您位于 Angular 项目的 src 目录中。

    mkcert my-qs-app.net 127.0.0.1
应用程序开发人员

配置 QuickSight 为允许您的域名。

  1. 在中 QuickSight，在右上角选择您的姓名，然后选择 “管理 Quicksight”。

  2. 导航至域和嵌入。

  3. 添加 https://my-qs-app.net:4200 作为允许的域。

AWS 管理员

测试解决方案。

运行以下命令，启动本地 Angular 开发服务器。

ng serve --host my-qs-app.net --port 4200 --ssl --ssl-key "./src/my-qs-app.net-key.pem" --ssl-cert "./src/my-qs-app.net.pem" -o

这将启用您之前创建的自定义证书的 Secure Sockets Layer (SSL)。

构建完成后，它会打开一个浏览器窗口，你可以查看在 Angular 中本地托管的嵌入式 QuickSight 仪表板。

应用程序开发人员

相关资源

其他信息

如果您使用的是 Windows，请以管理员身份运行 Command Prompt 窗口，然后使用以下命令配置 my-qs-app.net 为始终重定向到本地 PC。 

echo 127.0.0.1 my-qs-app.net >> %WINDIR%\System32\Drivers\Etc\Hosts

本页内容

隐私网站条款Cookie 首选项
© 2025, Amazon Web Services, Inc. 或其附属公司。保留所有权利。