AWS の開始方法

サーバーレスのウェブアプリケーションを構築する

AWS Lambda、Amazon API Gateway、AWS Amplify、Amazon DynamoDB、および Amazon Cognito を使用

モジュール 4: RESTful API をデプロイする

Amazon API Gateway を使用して、前のモジュールで RESTful API として構築した Lambda 関数を公開します。

概要

このモジュールでは、Amazon API Gateway を使用して、前のモジュールで RESTful API として構築した Lambda 関数を公開します。この API はパブリックインターネットでアクセス可能になります。前のモジュールで作成した Amazon Cognito ユーザープールを使用して保護されます。次に、この設定を使用して、公開された API に対して AJAX 呼び出しを行うクライアント側 JavaScript を追加することにより、静的にホストされたウェブサイトを動的なウェブアプリケーションに変換します。

アーキテクチャの概要

上の図は、このモジュールで構築する API Gateway コンポーネントが、前に構築した既存のコンポーネントとどのように統合されるかを示しています。グレー表示された項目は、既に前のステップで実装したものです。

最初のモジュールでデプロイした静的ウェブサイトには、このモジュールで構築する API と連携するように設定済みのページが既にあります。/ride.html のページには、ユニコーンに乗ることを要求するシンプルなマップベースのインターフェイスがあります。/signin.html ページを使用した認証後、ユーザーはマップ上のポイントをクリックし、右上隅の [Request Unicorn] ボタンを選択して、乗る場所を選択することができます。

このモジュールでは、API のクラウドコンポーネントを構築するために必要なステップに注目しますが、この API を呼び出すブラウザコードの仕組みに関心がある場合は、ウェブサイトの ride.js ファイルを調べることができます。この場合、アプリケーションは jQuery の ajax() メソッドを使用してリモートリクエストを実行します。

 所要時間

15 分

 利用するサービス

実装

    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 ユーザープールオーソライザーを選択し、チェックマークアイコンを選択します。
  • このセクションでは、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 userPoolIDuserPoolClientID、およびリージョンの更新が引き続き含まれています。

    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, 
    
        } 
    
    };

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

    $ git add .
    $ git commit -m "new_configuration"
    $ git push
    
  • : 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">

    完全な 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>

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

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

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

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

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

このページはお役に立ちましたか?

リソースのクリーンアップ