기계 번역으로 제공되는 번역입니다. 제공된 번역과 원본 영어의 내용이 상충하는 경우에는 영어 버전이 우선합니다.
로컬 Angular 애플리케이션에 Amazon QuickSight 대시보드 포함
작성자: Sean Griffin(AWS) 및 Milena Godau(AWS)
환경: PoC 또는 파일럿 | 기술: 웹 및 모바일 앱, 분석 | AWS 서비스: AWS Lambda, Amazon QuickSight, Amazon API Gateway |
요약
이 패턴은 개발 또는 테스트를 위해 Amazon QuickSight 대시보드를 로컬 호스팅 Angular 애플리케이션에 내장하는 지침을 제공합니다. 의 임베디드 분석 기능은 기본적으로 이 기능을 지원하지 QuickSight 않습니다. 기존 대시보드와 Angular에 대한 지식이 있는 QuickSight 계정이 필요합니다.
임베디드 QuickSight 대시보드를 사용하는 경우 일반적으로 대시보드를 보려면 웹 서버에서 애플리케이션을 호스팅해야 합니다. 이렇게 하면 모든 것이 올바르게 작동하는지 확인하기 위해 변경 내용을 웹 서버에 지속적으로 푸시해야 하기 때문에 개발이 더 어려워집니다. 이 패턴은 로컬 호스팅 서버를 실행하고 QuickSight 임베디드 분석을 사용하여 개발 프로세스를 더 쉽고 간소화하는 방법을 보여줍니다.
사전 조건 및 제한 사항
사전 조건
제한 사항
이 패턴은 ANONYMOUS (공개적으로 액세스할 수 있는) 인증 유형을 사용하여 QuickSight 대시보드를 내장하는 방법에 대한 지침을 제공합니다. AWS ID 및 액세스 관리(IAM)를 사용하거나 임베디드 대시보드에서 QuickSight 인증을 사용하는 경우 제공된 코드가 적용되지 않습니다. 하지만 에픽 섹션에서 Angular 애플리케이션을 호스팅하는 단계는 여전히 유효합니다.
ANONYMOUS 자격 증명 유형GetDashboardEmbedUrlAPI으로 를 사용하려면 QuickSight 용량 요금 플랜이 필요합니다.
버전
아키텍처
기술 스택
아키텍처
이 아키텍처에서 API 게이트웨이HTTPAPIs의 는 로컬 Angular 애플리케이션이 Lambda 함수를 호출할 수 있도록 합니다. Lambda 함수는 QuickSight 대시보드를 포함하기 URL 위해 를 반환합니다.
자동화 및 규모 조정
AWS CloudFormation 또는 AWS 서버리스 애플리케이션 모델(AWS )을 사용하여 백엔드 배포를 자동화할 수 있습니다SAM.
도구
AngularCLI는 명령줄 인터페이스 도구로, 명령 쉘에서 직접 Angular 애플리케이션을 초기화, 개발, 스캐폴드 및 유지 관리하는 데 사용합니다.
QuickSight 임베딩SDK은 QuickSight 대시보드를 에 임베딩하는 데 사용됩니다HTML.
mkcert는 로컬에서 신뢰할 수 있는 개발 인증서를 생성할 수 있는 간단한 도구입니다. 구성이 필요하지 않습니다. 는 대시보드 임베딩 HTTPS 요청만 QuickSight 허용하므로 mkcert가 필요합니다.
AWS 서비스
Amazon API Gateway는 모든 규모의 , 및 WebSocket APIs REST를 생성, 게시, 유지 관리HTTP, 모니터링 및 보호하기 위한 AWS 서비스입니다.
AWS Lambda는 서버를 프로비저닝하거나 관리하지 않고 코드 실행을 지원하는 컴퓨팅 서비스입니다. 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. 배포(Deploy)를 선택합니다. | 앱 개발자 |
대시보드 ID를 환경 변수로 추가합니다. | Lambda 함수에 DASHBOARD_ID를 환경 변수로 추가합니다. 구성 탭에서 환경 변수, 편집, 환경 변수 추가를 선택합니다. 키 DASHBOARD_ID을 가진 환경 변수를 추가합니다. 값을 가져오려면 에서 대시보드로 DASHBOARD_ID이동하여 브라우저의 UUID 끝에 URL 있는 를 QuickSight 복사합니다. 예를 들어 이 URL인 경우 의 <dashboard-id> 부분을 URL 키 값으로 https://us-east-1.quicksight.aws.amazon.com/sn/dashboards/<dashboard-id>지정합니다. 저장(Save)을 선택합니다.
| 앱 개발자 |
Lambda 함수에 대한 권한 추가 | Lambda 함수의 실행 역할을 수정하고 QuicksightGetDashboardEmbedUrl정책을 추가합니다. 구성 탭에서 권한을 선택한 다음, 역할 이름을 선택합니다. 정책 연결을 선택하고, QuicksightGetDashboardEmbedUrl을 검색하고, 해당 확인란을 선택한 다음, 정책 연결을 선택합니다.
| 앱 개발자 |
Lambda 함수를 테스트합니다. | 테스트 이벤트를 생성하고 실행합니다. 함수가 테스트 이벤트의 데이터를 전혀 사용하지 않으므로 “Hello World” 템플릿을 사용할 수 있습니다. 테스트 탭을 선택합니다. 테스트 이벤트 이름을 지정한 다음 저장을 선택합니다. Lambda 함수를 테스트하려면, 테스트를 선택합니다. 응답은 다음과 같습니다.
{
"statusCode": 200,
"url": "\"https://us-east-1.quicksight.aws.amazon.com/embed/f1acc0786687783b9a4543a05ba929b3a/dashboards/...
}
참고: 사전 조건 및 제한 섹션에서 언급한 대로 QuickSight 계정은 세션 용량 요금제에 따라 결정되어야 합니다. 그렇지 않으면 이 단계에서 오류 메시지가 표시됩니다. | 앱 개발자 |
API GatewayAPI에서 를 생성합니다. | API 게이트웨이 콘솔 에서 생성을 API선택한 다음 REST API, 빌드 를 선택합니다. 작업에서 메서드 생성을 선택합니다. 체크 표시를 선택하여 GET 를 선택하고 확인합니다. Lambda 함수를 통합 유형으로 선택합니다. Lambda 함수에 get-qs-embed-url을 입력합니다. 저장(Save)을 선택합니다. Lambda 함수에 대한 권한 추가 상자에서 확인을 선택합니다.
를 활성화합니다CORS. 를 배포합니다API. 작업 에서 배포를 API선택합니다. 배포 단계에서 [새 단계]를 선택합니다. 단계 이름에 dev를 입력합니다. [배포]를 선택합니다. 호출 URL을 복사합니다.
참고: my-qs-app.net은 어떠한 도메인이라도 될 수 있습니다. 다른 도메인 이름을 사용하려면 3단계에서 Access-Control-Allow-Origin 정보를 업데이트하고 이후 단계에서 my-qs-app.net을 변경해야 합니다. | 앱 개발자 |
| 작업 | 설명 | 필요한 기술 |
|---|
각도 를 사용하여 애플리케이션을 생성합니다CLI. | 애플리케이션을 생성합니다. ng new quicksight-app --defaults
cd quicksight-app/src/app
대시보드 구성 요소를 생성합니다. ng g c dashboard
src/environments/environment.ts 파일로 이동하여 환경 개체에 apiUrl: '<Invoke URL from previous steps>'를 추가합니다.
export const environment = {
production: false,
apiUrl: '<Invoke URL from previous steps>',
};
| 앱 개발자 |
QuickSight 포함 을 추가합니다SDK. | 프로젝트의 루트 폴더에서 다음 명령을 실행SDK하여 QuickSight 임베딩을 설치합니다. npm i amazon-quicksight-embedding-sdk
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 파일을 수정하여 대시보드 구성 요소를 로드하십시오. | src/app/app.component.html 파일 내용을 삭제합니다.
다음을 추가합니다. <app-dashboard></app-dashboard>
| 앱 개발자 |
app.module.ts 파일로 HttpClientModule 가져옵니다. | src/app/app.module.ts 파일 상단에 다음을 추가합니다.
import { HttpClientModule } from '@angular/common/http';
AppModule에 대해 imports에서 HttpClientModule을 추가합니다.
| 앱 개발자 |
| 작업 | 설명 | 필요한 기술 |
|---|
mkcert를 구성합니다. | 참고: 다음 명령은 Unix 또는 MacOS 시스템용입니다. Windows를 사용하는 경우 해당 echo 명령에 대한 추가 정보 섹션을 참고하십시오. 컴퓨터에 로컬 인증 기관(CA)을 생성합니다. mkcert -install
항상 로컬 PC로 리디렉션되도록 my-qs-app.net을 구성합니다. echo "127.0.0.1 my-qs-app.net" | sudo tee -a /private/etc/hosts
현재 위치가 Angular 프로젝트의 src 디렉터리에 있는지 확인합니다. mkcert my-qs-app.net 127.0.0.1
| 앱 개발자 |
도메인을 허용 QuickSight 하도록 를 구성합니다. | 에서 오른쪽 상단 모서리에서 이름을 QuickSight선택한 다음 Quicksight 관리 를 선택합니다. 도메인 및 임베딩으로 이동합니다. 허용된 도메인으로 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를 사용하는 경우, 관리자 권한으로 명령 프롬프트 창을 실행하고 다음 명령을 사용하여 항상 로컬 PC로 리디렉션되도록 my-qs-app.net을 구성합니다.
echo 127.0.0.1 my-qs-app.net >> %WINDIR%\System32\Drivers\Etc\Hosts
