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확인

다음 글 보기

이전 글 보기