Chapter 03

Lambda&APIGateway

sotaro116
sotaro116
2022.10.24に更新

本セクションの目標

  • Lambda 関数と APIGateway を連携させて REST API を作成できること

今回実施すること

  • Lambda 関数と APIGateway を作成する
  • 作成した Lambda 関数と APIGateway を連携させる
  • クライアントアプリ(Nuxt.js)からリクエストする

前提

  • 今回の研修で作成する各 AWS のリソースは AWS マネジメントコンソール上で作成します
  • 実際の業務では後ほどの章で説明のある CodePipeline と CloudFormation で IaC(yaml ファイルで記載)として管理・デプロイします

Lambda とは

APIGateway とは

ハンズオン

Lambda 関数と APIGateway を組み合わせて REST の API を作成します。
また作成した API をクライアントアプリからリクエストして、レスポンスを画面に表示するまで行います。

  1. Lambda 関数を作成する

    1. AWS のマネジメントコンソールに事前に渡されている IAM ユーザーと PW でログイン
    2. 事前に共有されているロールに切り替える
    3. AWS のマネジメントコンソールの左上の検索欄で「Lambda」を検索
    4. Lambda のサービスを開く
    5. 左のメニュー(閉じている場合はハンバーガーメニューを開く)を開き、「関数の作成」ボタンを押下する
    6. オプションは「一から作成」を選択
    7. 入力欄を以下の値に変更する
      • 関数名:getItem-20221024-自分の名前(例:getItem-20221024-firstnamelastname)
      • ランタイム:Node.js 16.x
      • アーキテクチャ:x86_64
    8. 「デフォルトの実行ロールの変更」を開き、以下の値に設定し「関数の作成」ボタンを押下する
      • デフォルトの実行ロール:既存のロールを使用する
      • 既存のロール:「LambdaAccessRole」
    9. 作成に成功したことを確認する
    10. 作成された Lambda のコードソース内を以下のように書き換える
      exports.handler = async (event) => {
        const response = {
          statusCode: 200,
          body: JSON.stringify("Hello from Lambda!"),
          headers: {
            "Access-Control-Allow-Origin": "*",
          },
        };
        return response;
      };
      
      *元々の記載に headers 部の記載はありませんでしたが、クライアントアプリからリクエストする際に必要になります。
      詳しくは「CORS とは」などで検索してみてください[参考リンク]。
    11. 「Deploy」を押下
    12. Deploy が正常に完了したことを確認する
  2. APIGateway を作成する

    1. AWS のマネジメントコンソールの左上の検索欄で「API Gateway」を検索
    2. API Gateway のサービスを開く
    3. 「API を作成」ボタンを押下する
    4. 「REST API」の構築ボタンを押下する[1]
    5. API 名:「aws-training-20221024-自分の名前-api」(例:aws-training-20221024-firstnamelastname-api)を入力して「API の作成」ボタンを押下する
    6. API が正常に作成されたことを確認
  3. 作成した Lambda 関数と APIGateway を連携させる

    1. 「アクション」ボタンを押下して「リソースの作成」ボタンを押下する
    2. 入力欄を以下の値に設定して、「リソースの作成」ボタンを押下する
      • リソース名:item
      • リソースパス:item
      • API Gateway CORS を有効にするにチェックを入れる
    3. リソースが作成されたことを確認
    4. 作成された/item のリソースを選択して、「アクション」ボタンを押下して「メソッドの作成」ボタンを押下する
    5. プルダウンから「GET」を選択して、チェックボタンを押下する
    6. 入力欄を以下の値に設定して、「保存」ボタンを押下する
      • 統合タイプ:Lambda 関数
      • Lambda プロキシ統合の使用:チェックを入れる
      • Lambda リージョン:ap-northeast-1
      • Lambda 関数:1 で作成した関数(getItem-20221024-自分の名前)
      • デフォルトタイムアウトの使用:チェックを入れる
    7. Lambda 関数に権限を追加するモーダルが表示された場合、「OK」ボタンを押下する
    8. GET メソッドが正常に作成されたことを確認
    9. 「テスト」のリンクを押下
    10. メソッドテストの画面の最下部にある「テスト」ボタンを押下する
    11. 以下の値でレスポンスが返ってこれば OK
    • ステータス: 200
    • レスポンス本文:"Hello from Lambda!"
  4. クライアントアプリ(Nuxt.js)からリクエストする - 実際にクライアントアプリからリクエスト出来るように、APIGateway をデプロイする必要があります。
    これからのハンズオンは APIGateway をデプロイして、生成された API のエンドポイント(URL)に対してクライアントアプリからリクエストするまでを行います。

    1. APIGateway のコンソールから「アクション」を選択し、「API のデプロイ」を選択する
    2. モーダルが出てくるので、以下の値に設定して「デプロイ」ボタンを押下する
      • デプロイされるステージ:(新しいステージ)
      • ステージ名:prod
    3. デプロイが正常に完了していることを確認
    4. 「prod > / > /item > GET」を選択すると「URL の呼び出し:」と書かれた箇所に今回作成した API のエンドポイントが表示されるので控えておく
    5. ダウンロードした Vue プロジェクトのディレクトリ内に入り npm iを行う
    6. クライアントアプリに戻り、以下のコマンドをたたいて axios のライブラリをインストールする
      npm i axios
      *axios は ajax 通信をするためのライブラリです。 5. pages/index.vue を開き、以下のように書き換える。19 行目の URL は先ほど作成した URL に書き換えるように気を付ける。 [^2]
    <template>
      <div>
        <div>{{ message }}</div>
        <button @click="click">ボタン</button>
      </div>
    </template>
    
    <script lang="ts">
      import Vue from "vue";
      import axios from "axios";
      export default Vue.extend({
        data() {
          return {
            message: "",
          };
        },
        methods: {
          async click(): Promise<void> {
            const response = await axios.get(
              "ここは控えておいたURLに書き換える/item"
            );
            this.message = response.data;
          },
        },
      });
    </script>
    
    1. localhost:3000 にアクセスして、画面上に表示されているボタンを押下すると、3-9 で出力されたレスポンス本文が表示されれば OK

補足 - デバッグ方法 - Lambda や APIGateway の実行ログは CloudWatchLogs

というサービス上に出力されます。
クライアントからリクエストしてエラーとなった場合、まず上記サービスを確認しましょう。

  • LambdaLayer の存在 - Lambda の機能に LambdaLayer と呼ばれる機能があります。
    https://qiita.com/t_okkan/items/394a15577bd1aad46ec3
    デジ開部では必ず使用する機能になります。本研修では時間の関係上取り扱いませんが、頭の片隅に置いていただけると実務で役立つと思います。

脚注
  1. 今回は API
    のエンドポイントタイプをリージョンとしましたが、実業務ではプライベートにする必要があります。プライベート以外の設定だと、URL
    さえ分かれば誰でも利用できる API
    となってしまい、情報漏洩等に繋がる恐れがあるためです。 [^2]: 実業務では
    APIGateway
    で生成されたエンドポイントを直接呼び出すことはありません。以下経路のように WAF
    と CloudFront を経由する必要があります。 クライアントアプリ → CloudFront + WAF →
    APIGateway → Lambda ↩︎