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 を追加することにより、静的にホストされたウェブサイトを動的なウェブアプリケーションに変換します。

アーキテクチャの概要

Serverless_Web_App_LP_assets-03

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

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

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

 所要時間

15 分

 使用するサービス

実装

  • 新しい 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] (ユニコーンをリクエスト) を選択します。右のサイドバーの通知で、ユニコーンが向かっていることが表示され、続いてピックアップ場所にユニコーンのアイコンが移動します。

このモジュールはお役に立ちましたか?

ありがとうございます
このチュートリアルで良かった点をお聞かせください。
閉じる
ご期待に添えず申し訳ありません
古い説明、わかりにくい説明、間違った説明はございませんでしたか? このチュートリアルの改善のために、ぜひフィードバックをお寄せください。
閉じる

リソースを終了する