組み込み分析のチュートリアル

(Amazon QuickSight を利用)

モジュール 5: API Gateway および静的ウェブページ

このモジュールでは、引き続きウェブポータルをセットアップします。

はじめに

このモジュールでは、引き続きウェブポータルをセットアップします。API Gateway を作成して Lambda 関数を呼び出し、HTML 静的ページを S3 バケットに書き込んでロードします。

学習内容

  • API Gateway を作成する - Lambda 関数を呼び出すためのものです。
  • 静的ウェブサイトを作成する

 所要時間

20 分

 使用するサービス

実装

  • API Gateway を作成する

    次に、API Gateway をセットアップして、QSGetEmbedUrl Lambda 関数を呼び出しましょう。

    1.API Gateway を起動して、[Create API (API の作成)] をクリックします。

    114

    2.[REST API] まで下にスクロールし、[Build (構築)] をクリックします。

    115

    3.API 名を QSGetEmbedUrlApi に設定し、[Create API (API の作成)] をクリックします。

    116

    4.[Actions (アクション)] ドロップダウンをクリックし、[Create Resource (リソースの作成)] オプションをクリックします。

    117

    5.次の値を設定します。
    リソース名: GetEmbedUrl
    API Gateway CORS を有効にする: チェックをオン
    [Create Resource (リソースの作成)] をクリックします。

    118

    6.(getembedurl リソースを選択した状態で) [Actions (アクション)] をクリックし、[Create Method (メソッドの作成)] オプションをクリックします。

    119

    7.オプションボックスから [GET] を選択し、チェックマークのアイコンをクリックします。

    120

    8.次の値を設定します。
    統合タイプ: Lambda 関数
    Lambda プロキシ統合の使用: チェックをオン
    Lambda 関数: QSGetEmbedUrl
    [Save (保存)] をクリックします。

    121

    9.[Add Permission (アクセス許可の追加)] ダイアログボックスで [OK] をクリックします。

    122

    10.[Actions (アクション)] ドロップダウンをクリックし、[Deploy API (API のデプロイ)] オプションをクリックします。

    123

    11.次の項目を選択します。
    デプロイステージ: [New Stage (新しいステージ)] を選択
    ステージ名: 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.ファイル内の次の文字列を置き換えます。([Replace all (すべて置き換え)] オプションを使用)
    <apiGatewayUrl>: API Gateway URL/getembedurl
    <cognitoUrl>: https://qseAwsAccountId.auth.us-east-1.amazoncognito.com
    <clientId>: メモ帳に保存されている Cognito アプリクライアント ID
    <cloudfrontUrl>: メモ帳に保存されている https://CloudFront ドメイン名

    3.次の aws ロゴを右クリックして logo.png という名前を付けて保存します。
    (または logo.png という名前の独自のロゴファイルを使用)

    131

    4.S3 を起動して、qseAwsAccountId を検索し、[Bucket name (バケット名)] をクリックします。

    132

    5.[Upload (アップロード)] をクリックします。

    133

    6.qsembed.htmllogo.png を追加し、[Upload (アップロード)] をクリックします。

    134

まとめ

モジュール 5 を無事修了しました! 次に、モジュール 6 でユーザーとドメインをセットアップします。

このモジュールは役に立ちましたか?

QuickSight ユーザーおよびドメインをセットアップする