AWS の開始方法

基本的なウェブアプリケーションを構築する

ウェブアプリケーションをデプロイし、API やデータベースとの対話性を追加する

このモジュールでは、API Gateway を使用してサーバーレス関数をデプロイします。

はじめに

このモジュールでは、Amazon API Gateway を使用して、RESTful API を作成します。これにより、ウェブクライアント (通常はユーザーのウェブブラウザのこと) から Lambda 関数を呼び出すことができるます。API Gateway は、モジュール 1 で作成した HTML クライアントとモジュール 2 で作成したサーバーレスバックエンドの間の中間層として機能します。

学習内容

  • API Gateway を使用して新しい API を作成する
  • API で HTTP (ハイパーテキスト転送プロトコル) メソッドを定義する
  • API から Lambda 関数をトリガーする
  • API で CORS を有効にして、ウェブサイトから使用できるようにする
  • AWS マネジメントコンソールから API Gateway で作成された API をテストする

主要な概念

RESTful API REST は「Representational State Transfer」の略で、ウェブサービスを作成するためのアーキテクチャパターンです。API は、アプリケーションプログラムインターフェイスを意味します。 したがって、RESTful API はそのアーキテクチャパターンを実装するものです。

HTTP リクエストメソッド HTTP メソッドは、クライアントとサーバー間の通信を可能にするように設計されています。HTTP プロトコルで定義された GET や PUT などのメソッドは、リソースに対して実行するアクションを示すために使用されます。

CORS CORS (Cross Origin Resource Sharing) メカニズムは、HTTP ヘッダーを使用し、特定のウェブアプリケーションを 1 つのオリジン (ドメイン) で実行できるようにし、別のオリジンのサーバーから選択したリソースにアクセスするアクセス許可を付与するようにブラウザに指示します。

エッジ最適化 AWS グローバルインフラストラクチャを使用して、世界中のクライアントにより良いサービスを提供するリソース。

 所要時間

5 分

 使用するサービス

実装

  • 新しい REST API を作成する
    1. API Gateway Console にログインします。
    2. オレンジの [API の作成] ボタンをクリックします。
    3. REST API ボックスを見つけて、その中のオレンジの [構築] ボタンをクリックします。
    4. [プロトコルの選択] で、[REST] を選択します。
    5. [Create new API] で、[New API] を選択します。
    6. [API 名] フィールドに、「HelloWorldAPI」と入力します。
    7. [エンドポイントタイプ] プルダウンで [エッジ最適化] を選択します (注: エッジ最適化エンドポイントは、地理的に分散したクライアントに最適です。このため、インターネットからアクセスするパブリックサービスに適しています。同一の AWS リージョン内から主にアクセスする API には一般にリージョンのエンドポイントが使用されます。
    8. ブルーの [API の作成] ボタンをクリックします。設定は次のスクリーンショットのようになるはずです。
    Full Stack tutorial API settings
  • 新しいリソースとメソッドを作成する
    1. 左パネルで、HelloWorld API の下にある [リソース] をクリックします。
    2. [/] リソースを選択した状態で、[アクション] ドロップダウンメニューから [メソッドの作成] をクリックします。
    3. 表示される新しいドロップダウンから POST を選択し、チェックマークをクリックします。
    4. 統合タイプとして [Lambda 関数] を選択します。
    5. [関数] フィールドに、「HelloWorldFunction」と入力します。
    6. ブルーの [保存] ボタンをクリックします。
    7. 作成している API に Lambda 関数を呼び出すアクセス許可を与えていることを知らせるメッセージが表示されます。[OK] ボタンをクリックします。
    8. 新しく作成した POST メソッドを選択した状態で、[アクション] ドロップダウンメニューから [CORS を有効にする] を選択します。
    9. [POST] チェックボックスを選択した状態で、ブルーの [CORS を有効にして既存の CORS ヘッダーを置き換える] ボタンをクリックします。
    Full Stack tutorial EnableCORS

    10.メソッドの変更を確認するように求めるメッセージが表示されます。ブルーの [はい、既存の値を置き換えます] ボタンをクリックします。

    Full Stack tutorial ConfirmMethodChanges
  • API をデプロイする
    1. [アクション] ドロップダウンリストで、[Deploy API] を選択します。
    2. [デプロイステージ] ドロップダウンリストから [新しいステージ] を選択します。
    3. [ステージ名] に「dev」と入力します。
    4. [デプロイ] をクリックします。
    5. [URL を呼び出す] の横にある URL をコピーして保存します (モジュール 5 で必要になります)。
  • API を検証する
    1. 左側のナビゲーションで、[リソース] をクリックします。
    2. API のメソッドが右側にリストされます。[POST] をクリックします。
    3. 小さな青い稲妻のアイコンをクリックします。
    4. 以下を [リクエスト本文] フィールドに貼り付けます。
    {
        "firstName":"Grace",
        "lastName":"Hopper"
    }

    5.ブルーの [テスト] ボタンをクリックします。

    6.右側に、Code 200 を含む応答が表示されます。

    7.すばらしい! Lambda 関数を呼び出す API を構築してテストしました。


アプリケーションのアーキテクチャ

モジュール 3 はこれで完了です。それでは、アーキテクチャを以下確認してみましょう

full-stack amplify console arch diagram module 3

API Gateway を追加して、既存の Lambda 関数に接続しました。これで、API 呼び出しで関数をトリガーできます。ウェブクライアントからこの呼び出しを生成する機能がまだありません。モジュール 4 で最初にデータテーブルを追加し、モジュール 5 ですべてを接続します。

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

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

データテーブルを作成する