本セクションの目標

  • DynamoDB とは何か理解すること
  • Lambda 関数から DynamoDB を操作することができること

今回実施すること

  • DynamoDB のテーブルを作成する
  • 前章で作成した Lambda 関数を修正し、作成したテーブルにアクセスする機能を追加する
  • クライアントアプリ(Nuxt.js)からリクエストする

前提

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

DynamoDB とは

ハンズオン

ハンズオン全体として TODO アプリを作る流れで行います。まずはハンズオンでは DB からデータを全件取得する機能を追加します。

  1. DynamoDB のテーブルを作成する

    1. AWS のマネジメントコンソールに事前に渡されている IAM ユーザーと PW でログイン
    2. AWS のマネジメントコンソールの左上の検索欄で「DynamoDB」を検索し、DynamoDB のマネジメントコンソールを開く
    3. 「テーブルの作成」ボタンを押下する
    4. 以下の入力欄を右側の値に変更する
      • テーブル名:item-20221024-自分の名前(例:item-20221024-firstnamelastname)
      • パーティションキー : id
      • パーティションキーの文字種:文字列
    5. 画面の最下部にある「テーブルの作成」ボタンを押下し、しばらくするとテーブルが作成される
    6. テーブルが正常に作成されたことを確認し、作成されたテーブルを選択する
    7. 「アクション」ボタンを押下して「項目の作成」ボタンを押下
    8. 右上の「JSON ビュー」タブを押下
    9. 以下の値に書き換える。その後「項目の作成」ボタンを押下する。
      {
        "id": {
          "S": "001"
        },
        "name": {
          "S": "タスク1"
        }
      }
      
    10. 以下のようにテーブルにデータが挿入されていたら OK
  2. 前章で作成した Lambda 関数を修正し、作成したテーブルにアクセスする機能を追加する

    1. 前章で作成した Lambda を開く
    2. 以下の通りに Lambda 関数の中身を書き換える
    // AWSの各サービスを利用するためのライブラリを宣言
    const AWS = require("aws-sdk");
    // DynamoDBを操作するための変数を宣言
    const docClient = new AWS.DynamoDB.DocumentClient();
    
    exports.handler = async (event) => {
      // DynamoDBの指定のテーブルからデータを全件取得するためのメソッドで必要な引数を定義
      const scanItemPayload = {
        TableName: "item-20221024-firstnamelastname", // テーブル名はそれぞれの名前に変更する
      };
      // DynamoDBにアクセス
      const dynamoDBResponse = await docClient.scan(scanItemPayload).promise();
    
      // 取得した項目をLambdaのbodyに入れてレスポンス
      const response = {
        statusCode: 200,
        body: JSON.stringify(dynamoDBResponse),
        headers: {
          "Access-Control-Allow-Origin": "*",
        },
      };
      return response;
    };
    
    1. 前章で行ったように APIGateway のコンソールからテストを行う。以下の値でレスポンスが返ってこれば OK
      • ステータス: 200
      • レスポンス本文:以下の通り
      {
      "Items": [
          {
          "id": "001",
          "name": "タスク1"
          }
      ],
      "Count": 1,
      "ScannedCount": 1
      }
      
  3. クライアントアプリ(Nuxt.js)で取得した内容を表示する

    1. クライアントアプリに戻り、pages/index.vue 配下を以下の通りに書き換える。
    <template>
      <div>
        <!-- タスクの数だけ表示 -->
        <div v-for="(list,index) in taskList" :key="index">
          <div>ID: {{ list.id }}</div>
          <div>タスク名:{{ list.name }}</div>
        </div>
      </div>
    </template>
    
    <script lang="ts">
      import Vue from "vue";
      import axios from "axios";
      export default Vue.extend({
        data(): { taskList: Array<{ id: string; name: string }> } {
          return {
            taskList: [],
          };
        },
        async mounted() {
          // 画面描画時にタスクの全件取得を行う
          this.taskList = [];
          const response = await axios.get(
            "ここは前章で利用したAPIのエンドポイントと同じ"
          );
          this.taskList = response.data.Items;
        },
      });
    </script>
    
    1. localhost:3000 にアクセスし、画面描画したときに DB に入っている値が表示されれば OK

課題

  • TODO アプリの機能を増やしていきましょう

  • 今回はサーバーサイドを重点的に開発して欲しいので、デザイン等は簡素なもので OK です

    • 機能の優先度
      • タスクの一覧を取得する(ハンズオンで完成する機能)
      • タスクを追加する
      • タスクを単一の条件で検索する
      • タスクを削除する
      • タスクのステータスを更新する
      • タスクを複数の条件で検索する
      • 別の条件で検索する(GSI)
  • 補足