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

Serverless_Web_App_LP_assets-05

上の図には、このモジュールで構築するAPI Gateway コンポーネントが、これまでに構築した既存のコンポーネントと統合される方法が表示されています。グレーアウトした項目は、前の手順ですでに実装した部分です。

最初のモジュールでデプロイした静的ウェブサイトは、このモジュールで構築する API と情報を交換するようにページが設定されています。/ride.html のページには、unicorn ライドをリクエストする簡単なマップベースのインターフェイスがあります。/signin.html ページを使用して認証した後、ユーザーは、マップ上のポイントをクリックしてピックアップの場所を選択することができ、右上隅にある [Request Unicorn (Unicorn のリクエスト) ] ボタンをクリックすることによって、ライドをリクエストすることができるようになります。

このモジュールでは、API のクラウドコンポーネントを構築するために必要なステップに焦点を当てていますが、この API を呼び出すブラウザコードが機能する方法に関心をお持ちの場合は、このウェブサイトの ride.js ファイルを調べていただくことができます。この場合、アプリケーションは、jQuery の ajax () メソッドを使用してリモートリクエストを行います。

モジュールを完了するための時間:15 分

使用されるサービス:Amazon API Gateway および AWS Lambda


以下の詳細な手順に従って、REST API を作成します。各ステップの番号をクリックして、セクションを展開してください。

  • ステップ 1.新しい REST API を作成する


    1. AWS マネジメントコンソールで [サービス] をクリックしてから、「アプリケーションサービス」にある [API Gateway] を選択します。

    2. [Create API (API を作成)] を選択します。

    3. [New API (新しい API)] を選択し[API Name (API の名前)] に WildRydes と入力します。

    4. [Create API (API を作成)] を選択します。

  • ステップ 2.Cognito ユーザープール Authorizer を作成する

    Amazon API Gateway は、API 呼び出しを認証するために Cognito ユーザープールによって返された JWT トークンを使用することができます。このステップでは、 モジュール 2 で作成したユーザープールを使用するために、API のための Authorizer を設定します。

    Amazon API Gateway コンソールで、API のための新しい Cognito ユーザープール Authorizer を作成します。前のモジュールで作成したユーザープールの詳細情報によってそれを設定します。コンソール内で設定をテストするには、コンソールで、既存のウェブサイトの /signin.html ページによってログインした後、提示された認証トークンをコピーアンドペーストします。


    1. 新しく作成した API の下で、[Authorizers (オーソライザー)] を選択します。

    2. [Create (作成)] ドロップダウンリストから、[Cognito User Pool Authorizer (Cognito ユーザープール Authorizer)] を選択します。

    3. モジュール 2 の Cognito ユーザープールを作成した場所のリージョンを選択してください。

    4. ドロップダウンリストから WildRydes Cognito ユーザープールを選択します。

    5. Authorizer の名前として WildRydes を入力します。

    6. ID トークンのソースAuthorization に設定されていることを確認します。

    7. [Create (作成)] を選択します。

    Authorizer (オーソライザー) の設定を確認する

    1. 新しいブラウザタブを開き、ウェブサイトのドメインの下にある /ride.html にアクセスします。

    2. サインインページにリダイレクトされている場合は、最後のモジュールで作成したユーザーを使ってサインインします。 /ride.html にリダイレクトされます。

    3. /ride.html にある通知から認証トークンをコピーし、それを API Gateway コンソールタブの [Identity token (IDトークン)] フィールドに貼り付けます。

    4. [Test (テスト)] を選択し、表示されたユーザーについての要求が表示されていることを確認します。

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

    API 内で /ride という名前の新しいリソースを作成します。次に、リソースに対する POST メソッドを作成し、このモジュールの最初の手順で作成した RequestUnicorn 関数によって裏付けされた Lambda プロキシ統合をそれに使用するように設定します。


    1. 左側のナビゲーションペインで、WildRydes API の下の [Resources (リソース)] をクリックします。

    2. [Actions (アクション)] ドロップダウンから [Create Resource (リソースを作成)] を選択します。

    3. [Resource Name(リソース名)] として ride と入力します。

    4. [Resource Path (リソースパス)] が ride に設定されていることを確認します。

    5. [Create Resource (リソースを作成)] をクリックします。

    6. 新しく作成した /ride リソースを選択したまま、[Action (アクション)] ドロップダウンから、[Create Method (メソッドを作成)] を選択します。

    7. 表示された新しいドロップダウンから POST を選択し、チェックマークをクリックします。

    8. 統合タイプとして [Lambda Function (Lambda 関数)] を選択します。

    9. [Use Lambda Proxy integration (Lambda プロキシ統合を使用する)] のチェックボックスにチェックマークを入れます。

    10. [Lambda Region (Lambda リージョン)] に使用しているリージョンを選択し ます。

    11. 前のモジュールで作成した関数の名前 RequestUnicorn ([Lambda Function (Lambda 関数)] 用) を入力します。

    12. [Save (保存)] を選択します。関数が存在しないというエラーが表示された場合、選択したリージョンが前のモジュールで使用したリージョンと一致しているかどうか確認する必要があります。

    13. 関数を呼び出すために Amazon API Gateway 許可を付与するよう求めるプロンプトが表示されたら、[OK] を選択します。

    14. [Method Request (メソッドをリクエスト)] カードを選択します。

    15. [Authorization (認可)] の横の鉛筆のアイコンを選択します。

    16. ドロップダウンリストから、[WildRydes Cognito ユーザープール Authorizer] を選択し、チェックマークアイコンをクリックします。

  • ステップ 4.CORS を有効にする

    最新のウェブブラウザは、1つのドメインでホストされているページのスクリプトから別のドメインでホストされている APIへの HTTP リクエストを阻止します。ただし、Cross-Origin Resource Sharing (CORS) のレスポンスヘッダーを API が提供する場合は例外です。Amazon API Gateway コンソールでは、リソースが選択されているときに、アクションメニューの下で適切な CORS ヘッダーを送信するために必要な設定を追加できます。/requestunicorn リソースのPOST および OPTIONS のために、CORS を有効にする必要があります。分かりやすいように、Access-Control-Allow-Origin ヘッダー値を「*」に設定することができますが、本稼働アプリケーションでは、常にCSRF (CSRF) 攻撃を軽減するために、承認されたドメインを明示的にホワイトリストに入れる必要があります。

    一般的な CORS の設定の詳細については、https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS を参照してください。


    1. Amazon API Gateway コンソールの中央のパネルで、 /ride リソースを選択します。

    2. [Actions (アクション)] ドロップダウンリストから [Enable CORS (CORSを有効にする)] を選択します。

    3. デフォルトの設定を使用して、[Enable CORS and replace existing CORS headers (CORSを有効にし、既存のCORSのヘッダーを交換する)] を選択します。

    4. [Yes, replace existing values (はい、既存の値を交換します)] を選択します。

    5. チェックマークがすべてのステップの横に表示されるのを待ちます。

  • ステップ 5.API をデプロイする

    Amazon API Gateway コンソールから、[Actions (アクション) ]、[Deploy API (APIをデプロイする) ] を選択します。新しいステージを作成するように求めるプロンプトが表示されます。ステージ名のために prod を使用することができます。


    1. [Actions (アクション)] ドロップダウンリストの [Deploy API (APIをデプロイする)] を選択します。

    2. [Deployment stage (ステージのデプロイメント)]ドロップダウンリストの中の[New Stage (新しいステージ)]を選択します。

    3. ステージ名としてprod を入力します。

    4. [Deploy (デプロイ)] を選択します。

    5. [Invoke URL] を書き留めます。これは次のセクションで使います。

  • ステップ 6.ウェブサイト設定を更新する

    作成したステージの URL の呼び出しが含まれるように、ウェブサイトのデプロイの中の /js/config.js ファイルを更新します。Amazon API Gateway コンソールのステージエディターページの上部から、直接、URL の呼び出しをコピーし、サイトの /js/config.js ファイルの _config.api.invokeUrl キーにそれを貼り付ける必要があります。設定ファイルを更新するときに、Cognito ユーザープールには、前のモジュールで行った更新がまだ含まれていることを確認してください。


    モジュール 2 を手動で完了した場合、ローカルで保存した config.js ファイルを編集できます。AWS CloudFormation テンプレートを使用した場合、S3 バケットからconfig.js ファイルをまずダウンロードする必要があります。これを行うには、ウェブサイトのベース URL で/js/config.js にアクセスし、[File (ファイル) ] を選択し、次にブラウザから [Save Page As (ページを以下として保存) ] を選択します。

    1. テキストエディターで、config.js ファイルを開きます。

    2. config.js ファイルの api (アプリ) キーの下で、[invokeUrl (URLの呼び出し)] 設定を更新します。前のセクションで作成したステージの展開のために、[Invoke URL (URLの呼び出し)] に値を設定します。

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

        }

    };

    1. 変更をローカルで保存します。

    2. AWS マネジメントコンソールで、[Services (サービス)] を選択し、次に [Storage (ストレージ) ] の下の [S3] を選択します。

    3. ウェブサイトバケットに移動し、 js キープレフィックスを参照します。

    4. [Upload (アップロード)] を選択します。

    5. [Add files (ファイルを追加)] を選択し、 config.js のローカルコピーを選択して、[Next (次へ)] をクリックします。

    6. [Next (次へ)] を選択するとき、「許可を設定」セクションおよび「プロパティの設定」セクションの全体にわたってデフォルト値を変更しないようにします。

    7. 「確認」セクションで [Upload (アップロード) ] を選択します。

  • ステップ 7.実装の検証

    注意:S3 バケットで config.js ファイルを更新してから、更新されたコンテンツがブラウザに表示されるまでの間に遅延が生じる場合があります。また、次の手順を実行する前に、ブラウザのキャッシュをクリアすることを確認する必要もあります。


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

    2. サインインページにリダイレクトされる場合、前のモジュールで作成したユーザーを使ってサインインします。

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

    4. [Request Unicorn] を選択します。unicorn がその場に向かっていることを示す通知が右のサイドバーに表示され、unicorn アイコンがピックアップの場所に飛ぶのが見えます。