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

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

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

由肖恩·格里芬 (AWS) 和 Milena Godau () 创作 AWS

环境：PoC 或试点

技术：Web 和移动应用程序；分析

AWS服务：AWSLambda；亚马逊；A QuickSight mazon Gateway API

Summary

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

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

先决条件和限制

先决条件

限制

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

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

版本

架构

技术堆栈

  • Angular 前端

  • AWSLambda 和 Ama API zon Gateway 后端

架构

在此架构中，API网关HTTPAPIs中的允许本地 Angular 应用程序调用 Lambda 函数。Lambda 函数返回URL用于嵌入仪表板的。 QuickSight

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

自动化和扩缩

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

工具

工具

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

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

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

AWS服务

  • Amazon API Gateway 是一项用于 WebSocket APIs在任何规模上创建、发布RESTHTTP、维护、监控和保护的AWS服务。 

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

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

操作说明

任务描述所需技能

创建 EmbedUrl 策略。

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

{
      "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内容。例如，如果URL是https://us-east-1.quicksight.aws.amazon.com/sn/dashboards/<dashboard-id>，则将的<dashboard-id>部分指定URL为键值。

  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 账户必须使用会话容量定价计划。否则，此步骤会显示一条错误消息。

应用程序开发人员

在 Gate API way API 中创建。

  1. 在API网关控制台上，选择创建 API，然后选择RESTAPI构建。

    • 对于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。

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

使用 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. SDK通过在 QuickSight 项目的根文件夹中运行以下命令来安装 Embedding。

    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。

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

配置 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

这将使用您之前创建的自定义证书启用安全套接字层 (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