実装

• 新しい REST API を作成する
  1. Amazon API Gateway コンソールで、左側のナビゲーションペインにある [API] を選択します。 
  2. [REST API] で [ビルド] を選択します。
  3. [プロトコルを選択する] セクションで、[REST] を選択します。 
  4. [新しい API の作成] セクションで、[新しい API] を選択します。
  5. [設定] セクションで、[API 名] に「WildRydes」と入力し、[エンドポイントタイプ] ドロップダウンで [エッジ最適化] を選択します。
     注: インターネットからアクセスするパブリックサービスには、エッジ最適化エンドポイントタイプを使用してください。同一の AWS リージョン内から主にアクセスする API には一般にリージョンのエンドポイントが使用されます。
  6. [API の作成] を選択します。
• オーソライザーを作成する

  Amazon Cognito ユーザープールオーソライザーを作成する必要があります。Amazon API Gateway は、Amazon Cognito ユーザープール (モジュール 2 で作成) から返される JSON ウェブトークン (JWT) を使用して API 呼び出しを認証します。このセクションでは、ユーザープールを利用できるように、API のオーソライザーを作成します。

  以下の手順を使用して、Amazon API Gateway コンソールでオーソライザーを設定します。

  1. 先ほど作成した WildRydes API の左側のナビゲーションペインで、「オーソライザー」を選択します。
  2. [新しいオーソライザーの作成] を選択します。 
  3. オーソライザーの [名前] フィールドに「WildRydes」と入力します。
  4. [タイプ] として [Cognito] を選択します。 
  5. Cognito ユーザープールの [リージョン] ドロップダウンで、チュートリアルの残りの部分で使用していたのと同じリージョンを選択します。Cognito ユーザープールの [名前] フィールドに「WildRydes」と入力します。
  6. [トークンのソース] に「Authorization」と入力します。 
  7. [作成] を選択します。
  8. オーソライザーの設定を確認するには、[テスト] を選択します。 
  9. モジュール 2 の実装の [検証] セクションにある ride.html ウェブページからコピーした認証トークンを [承認 (ヘッダー)] フィールドに貼り付け、HTTP ステータスの [レスポンスコード] が 200 であることを確認します。 

   

   

• 新しいリソースとメソッドを作成する

  このセクションでは、API 内に新しいリソースを作成します。その後、そのリソース用の POST メソッドを作成し、このモジュールの最初のステップで作成した RequestUnicorn 関数によってサポートされる Lambda プロキシ統合を使用するようにメソッドを設定します。

  1. WildRydes API の左側のナビゲーションペインで、[リソース] を選択します。
  2. [アクション] ドロップダウンから、[リソースの作成] を選択します。
  3. [リソース名] に「ride」と入力すると、リソースパス /ride が自動的に作成されます。
  4. [API Gateway CORS を有効にする] のチェックボックスをオンにします。
  5. [リソースの作成] を選択します。
  6. 新しく作成した /ride リソースが選択された状態で、[アクション] ドロップダウンから [メソッドの作成] を選択します。
  7. [オプション] の下に表示される新しいドロップダウンから [POST] を選択し、チェックマークアイコンを選択します。
  8. 統合タイプとして [Lambda 関数] を選択します。
  9. [Lambda プロキシ統合の使用] のチェックボックスをオンにします。
  10. Lambda リージョンのチュートリアル全体で使用していたのと同じリージョンを選択します。
  11. [Lambda 関数] に「RequestUnicorn」と入力します。
  12. [保存] を選択します。
      注: 関数が存在しないというエラーが表示された場合は、選択したリージョンが、前のモジュールで使用したリージョンに一致することを確認します。
  13. 関数を呼び出すための許可を Amazon API Gateway に付与するように求められたら、[OK] を選択します。
  14. [メソッドリクエスト] カードを選択します。
  15. [認可] の横の鉛筆アイコンを選択します。
  16. ドロップダウンの一覧から WildRydes Cognito ユーザープールオーソライザーを選択し、チェックマークアイコンを選択します。
• API をデプロイする

  このセクションでは、Amazon API Gateway コンソールから API をデプロイします。 

  1. [アクション] ドロップダウンリストで [API のデプロイ] を選択します。
  2. [デプロイステージ] ドロップダウンリストから [新しいステージ] を選択します。
  3. [ステージ名] に「prod」と入力します。
  4. [デプロイ] を選択します。
  5. [呼び出し URL] をコピーします。これらは次のセクションで使用します。
     
• ウェブサイトの設定を更新する

  このステップでは、ウェブサイトのデプロイで /js/config.js ファイルを更新し、作成したステージの呼び出し URL を含めます。呼び出し URL は、Amazon API Gateway コンソールのステージエディタページの上部から直接コピーし、サイトの config.js ファイルの invokeUrl キーに貼り付けます。設定ファイルには、前のモジュールで行った Amazon Cognito userPoolID、userPoolClientID、およびリージョンの更新が引き続き含まれています。

  1. ローカルマシンで js フォルダに移動し、任意のテキストエディタで config.js ファイルを開きます。
  2. 前のセクションで Amazon API Gateway コンソールからコピーした呼び出し URL を config.js ファイルの invokeUrl 値に貼り付けます。 
  3. ファイルを保存します。

  次の完成した config.js ファイルの例を参照してください。ファイルの実際の値は異なることに注意してください。
  

  window._config = {
  
      cognito: {
  
          userPoolId: 'us-west-2_uXboG5pAb', // e.g. us-east-2_uXboG5pAb         
  
          userPoolClientId: '25ddkmj4v6hfsfvruhpfi7n4hv', // e.g. 25ddkmj4v6hfsfvruhpfi7n4hv
  
          region: 'us-west-2' // e.g. us-east-2 
  
      }, 
  
      api: { 
  
          invokeUrl: 'https://rc7nyt4tql.execute-api.us-west-2.amazonaws.com/prod' // e.g. https://rc7nyt4tql.execute-api.us-west-2.amazonaws.com/prod, 
  
      } 
  
  };

  Code snippet copied

  コピー

      3.更新した config.js ファイルを追加、コミット、Git リポジトリにプッシュすると、自動的に Amplify コンソールにデプロイされます。

  $ git add .
  $ git commit -m "new_configuration"
  $ git push
  

  Code snippet copied

  コピー
• 実装を検証する

  注: S3 バケットの config.js ファイルの更新と、更新されたコンテンツがブラウザに表示される間に、遅延が発生する可能性があります。また、以下のステップを実行する前に、ブラウザのキャッシュをクリアしてください。

  1. ride.html ファイルの ArcGIS JS バージョンを 4.3 から 4.6 に次のように更新します (新しいバージョンはこのチュートリアルでは動作しません)。
     

  <script src="https://js.arcgis.com/4.6/"></script>
   <link rel="stylesheet" href="https://js.arcgis.com/4.6/esri/css/main.css">

  Code snippet copied

  コピー

  完全な ride.html ファイルの例を以下に示します。ファイルの一部の値が異なる場合があることに注意してください。

  <div id="noApiMessage" class="configMessage" style="display: none;">
          <div class="backdrop"></div>
          <div class="panel panel-default">
              <div class="panel-heading">
                  <h3 class="panel-title">Successfully Authenticated!</h3>
              </div>
              <div class="panel-body">
                  <p>This page is not functional yet because there is no API invoke URL configured in <a href="/js/config.js">/js/config.js</a>. You'll configure this in Module 3.</p>
                  <p>In the meantime, if you'd like to test the Amazon Cognito user pool authorizer for your API, use the auth token below:</p>
                  <textarea class="authToken"></textarea>
              </div>
          </div>
      </div>
  
      <div id="noCognitoMessage" class="configMessage" style="display: none;">
          <div class="backdrop"></div>
          <div class="panel panel-default">
              <div class="panel-heading">
                  <h3 class="panel-title">No Cognito User Pool Configured</h3>
              </div>
              <div class="panel-body">
                  <p>There is no user pool configured in <a href="/js/config.js">/js/config.js</a>. You'll configure this in Module 2 of the workshop.</p>
              </div>
          </div>
      </div>
  
      <div id="main">
          <div id="map">
          </div>
      </div>
  
      <div id="authTokenModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="authToken">
          <div class="modal-dialog" role="document">
              <div class="modal-content">
                  <div class="modal-header">
                      <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                      <h4 class="modal-title" id="myModalLabel">Your Auth Token</h4>
                  </div>
                  <div class="modal-body">
                      <textarea class="authToken"></textarea>
                  </div>
                  <div class="modal-footer">
                      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                  </div>
              </div>
          </div>
      </div>
  
  
      <script src="js/vendor/jquery-3.1.0.js"></script>
      <script src="js/vendor/bootstrap.min.js"></script>
      <script src="js/vendor/aws-cognito-sdk.min.js"></script>
      <script src="js/vendor/amazon-cognito-identity.min.js"></script>
      <script src="https://js.arcgis.com/4.6/"></script>
      <script src="js/config.js"></script>
      <script src="js/cognito-auth.js"></script>
      <script src="js/esri-map.js"></script>
      <script src="js/ride.js"></script>
  </body>
  
  </html>

  Code snippet copied

  コピー

      2.変更したファイルを保存します。 ファイルを追加、コミット、Git リポジトリに git プッシュすると、AWS Amplify コンソールに自動的にデプロイされます。

      3.ウェブサイトドメインの下にある /ride.html にアクセスします。

      4.ArcGIS のサインインページにリダイレクトされた場合は、このチュートリアルの前提条件として、「はじめに」セクションで以前に作成したユーザー認証情報を使用してサインインします。

      5.マップがロードされたら、マップ上の任意の場所をクリックして、ピックアップ場所を設定します。

      6.[ユニコーンをリクエスト] を選択します。右のサイドバーの通知で、ユニコーンが向かっていることが表示され、続いてピックアップ場所にユニコーンのアイコンが移動します。