임베디드 분석 자습서

Amazon QuickSight 사용

모듈 5: API Gateway 및 정적 웹 페이지

이 모듈에서는 웹 포털 설정을 계속합니다.

소개

이 모듈에서는 Lambda 함수를 호출하고 S3 버킷에 HTML 정적 페이지를 기록 및 로드하는 API Gateway를 생성하여 웹 포털 설정을 계속합니다.

배우게 될 내용

  • Lambda 함수를 호출하는 API Gateway를 생성합니다.
  • 정적 웹 페이지 생성

 완료 시간

20분

 사용되는 서비스

구현

  • API Gateway 생성

    다음으로, QSGetEmbedUrl Lambda 함수를 호출하는 API Gateway를 설정합니다.

    1. API Gateway를 시작하고 [API 생성(Create API)] 버튼을 클릭합니다.

    114

    2. [REST API]로 스크롤하고 [빌드(Build)] 버튼을 클릭합니다.

    115

    3. API 이름을 QSGetEmbedUrlApi로 설정하고 [API 생성(Create API)] 버튼을 클릭합니다.

    116

    4. [작업(Actions)] 드롭다운을 클릭하고 [리소스 생성(Create Resource)] 옵션을 클릭합니다.

    117

    5. 다음 값을 설정합니다.
    [리소스 이름(Resource Name)]: GetEmbedUrl
    [API Gateway CORS 활성화(Enable API Gateway CORS)]: 선택됨
    [리소스 생성(Create Resource)] 버튼을 클릭합니다.

    118

    6. [작업(Actions)] 드롭다운(getembedurl 리소스가 선택된 상태에서)을 클릭하고 [메서드 생성(Create Method)] 옵션을 클릭합니다.

    119

    7. 옵션 상자에서 GET을 선택하고 선택 표시 아이콘을 클릭합니다.

    120

    8. 다음 값을 설정합니다.
    [통합 유형(Integration Type)]: [Lambda 함수(Lambda Function)]
    [Lambda 프록시 통합 사용(Use Lambda Proxy Integration)]: 선택됨
    [Lambda 함수(Lambda Function)]: QSGetEmbedUrl
    [저장(Save)] 버튼을 클릭합니다.

    121

    9. [권한 추가(Add Permission)] 대화 상자에서 [확인(OK)] 버튼을 클릭합니다.

    122

    10. [작업(Actions)] 드롭다운을 클릭하고 [API 배포(Deploy API)] 옵션을 클릭합니다.

    123

    11. 다음을 선택합니다.
    [배포 단계(Deployment stage)]: [새 단계(New Stage)] 선택
    [배포 이름(Stage name)]: test
    [배포(Deploy)] 버튼을 클릭합니다.

    124

    12. 호출 URL을 메모장에 API Gateway URL로 저장합니다.

    125
  • 정적 웹 페이지 생성

    이제, 정적 html 페이지를 생성하고 S3 버킷에 로드합니다.

    1. 다음 html 코드를 파일에 복사하고 파일 이름을 qsembed.html로 지정합니다.

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <script type="text/javascript" src="https://unpkg.com/amazon-quicksight-embedding-sdk@1.0.2/dist/quicksight-embedding-js-sdk.min.js"></script>
        <title>Embedding demo</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
        <script src="https://sdk.amazonaws.com/js/aws-sdk-2.517.0.min.js"></script>
        <style>
          iframe {border: 0;}
          body {margin:0;}
        </style>
        <script>
          var awsData = {
            dashboardId: '',
            dashboardRegion: '',
            apiGatewayUrl:'<apiGatewayUrl>?',
            cloudFrontUrl:'<cloudFrontUrl>',
            cognitoUrl:'<cognitoUrl>/login?client_id=<clientId>&response_type=token&scope=openid+profile&redirect_uri=<cloudFrontUrl>/qsembed.html',
            debug: false
          }
    
          $(document).ready(function () {
            document.getElementById('logo').src = awsData.cloudFrontUrl+'/logo.png'
            //On redirect from Cognito; Read out  state
            //Setting client and dashboard id in url is just for demo implementation.
            awsData.dashboardId = getParameterValues('dashboardid','?','&');
            awsData.dashboardRegion = getParameterValues('dashboardregion','?','&');
    
            //Get OpenIdToken
            var tokenPromise = getOpenIdToken();
    
            tokenPromise.then(function(idToken) {
              apiGatewayGetEmbedUrl(
                awsData.apiGatewayUrl,
                awsData.dashboardId,
                awsData.dashboardRegion,
                idToken
              );
            },
            function(err)
            {
                   console.log(err);
            });
          });
    
          function writeDebugInfo(debugInfo){
                  // console.log(debugInfo);
          }
    
          function getCookie(name) {
            var v = document.cookie.match('(^|;) ?' + name + '=([^;]*)(;|$)');
            return v ? v[2] : null;
          }
    
          function setCookie(name, value) {
            document.cookie = name + "=" + value ;
          }
    
          function getParameterValues(param,slicer,delimiter) {
            var urlParms = window.location.href.slice(window.location.href.indexOf(slicer)+ slicer.length).split(delimiter);
            for (var i = 0; i < urlParms.length; i++) {
              var urlparm = urlParms[i].split('=');
              if (urlparm[0].toLowerCase() === param) {
                setCookie(param, decodeURIComponent(urlparm[1]));
                return decodeURIComponent(urlparm[1]);
              }
            }
              return getCookie(param);
          }
    
          function parseJwt (token) {
                 var base64Url = token.split('.')[1];
                var base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/');
                var jsonPayload = decodeURIComponent(atob(base64).split('').map(function(c) {
                    return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
                }).join(''));
                return JSON.parse(jsonPayload);
            }
    
          //Redirect to Cognito if user is not Signed in.
          //Cognito will redirect back to this page and then the promise will be resolved.
          function getOpenIdToken(){
            return new Promise(function(resolve,reject) {
                writeDebugInfo('In getOpenIdToken func');
                var idToken = getParameterValues('id_token','#','&');
                if (idToken ) {
              writeDebugInfo('Token found');
                }
                else {
                    writeDebugInfo('Token not found, Redirecting to Cognito');
                    window.location.href = awsData.cognitoUrl;
                }
    
            resolve(idToken);
            });
          }
    
          //Make APIGateway call to generate the embed url.
          function apiGatewayGetEmbedUrl(
            apiGatewayUrl,
            dashboardId,
            dashboardRegion,
            openIdToken
            ) {
            const parameters = {
                dashboardId: dashboardId,
                dashboardRegion: dashboardRegion,
                openIdToken: openIdToken
            }
    
            const myQueryString = $.param(parameters);
            apiGatewayUrl = apiGatewayUrl + myQueryString;
    
            const headers = { 'Content-Type' : 'application/json' }
    
            axios.get(apiGatewayUrl, { headers: headers})
              .then((response) => {
                  embedDashboard(response.data.EmbedUrl);;
              })
              .catch(function (error) {
                      writeDebugInfo(error);
                      console.log('Error obtaining QuickSight dashboard embed url.');
              });
          }
    
          //Embed the generated url into the div identified to hold the dashboard.
          function embedDashboard(embedUrl) {
              var containerDiv = document.getElementById("dashboardContainer");
              var params = {
                      url: embedUrl,
                      container: containerDiv,
                      width:"100%",
                      height:"1000px"
              };
              var dashboard = QuickSightEmbedding.embedDashboard(params);
          }
    
        </script>
      </head>
      <body>
        <div><img id='logo' src="" style="height:50px;margin-top: 10px;margin-left: 10px;padding-bottom: 10px;" /></div>
        <div id="dashboardContainer"></div>
      </body>
    </html>
    

    2. 파일에서 다음 문자열을 바꿉니다. (모두 바꾸기 옵션 사용)
    <apiGatewayUrl>: API Gateway URL/getembedurl
    <cognitoUrl>: https://qseAwsAccountId.auth.us-east-1.amazoncognito.com
    <clientId>: 메모장에 저장된 Cognito App Client Id
    <cloudfrontUrl>: 메모장에 저장된 https://CloudFront Domain Name

    3. 다음 AWS 로고를 마우스 오른쪽 버튼으로 클릭하고 logo.png로 저장합니다.
    (또는 logo.png라는 이름의 자체 로고 파일 사용)

    131

    4. S3를 시작하고 qseAwsAccountId를 검색한 다음 버킷 이름을 클릭합니다.

    132

    5. [업로드(Upload)] 버튼을 클릭합니다.

    133

    6. qsembed.htmllogo.png를 추가하고 [업로드(Upload)] 버튼을 클릭합니다.

    134

결론

모듈 5를 완료했습니다! 다음으로, 모듈 6에서는 사용자 및 도메인을 설정합니다.

이 모듈이 유용했습니까?

QuickSight 사용자 및 도메인 설정