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

Serverless_Web_App_LP_assets-05

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

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

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

モジュールの所要時間: 15 分

使用されるサービス: Amazon API Gateway と AWS Lambda


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

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


    1. AWS マネジメントコンソールで、[サービス] をクリック後、[アプリケーションサービス] の [API Gateway] を選択します。

    2. [API の作成] を選択します。

    3. [新しい API] を選択し、[API 名] に「WildRydes」と入力します。

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

    5. [API の作成] を選択します。

  • ステップ 2: Cognito ユーザープールオーソライザーを作成する

    Amazon API Gateway は、Cognito ユーザープールによって返される JWT トークンを使用して API コールを認証できます。このステップでは、モジュール 2 で作成したユーザープールを使用するよう API のオーソライザーを設定します。

    Amazon API Gateway コンソールで、API 用の新しい Cognito ユーザープールオーソライザーを作成します。前のモジュールで作成したユーザープールの詳細で、このオーソライザーを設定します。現在のウェブサイトの /signin.html ページでログインした後に提供される認証トークンをコピーして貼り付けて、コンソールで設定をテストできます。


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

    2. [新しいオーソライザーの作成] を選択します。

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

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

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

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

    7. [トークンソース] に「Authorization」と入力します。

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

    オーソライザー設定を確認する

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

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

    3. /ride.html の通知から認証トークンをコピーします。

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

    5. オーソライザーのカードの下部にある [テスト] をクリックします。

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

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

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

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


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

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

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

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

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

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

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

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

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

    10. [Lambda プロキシ統合の使用] チェックボックスをオンにします。

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

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

    13. [保存] を選択します。関数が存在しないというエラーが表示された場合は、選択したリージョンが、前のモジュールで使用したリージョンに一致することを確認します。

    14. 関数を呼び出すための権限を Amazon API Gateway に付与するように求められたら、[OK] を選択します。

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

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

    17. ドロップダウンの一覧から WildRydes Cognito ユーザープールオーソライザーを選択し、チェックマークアイコンをクリックします。

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

    Amazon API Gateway コンソールから、[アクション]、[API のデプロイ] の順に選択します。新しいステージの作成が求められます。ステージ名には prod を使用できます。


    1. [アクション] ドロップダウンボックスで [API のデプロイ] を選択します。

    2. [デプロイステージ] ドロップダウンリストから [新しいステージ] を選択します。

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

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

    5. [URL の呼び出し] をメモしておきます。これらは次のセクションで使用します。

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

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


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

    2. config.js api キーで invokeUrl 設定を呼び出します。前のセクションで作成したデプロイステージで [呼び出し 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. 変更済みのファイルを保存して、ファイルを Amplify コンソールへ自動的にデプロイするため Git リポジトリにプッシュします。

    $ git push
  • ステップ 5: 実装を検証する

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


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

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

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

    4. [Request Unicorn] を選択します。右のサイドバーの通知で、ユニコーンが向かっていることが表示され、続いて乗る場所にユニコーンのアイコンが移動します。