実装

• 新しい REST API を作成する

  a.AWS マネジメントコンソールで、[Services] (サービス) をクリック後、[Application Services] (アプリケーションサービス) の [API Gateway] を選択します。
  b.[Create API] (API を作成) を選択します。
  c.[New API] (新しい API) を選択し、[API Name] (API 名) に WildRydes と入力します。
  d.[Endpoint Type] (エンドポイントタイプ) ドロップダウンで [Edge optimized] (最適化されたエッジ) を選択したままにします。注: [Edge optimized] (最適化されたエッジ) は、インターネットからアクセスするパブリックサービスに最適なオプションです。同一の AWS リージョン内から主にアクセスする API には一般にリージョンのエンドポイントが使用されます。
  e.[Create API] (API を作成) を選択します。

• Cognito ユーザープールオーソライザーを作成する

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

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

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

  b.[Create New Authorizer] (新しいオーソライザーの作成) を選択します。

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

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

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

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

  g.[Token Source] (トークンソース) に Authorization と入力します。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  j.[Use Lambda Proxy integration] (Lambda プロキシ統合の使用) チェックボックスをオンにします。

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

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

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

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

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

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

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

• API をデプロイする

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

  a.[Actions] (アクション) ドロップダウンボックスで [Deploy API] (API のデプロイ) を選択します。
  b.[Deployment stage] (デプロイステージ) ドロップダウンリストから [New Stage] (新しいステージ) を選択します。
  c.[Stage Name] (ステージ名) に prod と入力します。
  d.[Deploy] (デプロイ) を選択します。
  e.[Invoke URL] (URL の呼び出し) をメモしておきます。これらは次のセクションで使用します。
  

• ウェブサイトの設定を更新する

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

  a.テキストエディタで config.js ファイルを開きます。
  b.config.js api キーで invokeUrl 設定を呼び出します。前のセクションで作成したデプロイステージで [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, 
  
      } 
  
  };

  c.変更済みのファイルを保存して、ファイルを Amplify コンソールへ自動的にデプロイするため Git リポジトリにプッシュします。
  

  $ git push
  

• 実装を検証する

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

  a.ウェブサイトドメインの下にある /ride.html にアクセスします。
  b.サインインページにリダイレクトされる場合は、前のモジュールで作成したユーザーを使ってサインインします。
  c.マップがロードされたら、マップ上の任意の場所をクリックして、ピックアップ場所を設定します。
  d.[Request Unicorn] (ユニコーンをリクエスト) を選択します。右のサイドバーの通知で、ユニコーンが向かっていることが表示され、続いてピックアップ場所にユニコーンのアイコンが移動します。