0. Related Posts
1.템플릿 복사
미리 준비해둔 템플릿을 받아서 프론트엔드/백엔드 서버를 구축합니다.
Cloud9에서 새로운 터미널을 하나 생성합니다.
명령어를 입력합니다.
git clone https://github.com/Laminar8/aws-quicksight-embedding-svelte.git
2. Backend
Backend 폴더로 이동합니다.
필요한 라이브러리를 설치합니다.
cd ./aws-quicksight-embedding-svelte/Backend
npm install
Backend/src/interfaces/v1/aws.interfaces.ts 파일을 열어 수정합니다.
// CHANGE THIS ALL
export const awsAccountId = '<YOUR AWS ACCOUNT ID>'
export const appName = '<YOUR COGNITO APP NAME>'
export const clientId = '<YOUR CLIENT ID>'
export const redirectUri = 'https://<YOUR SERVER URL>:5000'
export const roleArn = `arn:aws:iam::${awsAccountId}:role/<YOUR ROLE NAME>`
터미널 탭 선택
서버 빌드 및 실행 (아래 코드 참고)
export PORT=4000
npm run start
3. Frontend
새로운 터미널을 생성합니다.
Frontend 폴더로 이동합니다.
필요한 라이브러리를 설치합니다.
cd ./aws-quicksight-embedding-svelte/Frontend
npm install
Frontend/src/components/main/main.svelte 파일을 열어 수정합니다.
// CHANGE THIS NAME
const dashboardName = "<Your Dashboard Name>";
Frontend/src/store.ts 파일을 열어 수정합니다.
// CHANGE THIS URL
export const backendServerUrl = writable("https://<Your SERVER URL>:4000");
export const frontendServerUrl = writable("https://<Your SERVER URL>:5000/#");
터미널 탭 선택
서버 빌드 및 실행 (아래 코드 참고)
export PORT=5000
npm run build
npm run start
4. 확인
Browser(ex: Chrome, Firefox) 등에서 접속 (ex: https://quicksight.laminar.gq:5000/)
Login 선택
사용자 이름 입력
비밀번호 입력
Sign in 선택
Embedding Dashboard확인
[AWS] Quicksight Embedding – Server