Chapter 03

Lambda＆APIGateway

sotaro116
sotaro116
2022.10.24に更新
このチャプターの目次
  1. 本セクションの目標
  2. 今回実施すること
  3. 前提
  4. Lambda とは
  5. APIGateway とは
  6. ハンズオン
  7. 補足 - デバッグ方法 - Lambda や APIGateway の実行ログは CloudWatchLogs

本セクションの目標

  • 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 ↩︎