Amazon Cognito 및 IaC 자동화를 사용하여 Amazon Quick Sight 시각적 구성 요소를 웹 애플리케이션에 임베드 - 권장 가이드
요약사전 조건 및 제한 사항아키텍처도구모범 사례에픽문제 해결관련 리소스

기계 번역으로 제공되는 번역입니다. 제공된 번역과 원본 영어의 내용이 상충하는 경우에는 영어 버전이 우선합니다.

Amazon Cognito 및 IaC 자동화를 사용하여 Amazon Quick Sight 시각적 구성 요소를 웹 애플리케이션에 임베드

Ishita Gupta 및 Srishti Wadhwa, Amazon Web Services

요약

이 패턴은 간소화된 Amazon Cognito 인증과 함께 등록된 사용자 임베딩을 사용하여 Amazon Quick Sight 시각적 구성 요소를 React 애플리케이션에 임베딩하기 위한 특수한 접근 방식을 제공합니다. 그런 다음 이러한 리소스는 코드형 인프라(IaC) 템플릿을 통해 배포됩니다. 기존 대시보드 임베딩과 달리이 솔루션은 React 애플리케이션에 직접 통합하기 위해 특정 차트와 그래프를 격리하여 성능과 사용자 경험을 모두 크게 개선합니다.

아키텍처는 Amazon Cognito 사용자 관리와 Quick Sight 권한 간에 효율적인 인증 흐름을 설정합니다. 사용자는 Amazon Cognito를 통해 인증하고 Quick Sight의 대시보드 공유 규칙에 따라 승인된 시각화에 액세스합니다. 이 간소화된 접근 방식을 사용하면 강력한 보안 제어를 유지하면서 Quick Sight 콘솔에 직접 액세스할 필요가 없습니다.

전체 환경은 다음을 포함하여 필요한 모든 인프라 구성 요소를 프로비저닝하는 단일 AWS CloudFormation 템플릿을 통해 배포됩니다.

  • AWS Lambda 및 Amazon API Gateway를 사용하는 서버리스 백엔드

  • Amazon CloudFront, Amazon Simple Storage Service(Amazon S3) 및를 통한 보안 프런트엔드 호스팅 AWS WAF

  • Amazon Cognito를 사용한 자격 증명 관리

모든 구성 요소는 최소 권한 AWS Identity and Access Management (IAM) 정책, AWS WAF 보호 및 end-to-end 암호화를 사용하는 보안 모범 사례에 따라 구성됩니다.

이 솔루션은 사용자 액세스에 대한 세분화된 제어를 유지하면서 애플리케이션에 안전한 대화형 분석을 통합하려는 개발 팀과 조직에 적합합니다. 이 솔루션은 AWS 관리형 서비스 및 자동화를 사용하여 임베딩 프로세스를 간소화하고 보안을 강화하며 진화하는 비즈니스 요구 사항을 충족할 수 있는 확장성을 보장합니다.

대상 대상 및 사용 사례:

  • 분석을 React 앱에 포함하려는 프런트엔드 개발자

  • 사용자별 또는 역할 기반 데이터 시각화를 제공하려는 서비스형 소프트웨어(SaaS) 제품 팀

  • AWS 분석을 사용자 지정 포털에 통합하는 데 관심이 있는 솔루션 아키텍트

  • 전체 대시보드 액세스 없이 인증된 사용자에게 시각적 객체를 노출하려는 비즈니스 인텔리전스(BI) 개발자

  • 내부 도구 내에 대화형 Quick Sight 차트를 포함하려는 엔터프라이즈 팀

사전 조건 및 제한 사항

사전 조건 

이 패턴을 성공적으로 구현하려면 다음이 마련되어 있어야 합니다.

  • 활성 AWS 계정 - CloudFormation 스택을 배포하고 Lambda, API Gateway, Amazon Cognito, CloudFront 및 Amazon S3 리소스를 생성할 수 있는 권한이 AWS 계정 있는 입니다.

  • Amazon Quick Sight 계정 - 시각적 객체가 포함된 대시보드가 하나 이상 있는 활성 Quick Sight 계정입니다. 설정 지침은 Amazon Quick Suite 설명서의 자습서: 샘플 데이터를 사용하여 Amazon Quick Sight 대시보드 생성을 참조하세요.

  • 개발 환경은 다음으로 구성됩니다.

    • Node.js(버전 16 이상)

    • npm 또는 yarn 설치됨

    • Vite를 React 빌드 도구로 사용

    • React(버전 19.1.1)

  • 대시보드 공유 - 대시보드는 Quick Sight에서 공유해야 하며 구현자는 로그인하여 임베디드 시각적 객체 또는 대시보드에 액세스해야 합니다.

제한 사항

  • 이 패턴은 등록된 사용자 임베딩 방법을 사용합니다.이 방법을 사용하려면 구현자에게 활성 Quick Sight 계정이 있어야 합니다.

  • 액세스는이 패턴을 구현하는 인증된 Quick Sight 사용자와 명시적으로 공유되는 대시보드 및 시각적 객체로 제한됩니다. 구현자에게 올바른 액세스 권한이 없는 경우 임베드 URL 생성이 실패하고 시각적 객체가 로드되지 않습니다.

  • CloudFormation 스택은 AWS 리전 Quick Sight, API Gateway 및 Amazon Cognito가 지원되는에 배포해야 합니다. 리전 가용성은 리전별AWS 서비스 섹션을 참조하세요.

제품 버전

아키텍처

대상 아키텍처

다음 다이어그램은 이 패턴의 워크플로와 구성 요소를 보여 줍니다.

Quick Sight 시각적 객체를 React 애플리케이션에 임베딩하기 위한 아키텍처 및 워크플로입니다.

이 워크플로에서 다음을 수행합니다.

  1. 사용자가 애플리케이션에 액세스합니다. 사용자는 브라우저를 사용하여 React 웹 애플리케이션을 엽니다. 요청은 애플리케이션의 콘텐츠 전송 네트워크 역할을 하는 CloudFront 배포로 라우팅됩니다.

  2. 는 AWS WAF 악성 요청을 필터링합니다. 요청이 CloudFront에 도달하기 전에 트래픽을 전달 AWS WAF하고 보안 규칙에 따라 악의적이거나 의심스러운 요청을 차단 AWS WAF 합니다.

  3. Amazon S3는 정적 파일을 제공합니다. 요청이 정상이면 CloudFront는 오리진 액세스 제어(OAC)를 사용하여 프라이빗 S3 버킷에서 정적 프런트엔드 자산(HTML, JS, CSS)을 검색하고 브라우저로 전송합니다.

  4. 사용자가 로그인합니다. 애플리케이션을 로드한 후 사용자는 Amazon Cognito는 사용자를 인증하고 승인된 API 액세스를 위해 보안 JSON 웹 토큰(JWT)을 반환합니다.

  5. 애플리케이션은 API를 요청합니다. 로그인 후 React 애플리케이션은 API Gateway의 /get-embed-url 엔드포인트에 대한 보안 호출을 수행하고 인증을 위해 요청 헤더에 JWT 토큰을 전달합니다.

  6. 토큰이 검증되었습니다. API Gateway는 Amazon Cognito 권한 부여자를 사용하여 토큰을 검증합니다. 토큰이 유효하면 요청이 진행되고, 그렇지 않으면 401(무단) 응답으로 거부됩니다.

  7. 요청은 처리를 위해 Lambda로 전달됩니다. 그런 다음 검증된 요청이 백엔드 Lambda 함수로 전달됩니다. 이 함수는 요청된 Quick Sight 시각적 객체에 대한 임베드 URL을 생성하는 역할을 합니다.

  8. Lambda는 Quick Sight에서 임베드 URL을 생성합니다. IAM은 적절한 권한이 있는 IAM 역할을 사용하여 Quick Sight GenerateEmbedUrlForRegisteredUser API를 호출하여 안전한 사용자 범위 시각적 URL을 생성합니다.

  9. Lambda는 임베드 URL을 API Gateway에 반환합니다. Lambda는 생성된 임베드 URL을 JSON 응답의 일부로 API Gateway로 다시 보냅니다. 그런 다음이 응답은 프런트엔드로 전송할 준비가 됩니다.

  10. 임베드 URL이 브라우저로 전송됩니다. 임베드 URL은 API 응답으로 브라우저에 반환됩니다.

  11. 시각적 객체가 사용자에게 표시됩니다. React 애플리케이션은 응답을 수신하고 Quick Sight 임베딩 SDK를 사용하여 사용자에게 특정 시각적 객체를 렌더링합니다.

자동화 및 규모 조정

백엔드 및 프런트엔드 배포는 Amazon Cognito CloudFormation, Lambda, API Gateway, Amazon S3, CloudFront, AWS WAF IAM 역할, Amazon CloudWatch를 포함한 모든 필수 AWS 리소스를 단일 배포로 프로비저닝하는를 사용하여 완전히 자동화됩니다. Amazon Cognito

이 자동화는 모든 환경에서 일관되고 반복 가능한 인프라를 보장합니다. 모든 구성 요소는 자동으로 조정됩니다. Lambda는 함수 호출에 맞게 조정하고, CloudFront는 캐시된 콘텐츠를 전역적으로 제공하며, API Gateway는 수신 요청에 따라 조정됩니다.

도구

AWS 서비스

  • Amazon Quick Sight는 대화형 대시보드 및 시각적 객체를 생성, 관리 및 임베드하는 데 도움이 되는 클라우드 네이티브 비즈니스 인텔리전스 서비스입니다.

  • Amazon API Gateway는 React 애플리케이션과 백엔드 서비스 간의 브리지 역할을 하는 APIs를 관리합니다.

  • AWS Lambda는이 패턴이 안전한 Quick Sight 임베드 URLs 동적으로 생성하는 데 사용하는 서버리스 컴퓨팅 서비스이며 요청에 따라 자동으로 확장됩니다.

  • Amazon Cognito는 사용자에게 인증 및 권한 부여를 제공하고 API 액세스를 위한 보안 토큰을 발급합니다.

  • Amazon S3는이 패턴에 대한 정적 프런트엔드 자산을 호스팅하고 CloudFront를 통해 안전하게 제공합니다.

  • Amazon CloudFront는 지연 시간이 짧은 전 세계 프런트엔드 콘텐츠를 제공하며 트래픽 필터링을 AWS WAF 위해와 통합됩니다.

  • AWS WAF는 보안 규칙 및 속도 제한을 적용하여 악의적인 트래픽으로부터 웹 애플리케이션을 보호합니다.

  • AWS CloudFormation는 단일 배포에서 모든 애플리케이션 리소스의 프로비저닝 및 구성을 자동화합니다.

  • Amazon CloudWatch는 모니터링 및 문제 해결을 AWS WAF 위해 Lambda, API Gateway 및에서 로그와 지표를 수집합니다.

개발 도구

  • React JS는이 패턴이 웹 애플리케이션을 구축하고 임베디드 Quick Sight 시각적 객체를 통합하는 데 사용하는 프런트엔드 프레임워크입니다.

  • Vite는 React 애플리케이션의 빠른 개발 및 최적화된 프로덕션 빌드에 사용되는 빌드 도구입니다.

  • Quick Sight 임베딩 SDK는 Quick Sight 시각적 객체를 React 애플리케이션에 쉽게 임베딩하고 애플리케이션과 시각적 객체 간의 원활한 상호 작용을 지원합니다.

코드 리포지토리

이 패턴의 코드는 React 리포지토리의 GitHub Amazon Quick Sight Visual Embedding에서 사용할 수 있습니다. https://github.com/aws-samples/sample-quicksight-visual-embedding

모범 사례

이 패턴은 다음 보안 모범 사례를 자동으로 구현합니다.

  • 선택적 다중 인증(MFA)과 함께 JWT 기반 인증에 Amazon Cognito 사용자 풀을 사용합니다.

  • Amazon Cognito 권한 부여자를 사용하여 APIs를 보호하고 모든 서비스에 최소 권한 IAM 정책을 적용합니다.

  • Quick Sight 등록 사용자 임베딩을 구현하고 사용자에게 리더 역할을 자동으로 프로비저닝합니다.

  • CloudFront 및 HTTPS를 통해 TLS 1.2 이상 버전을 지원하는 전송 중 암호화를 적용합니다.

  • 버전 관리 및 OAC와 함께 Amazon S3용 AES-256을 사용하여 저장 데이터를 암호화합니다.

  • 제한 및 할당량을 사용하여 API Gateway 사용량 계획을 구성합니다.

  • 예약된 동시성 및 환경 변수 보호로 Lambda를 보호합니다.

  • Amazon S3, CloudFront, Lambda 및 API Gateway에 대한 로깅을 활성화하고 CloudWatch를 사용하여 서비스를 모니터링합니다.

  • 비 HTTPS 또는 암호화되지 않은 업로드에 대해 로그를 암호화하고, 액세스 제어를 적용하고, 거부 정책을 적용합니다.

또한 다음을 권장합니다.

  • CloudFormation 를 사용하여 배포를 자동화하고 환경 간에 일관된 구성을 유지합니다.

  • 각 사용자에게 임베디드 시각적 객체에 액세스할 수 있는 올바른 Quick Sight 권한이 있는지 확인합니다.

  • Amazon Cognito 권한 부여자로 API Gateway 엔드포인트를 보호하고 모든 IAM 역할에 최소 권한 원칙을 적용합니다.

  • Amazon 리소스 이름(ARNs) 및 IDs와 같은 민감한 정보는 하드 코딩하는 대신 환경 변수에 저장합니다.

  • 종속성을 줄이고 콜드 스타트 성능을 개선하여 Lambda 함수를 최적화합니다. 자세한 내용은 AWS 블로그 게시물 Optimizing cold start performance of AWS Lambda using advanced priming strategies with SnapStart를 참조하세요.

  • CloudFront 도메인을 Quick Sight 허용 목록에 추가하여 안전한 시각적 임베딩을 활성화합니다.

  • 로깅, 알림 및 트래픽 보호를 AWS WAF 위해 CloudWatch 및를 사용하여 성능과 보안을 모니터링합니다.

기타 권장 모범 사례

  • 의 SSL 인증서가 있는 사용자 지정 도메인을 사용하여 안전하고 브랜드가 지정된 사용자 환경을 AWS Certificate Manager 제공합니다.

  • 암호화를 더 잘 제어할 수 있도록 고객 관리형 AWS Key Management Service (AWS KMS) 키를 사용하여 Amazon S3 데이터 및 CloudWatch 로그를 암호화합니다.

  • 향상된 위협 방지를 위해 지리 차단, SQL 삽입(SQLi), 교차 사이트 스크립팅(XSS) 보호 및 사용자 지정 필터를 사용하여 AWS WAF 규칙을 확장합니다.

  • 실시간 모니터링 AWS Config, 감사 및 구성 규정 준수를 AWS CloudTrail 위해 CloudWatch 경보 및를 활성화합니다.

  • 세분화된 IAM 정책을 적용하고, API 키 교체를 적용하고, 절대적으로 필요한 경우에만 교차 계정 액세스를 허용합니다.

  • 정기적인 보안 평가를 수행하여 SOC 2(System and Organization Controls 2), GDPR(General Data Protection Regulation), HIPAA(Health Insurance Portability and Accountability Act)와 같은 규정 준수 프레임워크와 일치하는지 확인합니다.

에픽

작업설명필요한 기술

리포지토리를 복제합니다.

이 솔루션의 GitHub 리포지토리를 로컬 시스템에 복제하고 프로젝트 디렉터리로 이동합니다.

git clone https://github.com/aws-samples/sample-quicksight-visual-embedding.git

cd sample-quicksight-visual-embedding

이 리포지토리에는 솔루션을 배포하는 데 필요한 CloudFormation 템플릿과 React 소스 코드가 포함되어 있습니다.

앱 개발자
작업설명필요한 기술

템플릿을 배포합니다.

  1. 에 로그인 AWS Management 콘솔 하고 AWS CloudFormation 콘솔을 엽니다.

  2. 스택 페이지에서 오른쪽 상단의 스택 생성을 선택한 다음 새 리소스 사용(표준)을 선택합니다.

  3. 스택 생성 페이지의 사전 조건 - 템플릿 준비에서 기존 템플릿 선택을 선택합니다.

  4. 템플릿 지정에서 템플릿 파일 업로드를 선택합니다.

  5. 로컬 GitHub 리포지토리에서 template.yaml 파일을 업로드한 후 다음을 선택합니다.

  6. 스택 세부 정보 지정 페이지에서 스택 이름(예: quicksight-embedding-stack)을 입력합니다.

  7. 스택 옵션 구성 페이지에서 기본 설정을 유지하고 확인란을 선택하여 IAM 리소스 생성을 승인합니다. 다음을 선택합니다.

  8. 검토 및 생성 페이지에서 생성을 선택합니다.

 자세한 내용은 CloudFormation 설명서의 스택 생성 및 관리를 참조하세요.

관리자

스택 생성을 모니터링합니다.

상태가 CREATE_COMPLETE가 될 때까지 이벤트 탭에서 스택을 모니터링합니다.

관리자

스택 출력을 검색합니다.

  1. 배포가 완료되면 출력 탭을 선택합니다.

  2. 키 출력: ApiGatewayUrl, UserPoolId, UserPoolClientId, 및 CloudFrontDomainNameS3BucketName. 후속 단계에서이 정보를 사용합니다.

관리자
작업설명필요한 기술

Quick Sight 시각적 식별자를 검색합니다.

  1. Quick Sight 대시보드를 엽니다.

  2. 웹 애플리케이션에 포함할 각 시각적 객체의 대시보드 ID, 시트 ID 및 시각적 객체 ID를 기록해 둡니다.

Quick Sight 관리자

로컬 React 환경을 구성합니다.

로컬 React 환경을 설정하고 AWS 리소스에 연결하려면 로컬 GitHub 리포지토리의 my-app/ 폴더에 .env 파일을 생성합니다. 파일을 다음으로 채웁니다.

  • 의 AWS 리전

  • Amazon Cognito 풀 정보( CloudFormation 스택 출력)

  • API Gateway 엔드포인트( CloudFormation 스택 출력)

  • Quick Sight 시각적 IDs(DashboardId, SheetId, VisualId)

다음은 예제 .env 파일입니다.

VITE_AWS_REGION=us-east-1

# Cognito Configuration (from CloudFormation outputs)
VITE_USER_POOL_ID=us-east-1_xxxxxxxxx VITE_USER_POOL_WEB_CLIENT_ID=xxxxxxxxxxxxxxxxxxxxxxxxxx

# API Configuration (from CloudFormation outputs)
VITE_API_URL=https:/your-api-id.execute-api.us-east-1.amazonaws.com/prod

# QuickSight Visual Configuration
VITE_DASHBOARD_ID=your-dashboard-id 
VITE_SHEET_ID=your-sheet-id 
VITE_VISUAL_ID=your-visual-id
앱 개발자
작업설명필요한 기술

Cognito에서 사용자 생성 또는 관리

임베디드 Quick Sight 시각적 객체에 대한 인증된 사용자 액세스를 활성화하려면 먼저 Amazon Cognito에서 사용자를 생성합니다.

  1. Amazon Cognito 콘솔에서 사용자 풀을 선택한 다음 ( CloudFormation 출력에서UserPoolId) 일치하는 풀을 선택합니다.

  2. 풀에 사용자를 추가합니다. 다음 두 가지 옵션 중에서 선택할 수 있습니다.

    • Amazon Cognito에서 이메일 주소와 임시 암호를 사용하여 사용자를 수동으로 생성합니다(자세한 내용은 Amazon Cognito 설명서 참조).

      —또는—

    • my-app/src/auth/AuthWrapper.jsx 파일에서를 설정하여 UIhideSignUp={false}에서 자체 가입을 활성화합니다.

관리자

Quick Sight 대시보드 액세스 제공

Quick Sight 시각적 객체에 대한 액세스 권한을 제공하려면 인증된 사용자에게 뷰어 권한 액세스 권한을 제공하세요.

  1. Quick Sight 콘솔에서 대시보드를 선택합니다.

  2. 이름을 선택하여 공유하려는 대시보드를 선택합니다.

  3. 대시보드 페이지의 오른쪽 상단 모서리에서 공유를 선택합니다.

  4. 공유 패널에서 특정 사용자와 공유를 선택합니다.

  5. 새 사용자를 추가하려면 사용자 초대 또는 더하기(+) 아이콘을 선택합니다.

  6. 이메일 필드에 수신자의 전체 이메일 주소를 입력합니다. (이 이메일은 사용자의 Amazon Cognito 로그인과 정확히 일치해야 합니다.)

  7. 이메일 필드 옆의 권한 메뉴에서 뷰어를 선택합니다.

  8. 초대를 보내고 액세스 권한을 부여하려면 공유를 선택합니다.

각 사용자는 대시보드 링크가 포함된 이메일을 받게 됩니다. 공유 메뉴를 통해 언제든지 권한을 수정할 수 있습니다.

자세한 내용은 Amazon Quick Suite 설명서의 개별 Amazon Quick Sight 사용자 및 그룹에 Amazon Quick Sight의 대시보드에 대한 액세스 권한 부여를 참조하세요.

Quick Sight 관리자
작업설명필요한 기술

종속성을 설치하고 프로젝트를 빌드합니다.

React 애플리케이션 디렉터리에서 다음 명령을 실행하여 최적화된 프로덕션 파일을 생성합니다.

cd my-app
npm install
npm run build
앱 개발자

Amazon S3에 빌드 파일을 업로드합니다.

my-app/dist/ 디렉터리의 모든 파일을에서 프로비저닝한 S3 버킷에 업로드합니다 CloudFormation (폴더 자체는 업로드하지 않음).

앱 개발자

CloudFront 무효화를 생성합니다.

CloudFront 콘솔에서 배포 후 캐시된 콘텐츠를 새로 고치는 경로에 대한 무효화/*를 생성합니다. 지침은 CloudFront 설명서의 파일 무효화를 참조하세요.

관리자
작업설명필요한 기술

Quick Sight 허용 목록에 CloudFront 도메인을 추가합니다.

CloudFront 도메인이 Quick Sight 시각적 객체를 안전하게 포함할 수 있도록 하려면:

  1. Quick Sight 콘솔에서 Quick Sight, 도메인 및 임베딩 관리를 선택합니다.

  2. 도메인 상자에 CloudFront 도메인을 추가합니다(예: https://d1234567890abc.cloudfront.net).

  3. 도메인 추가를 선택합니다.

Quick Sight 관리자
작업설명필요한 기술

React 애플리케이션을 엽니다.

CloudFront 도메인( CloudFormation 출력)을 사용하여 브라우저에서 배포된 React 웹 애플리케이션을 엽니다.

앱 소유자

인증을 확인합니다.

Amazon Cognito 자격 증명을 사용하여 애플리케이션에 로그인하여 API Gateway를 통해 인증 흐름 및 JWT 검증을 확인합니다.

앱 소유자

임베디드 시각적 객체를 확인합니다.

사용자별 액세스 권한을 기반으로 Quick Sight 시각적 객체가 애플리케이션 내에서 제대로 로드되는지 확인합니다.

앱 소유자

API 및 Lambda 연결을 검증합니다.

애플리케이션이 /get-embed-url API를 성공적으로 호출하고 오류 없이 유효한 Quick Sight 임베드 URLs 검색할 수 있는지 확인합니다.

앱 소유자
작업설명필요한 기술

CloudWatch를 사용하여 모니터링합니다.

AWS 관찰성 도구를 사용하여 애플리케이션을 모니터링하고 프로덕션 환경에서 안전하고 확장 가능한 성능을 유지할 수 있습니다.

CloudWatch에서 Lambda 로그, API Gateway 지표 및 Amazon Cognito 인증 이벤트를 검토하여 애플리케이션 상태를 확인하고 이상을 감지합니다.

관리자

AWS WAF 및 CloudFront 로그를 추적합니다.

AWS WAF 로그에 차단되거나 의심스러운 요청이 있는지 검사하고 CloudFront 액세스 로그에 성능 및 캐싱 지표가 있는지 검사합니다.

관리자

문제 해결

문제Solution

“도메인이 허용되지 않음” 오류

  1. Quick Sight 콘솔에서 Quick Sight, 도메인 및 임베딩 관리를 선택합니다.

  2. CloudFront 도메인(예: https://d1234567890abc.cloudfront.net)을 추가합니다.

  3. 구성을 저장하고 애플리케이션을 다시 로드합니다.

인증 오류

가능한 원인:

  • .env 파일의 Amazon Cognito 사용자 풀 ID 또는 애플리케이션 클라이언트 ID가 잘못되었습니다.

  • Amazon Cognito 사용자 풀에서 사용자가 확인되지 않았습니다.

  • API 요청에서 JWT 토큰이 잘못되었거나 누락되었습니다.

솔루션

  • .env 파일에서 Amazon Cognito 구성 값을 확인합니다.

  • Amazon Cognito 콘솔에서 사용자 탭을 확인하여 사용자가 활성 상태인지 확인합니다.

  • 권한 부여 헤더에 유효한 JWT 토큰이 포함되어 있는지 확인합니다.

  • API Gateway 콘솔에서 권한 부여자를 확인하여 API Gateway가 인증에 Amazon Cognito 권한 부여자를 사용하고 있는지 확인합니다.

API Gateway 오류

가능한 원인:

  • API Gateway에서 Amazon Cognito 권한 부여자가 누락되었거나 잘못 구성되었습니다.

  • Quick Sight API를 호출하기 위한 Lambda 권한이 부족합니다.

  • .env와 CloudFormation 출력 간의 API URL 불일치.

솔루션

  • API Gateway 호출 URL이 .env 파일에 있는지 다시 확인합니다.

  • API Gateway 콘솔에서 권한 부여자를 확인하여 Amazon Cognito 설정을 확인합니다.

  • 를 quicksight:GenerateEmbedUrlForRegisteredUser 사용하여 필요한 IAM 정책을 Lambda 실행 역할에 연결합니다.

  • CloudWatch 로그에서 자세한 API 또는 권한 오류를 검토합니다. 자세한 내용은 API Gateway 설명서를 참조하세요.

Quick Sight 시각적 객체가 로드되지 않음

가능한 원인:

  • 환경 구성의 Quick Sight 대시보드 ID, 시트 ID 또는 시각적 객체 ID가 잘못되었습니다.

  • 시각적 객체 또는 대시보드에 대한 Quick Sight 사용자 액세스 권한이 없습니다.

  • API Gateway에서 CORS(Cross-Origin Resource Sharing) 구성이 누락되었습니다.

솔루션

  • 대시보드 시각적 객체의 오른쪽 상단 모서리에 있는 점 3개 메뉴에서 Quick Sight IDs를 확인합니다.

  • Quick Sight 사용자에게 공유 대시보드에 대한 뷰어 역할이 있는지 확인합니다.

  • API Gateway에서 CORS를 활성화하고 API를 재배포합니다. 자세한 내용은 API Gateway 설명서를 참조하세요.

  • 브라우저 콘솔에서 네트워크 관련 오류가 있는지 검사합니다.

"사용자에게 액세스 권한이 없음" 오류

가능한 원인:

  • 사용자의 이메일이 Quick Sight 대시보드와 공유되지 않았습니다.

  • Quick Sight의 사용자 역할 또는 권한이 잘못되었습니다.

해결 방법:

  1. Quick Sight 콘솔에서 대시보드를 연 다음 공유, 대시보드 공유를 선택합니다.

  2. 사용자의 이메일 주소를 추가합니다(Amazon Cognito 로그인 이메일과 일치).

  3. 최종 사용자 권한 역할을 할당합니다.

  4. 사용자에게 로그아웃한 후 다시 로그인하여 권한을 새로 고치도록 요청합니다.

관련 리소스

AWS 설명서

자습서 및 동영상