포함된 분석 사용 아마존 퀵 사이트 복잡한 개발 없이 애플리케이션에 기능적 시각화를 제공하는 프로세스를 단순화할 수 있습니다. QuickSight 대시보드를 애플리케이션에 임베드하는 방법에는 여러 가지가 있습니다. 이 게시물에서는 React와 Amazon QuickSight 임베딩 SDK.
대시보드 소비자는 자신의 AWS 계정에 할당된 사용자가 없는 경우가 많으므로 대시보드에 대한 액세스 권한이 없습니다. 데이터를 사용할 수 있도록 하려면 익명 사용자가 대시보드에 액세스할 수 있어야 합니다. 인증되지 않은 사용자가 React 애플리케이션에서 QuickSight 대시보드를 볼 수 있도록 하는 데 필요한 단계를 살펴보겠습니다.
솔루션 개요
당사 솔루션은 다음과 같은 주요 서비스를 사용합니다.
브라우저에서 웹 페이지를 로드한 후 브라우저는 익명 사용자를 위한 대시보드 URL을 생성하기 위해 QuickSight API를 호출하는 Lambda 함수를 호출하는 API 게이트웨이를 호출합니다. Lambda 함수는 필요한 권한이 있는 IAM 역할을 맡아야 합니다. 다음 다이어그램은 아키텍처의 개요를 보여줍니다.
사전 조건
다음 전제 조건이 있어야 합니다.
인증되지 않은 뷰어에 대한 권한 설정
계정에서 뷰어를 대신하여 애플리케이션이 가정할 IAM 정책을 만듭니다.
- IAM 콘솔에서 정책 탐색 창에서
- 왼쪽 메뉴에서 정책 만들기.
- 에 JSON 탭에서 다음 정책 코드를 입력합니다.
의 값을 변경했는지 확인하십시오. 대시보드 ID 값으로. 이후 단계에서도 사용할 수 있도록 이 ID를 기록해 둡니다.
로그가 있는 두 번째 문 개체의 경우 권한은 다음과 같습니다. 선택. 지정된 이름으로 로그 그룹을 생성하고, 지정된 로그 그룹에 대한 로그 스트림을 생성하고, 지정된 로그 스트림에 로그 이벤트 배치를 업로드할 수 있습니다.
이 정책에서는 사용자가 다음을 수행하도록 허용합니다. GenerateEmbedUrlForAnonymousUser
자리 표시자에 삽입된 대시보드 ID 목록 내의 대시보드 ID에 대한 작업입니다.
- 정책 이름을 입력합니다(예:
AnonymousEmbedPolicy
) 및 선택 정책 만들기.
다음으로 역할을 생성하고 이 정책을 역할에 연결합니다.
- 왼쪽 메뉴에서 역할 탐색 창에서 다음을 선택합니다. 역할 만들기.
- 왼쪽 메뉴에서 람다 신뢰할 수 있는 엔터티를 위해.
- 검색 및 선택
AnonymousEmbedPolicy
다음을 선택 다음 보기. - 다음과 같이 역할 이름을 입력합니다.
AnonymousEmbedRole
. - 정책 이름이 권한 추가 안내
- 역할 생성을 완료합니다.
당신은 방금 만들었습니다 AnonymousEmbedRole
실행 역할. 이제 다음 단계로 이동할 수 있습니다.
익명 포함 URL 생성 Lambda 함수
이 단계에서는 QuickSight와 상호 작용하여 익명 사용자의 포함 URL을 생성하는 Lambda 함수를 생성합니다. 도메인을 허용해야 합니다. Amazon QuickSight를 통합하는 방법에는 두 가지가 있습니다.
- Amazon QuickSight 관리 콘솔에서 허용된 도메인 목록에 URL을 추가합니다(나중에 설명됨). [선택 사항] QuickSight에서 도메인 추가 섹션).
- [추천] API 호출에서 런타임 동안 내장 URL 요청을 추가합니다. 옵션 1은 허용된 도메인을 유지해야 하는 경우에 권장됩니다. 그렇지 않으면 세션 시간과 동일한 30분 후에 도메인이 제거됩니다. 다른 사용 사례의 경우 두 번째 옵션을 사용하는 것이 좋습니다(아래에서 설명 및 구현됨).
Lambda 콘솔에서 새 함수를 생성합니다.
- 선택 처음부터 저자.
- 럭셔리 기능 명, 같은 이름을 입력하십시오
AnonymousEmbedFunction
. - 럭셔리 런타임¸ 선택 파이썬 3.9.
- 럭셔리 실행 역할¸ 선택 기존 역할 사용.
- 역할 선택
AnonymousEmbedRole
. - 왼쪽 메뉴에서 기능 만들기.
- 함수 세부 정보 페이지에서 암호 탭을 누르고 다음 코드를 입력합니다.
localhost를 사용하지 않는 경우 교체 http://localhost:3000
애플리케이션의 호스트 이름과 함께 반환됩니다. 프로덕션으로 이동하려면 교체하는 것을 잊지 마십시오. http://localhost:3000
귀하의 도메인과 함께.
- 에 구성 탭, 아래 일반 구성선택한다. 편집.
- 제한 시간을 3초에서 30초로 늘린 다음 찜하기.
- $XNUMX Million 미만 환경 변수선택한다. 편집.
- 다음 변수를 추가합니다.
- 추가
DashboardIdList
대시보드 ID를 나열합니다. - 추가
DashboardRegion
대시보드의 지역을 입력합니다.
- 추가
- 왼쪽 메뉴에서 찜하기.
구성은 다음 스크린샷과 유사해야 합니다.
- 에 암호 탭에서 배포 기능을 배포합니다.
Lambda 함수를 호출하도록 API 게이트웨이 설정
생성한 함수를 호출하도록 API Gateway를 설정하려면 다음 단계를 완료하십시오.
- API Gateway 콘솔에서 다음으로 이동합니다. REST API 섹션 및 선택 짓다.
- $XNUMX Million 미만 새 API 만들기, 고르다 새로운 API.
- 럭셔리 API 이름, 이름을 입력하십시오 (예 :
QuicksightAnonymousEmbed
). - 왼쪽 메뉴에서 API 생성.
- 에 행위 메뉴, 선택 리소스 생성.
- 럭셔리 자원 이름, 이름을 입력하십시오 (예 :
anonymous-embed
).
이제 메서드를 만들어 봅시다.
- 선택
anonymous-embed
리소스 및 행위 메뉴, 선택 메소드 생성. - 왼쪽 메뉴에서 바로 리소스 이름 아래.
- 럭셔리 통합 유형, 고르다 람다.
- 선택 Lambda 프록시 통합 사용.
- 럭셔리 람다 함수, 생성한 함수의 이름을 입력합니다.
- 왼쪽 메뉴에서 찜하기다음을 선택 OK.
이제 API를 배포할 준비가 되었습니다.
- 에 행위 메뉴, 선택 API 배포.
- 럭셔리 배포 단계, 고르다 새로운 무대.
- 다음과 같이 스테이지 이름을 입력합니다.
embed
. - 왼쪽 메뉴에서 배포.
[선택 사항] QuickSight에서 도메인 추가
다음에 허용된 도메인을 추가한 경우 익명 포함 URL 생성 Lambda 함수 부분, 자유롭게 이동 용량 가격 설정 안내
QuickSight에서 허용된 도메인에 도메인을 추가하려면 다음 단계를 완료하십시오.
- QuickSight 콘솔에서 사용자 메뉴를 선택한 다음 QuickSight 관리.
- 왼쪽 메뉴에서 도메인 및 임베딩 탐색 창에서
- 럭셔리 도메인, 도메인(
http://localhost:
).
반드시 교체하십시오 로컬 설정과 일치하도록 합니다.
- 왼쪽 메뉴에서 추가.
localhost 도메인을 테스트 후 사용할 도메인으로 바꾸십시오.
용량 가격 설정
세션 용량 가격 책정을 활성화하지 않은 경우 이 섹션의 단계를 따르십시오. 계속 진행하려면 이 기능을 활성화하는 것이 필수입니다.
용량 가격 책정을 통해 QuickSight 고객은 QuickSight에서 개별 리더를 프로비저닝하지 않고도 리더 세션을 대량으로 구매할 수 있습니다. 용량 가격은 임베디드 애플리케이션 또는 대규모 비즈니스 인텔리전스(BI) 배포에 이상적입니다. 자세한 내용은 다음을 방문하십시오. Amazon QuickSight 요금.
용량 가격을 설정하려면 다음 단계를 완료하세요.
- 에 QuickSight 관리 페이지에서 선택 귀하의 구독 탐색 창에서
- . 용량 가격 섹션에서 선택 월간 구독 받기.
- 왼쪽 메뉴에서 구독 확인.
용량 가격 책정에 대한 자세한 내용은 다음을 참조하세요. Amazon QuickSight의 새로운 기능 – 대규모 배포, 공개 웹 사이트에 포함, 포함된 분석을 위한 개발자 포털에 대한 세션 용량 요금.
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
귀하의 첫 번째 dashboardId로DashboardIdList
. 초기 렌더링에 표시될 대시보드입니다. - 교체
YOUR_DASHBOARD2_ID
귀하의 두 번째 dashboardId로DashboardIdList
.
- 교체
다음 코드 스니펫은 App.js
React 프로젝트의 파일입니다. 코드는 선택한 대시보드 ID를 기반으로 QuickSight 대시보드를 포함하는 React 구성 요소입니다. 코드에는 다음과 같은 주요 구성 요소가 포함되어 있습니다.
- 상태 후크 – 두 개의 상태 후크는 다음을 사용하여 정의됩니다.
useState()
React에서 후크:- 계기반 – 현재 선택된 대시보드 ID를 보유합니다.
- quickSight임베딩 – 에서 반환된 QuickSight 임베딩 개체를 보유
embedDashboard()
기능.
- 참조 후크 – 참조 후크는 다음을 사용하여 정의됩니다.
useRef()
React에서 후크. QuickSight 대시보드가 내장될 DOM 요소에 대한 참조를 보유하는 데 사용됩니다. - useEffect() 후크 – useEffect() 후크는 선택한 대시보드 ID가 변경될 때마다 QuickSight 대시보드 포함을 트리거하는 데 사용됩니다. 먼저 fetch() 메서드를 사용하여 QuickSight API에서 선택한 ID의 대시보드 URL을 가져옵니다. URL을 검색한 후 URL을 인수로 사용하여 embed() 함수를 호출합니다.
- 핸들러 변경 -
changeDashboard()
함수는 사용자가 드롭다운 메뉴에서 다른 대시보드를 선택할 때마다 대시보드 상태를 업데이트하는 간단한 이벤트 핸들러입니다. 새 대시보드 ID가 설정되는 즉시 useEffect 후크가 트리거됩니다. - 10밀리초 시간 제한 – 제한 시간을 사용하는 목적은 API 호출을 수행하기 전에 10밀리초의 작은 지연을 도입하는 것입니다. 이 지연은 즉각적인 API 호출을 피하거나 구성 요소가 자주 렌더링될 때 과도한 요청을 방지하려는 시나리오에서 유용할 수 있습니다. 제한 시간은 구성 요소가 API 요청을 시작하기 전에 해결할 시간을 제공합니다. 우리는 개발 모드에서 응용 프로그램을 빌드하고 있기 때문에 시간 초과는 이중 실행으로 인한 오류를 방지하는 데 도움이 됩니다.
useEffect
이내StrictMode
. 자세한 내용은 다음을 참조하십시오. 엄격 모드 업데이트.
다음 코드를 참조하십시오.
다음으로, App.css
다음 코드 스니펫의 콘텐츠로 웹 페이지의 스타일을 지정하고 레이아웃을 지정하는 데 사용되는 파일입니다.
이제 앱을 테스트할 차례입니다. 다음을 실행하여 애플리케이션을 시작하십시오. npm start
터미널에서. 다음 스크린샷은 앱의 예와 앱이 표시할 수 있는 대시보드를 보여줍니다.
결론
이 게시물에서는 AWS SDK를 사용하여 QuickSight 대시보드를 React 애플리케이션에 포함하는 방법을 보여주었습니다. 익명의 사용자와 대시보드를 공유하면 AWS 계정에 대한 액세스 권한을 부여하지 않고도 대시보드에 액세스할 수 있습니다. 다음과 같이 대시보드를 익명으로 공유하는 다른 방법도 있습니다. 1-클릭 공개 임베딩.
또한 퀵사이트 커뮤니티 다른 사람과 함께 묻고 대답하고 배우고 추가 리소스를 탐색합니다.
저자에 관하여
Adrianna AWS Global Financial Services의 솔루션 아키텍트입니다. 2018년 XNUMX월부터 Amazon에 합류한 그녀는 회사의 운영 및 클라우드 비즈니스 모두에 참여할 기회를 가졌습니다. 현재 그녀는 특정 고객 사용 사례에 맞춘 AWS 서비스의 혁신적인 사용을 보여주는 소프트웨어 자산을 구축하고 있습니다. 매일 그녀는 기술의 다양한 측면에 적극적으로 참여하지만 그녀의 진정한 열정은 웹 개발과 분석의 결합에 있습니다.
- SEO 기반 콘텐츠 및 PR 배포. 오늘 증폭하십시오.
- PlatoData.Network 수직 생성 Ai. 자신에게 권한을 부여하십시오. 여기에서 액세스하십시오.
- PlatoAiStream. 웹3 인텔리전스. 지식 증폭. 여기에서 액세스하십시오.
- 플라톤ESG. 자동차 / EV, 탄소, 클린테크, 에너지, 환경, 태양광, 폐기물 관리. 여기에서 액세스하십시오.
- BlockOffsets. 환경 오프셋 소유권 현대화. 여기에서 액세스하십시오.
- 출처: https://aws.amazon.com/blogs/big-data/level-up-your-react-app-with-amazon-quicksight-how-to-embed-your-dashboard-for-anonymous-access/
- :있다
- :이다
- :어디
- ][피
- $UP
- 1
- 10
- 100
- 11
- 12
- 13
- 14
- 20
- 200
- 2018
- 26
- 30
- 3000
- 60
- 7
- 9
- a
- 소개
- ACCESS
- 얻기 쉬운
- 계정
- 달성
- 동작
- 활발히
- 더하다
- 추가
- 첨가
- 추가
- 관리자
- 후
- All
- 수
- 수
- 수
- 또한
- 아마존
- 아마존 퀵 사이트
- Amazon Web Services
- an
- 분석
- 및
- 익명
- 익명으로
- 답변
- 어떤
- API를
- 앱
- 어플리케이션
- 어플리케이션
- 아키텍처
- 있군요
- 논의
- AS
- 측면
- 자산
- 할당 된
- 취하다
- At
- 붙이다
- 8월
- 저자
- 피하기
- 기다리다
- AWS
- 기반으로
- 기초
- BE
- 때문에
- 된
- 전에
- 대신에
- 이하
- 몸
- 두
- 브라우저
- 빌드
- 건물
- 빌드
- 사업
- 비즈니스 인텔리전스
- 비자 면제 프로그램에 해당하는 국가의 시민권을 가지고 있지만
- by
- 전화
- 통화
- CAN
- 생산 능력
- 가지 경우
- 발생
- 센터
- 기회
- 이전 단계로 돌아가기
- 변경
- 왼쪽 메뉴에서
- 클라이언트
- 클라우드
- 암호
- 색
- 결합
- 회사
- 완전한
- 복잡한
- 구성 요소
- 구성 요소들
- 구성
- 콘솔에서
- 소비
- 소비자
- 컨테이너
- 이 포함되어 있습니다
- 함유량
- 내용
- 문맥
- 만들
- 만든
- 만들기
- CSS
- Current
- 현재
- 고객
- 고객
- 매일
- 계기반
- 대시 보드
- 데이터
- 태만
- 한정된
- 지연
- 보여
- 배포
- 배포
- 기술 된
- 세부설명
- 개발자
- 개발
- 다른
- 디스플레이
- DOM
- 도메인
- 도메인
- 한
- 말라
- 더블
- 지속
- ...동안
- e
- 효과
- 요소
- 포함
- 임베디드
- 임베딩
- 가능
- 사용 가능
- 교전하다
- 엔터 버튼
- 실재
- 환경
- 동등한
- 오류
- 오류
- 에테르 (ETH)
- 이벤트
- 이벤트
- 예
- 예
- 외
- 예외
- 실행
- 현존하는
- 설명
- 탐험
- 수출
- 세 연령의 아시안이
- 입양 부모로서의 귀하의 적합성을 결정하기 위해 미국 이민국에
- 금융
- 금융 서비스
- 먼저,
- 따라
- 수행원
- 럭셔리
- 무료
- 자주
- 에
- 기능
- 기능의
- 추가
- 게이트웨이
- 생성
- 제공
- 글로벌
- 글로벌 금융
- Go
- 부여
- 그룹
- 했다
- 있다
- 데
- 헤더
- 신장
- 도움이
- 그녀의
- 보유
- 보유
- 후크
- 가져가
- 방법
- How To
- HTTP
- HTTPS
- i
- IAM
- ID
- 이상
- 통합 인증
- 식별자
- if
- 즉시
- 구현
- import
- in
- 포함
- 개인
- 정보
- 처음에는
- 시작하다
- 혁신적인
- 설치
- 완성
- 인텔리전스
- 인터렉티브
- 으로
- 소개
- 호출
- 참여
- IT
- JSON
- 다만
- 키
- 결핍
- 넓은
- 대규모
- 후에
- 레이아웃
- 배우다
- 레벨
- 거짓
- 명부
- 로드
- 지방의
- 기록
- 보기
- 본관
- 제작
- 유튜브 영상을 만드는 것은
- 필수
- 한계
- 경기
- 메뉴
- 방법
- 분
- 모드
- 월
- 배우기
- 움직임
- 여러
- 절대로 필요한 것
- name
- 이동
- 카테고리
- 필요
- 요구
- 신제품
- 다음 것
- 표준
- 지금
- 대상
- of
- 자주
- on
- ONE
- 행정부
- 선택권
- 옵션
- or
- 주황색
- OS
- 기타
- 기타
- 그렇지 않으면
- 우리의
- 개요
- 꾸러미
- 페이지
- 빵
- 부품
- 열정
- 수행
- 권한
- 선택
- 자리
- 플라톤
- 플라톤 데이터 인텔리전스
- 플라토데이터
- 부디
- 정책
- 포털
- 게시하다
- 강한
- 전제 조건
- 예방
- 가격
- 방법
- 생산
- 프로젝트
- 규정
- 대리
- 공개
- 매수
- 목적
- RE
- 반응
- 리더
- 독자들
- 준비
- 추천
- 지방
- 제거됨
- 렌더링
- 교체
- 의뢰
- 요청
- 필수
- 의지
- 제품 자료
- 응답
- return
- 반품
- 직위별
- 뿌리
- 달리기
- 달리는
- 규모
- 시나리오
- 스크린 샷
- SDK
- 둘째
- 초
- 섹션
- 참조
- 선택된
- 서비스
- 세션
- 세션
- 세트
- 해결하다
- 설치
- 공유
- 공유
- 그녀
- 영상을
- 표시
- 보여
- 표시
- 쇼
- 비슷한
- 단순, 간단, 편리
- 단순화
- 이후
- 작은
- 소프트웨어
- 해결책
- 솔루션
- 일부
- 예정입니다.
- 구체적인
- 지정
- 단계
- 스타트
- 주 정부
- 성명서
- 단계
- 단계
- 흐름
- 엄격한
- 스타일
- 이러한
- 확인
- 맞춤형
- 목표
- Technology
- 단말기
- test
- 지원
- 그
- XNUMXD덴탈의
- 그들의
- 그들
- 그때
- 그곳에.
- 따라서
- 이
- 시간
- 에
- 트리거
- 방아쇠를 당긴
- 참된
- 신뢰할 수있는
- 시도
- 회전
- 두
- 아래에
- 밑줄
- 업데이트
- URL
- 사용
- 익숙한
- 사용자
- 사용자
- 사용
- 사용
- 가치
- 여러
- 버전
- 관측
- 방문
- 필요
- 방법
- we
- 웹
- 웹 개발
- 웹 서비스
- 웹 사이트
- 환영
- 잘
- 언제
- 때마다
- 어느
- 의지
- 과
- 이내
- 없이
- 당신
- 너의
- 제퍼 넷