このモジュールでは、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 名] に「WildRydes」と入力します。

    4. [Endpoint Type (エンドポイントタイプ)] ドロップダウンで [Edge optimized (エッジの最適化)] を選択したままにします。注意: [Edge optimized (エッジの最適化)] は、インターネットからアクセスする公開サービスに最適なオプションです。同一の AWS リージョン内から主にアクセスする API には一般にリージョンのエンドポイントが使用されます。

    5. [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 New Authorizer (新しいオーソライザーを作成)] を選択します。

    3. オーソライザー名に「WildRydes」と入力します。

    4. タイプとして [Cognito] を選択します。

    5. [Cognito User Pool (Cognito ユーザープール)] の [Region (リージョン)] ドロップダウンで、モジュール 2 で Cognito ユーザープールを作成したリージョンを選択します (デフォルトでは、現在のリージョンが選択されています)。

    6. WildRydes」(またはユーザープールに付けた名前) を [Cognito User Pool (Cognito ユーザープール)] に入力します。

    7. Token Source (トークンソース)」に「Authorization」と入力します。

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

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

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

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

    3. /ride.html の通知からオーソライザートークンをコピーします。

    4. Authorizer を作成し終えた前のタブに戻ります。

    5. Authorizer のカードの下部にある [Test (テスト)] をクリックします。

    6. ポップアップダイアログボックスの [Authorization Token (オーソライザートークン)] フィールドに認証トークンを貼り付けます。

    7. [Test (テスト)] ボタンをクリックし、応答コードが 200 であることと、ユーザーのクレームが表示されていることを確認します。

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

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


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

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

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

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

    5. リソースとして [Enable API Gateway CORS] を選択します。

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

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

    8. 表示された新しいドロップダウンで [POST] を選択し、チェックマークをオンにします

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

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

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

    12. 前のモジュールで作成した関数の名前 RequestUnicorn を [Lambda 関数] に入力します。

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

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

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

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

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

  • ステップ 4: API をデプロイする

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


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

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

    3. [Stage Name (ステージ名)] に「prod」と入力します。

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

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

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

    作成したステージの 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. [アップロード] を選択します。

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

    6. [アクセス許可の設定] セクションと [プロパティの設定] セクションのデフォルト値を変更せずに [次へ] をクリックします。

    7. [レビュー] セクションで [アップロード] を選択します。

  • ステップ 5: 実装の検証

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


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

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

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

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