Chapter 04

DynamoDB

sotaro116
sotaro116
2022.10.23に更新
このチャプターの目次
  1. 本セクションの目標
  2. 今回実施すること
  3. 前提
  4. DynamoDB とは
  5. ハンズオン
  6. 課題

本セクションの目標

  • 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": "タスク１"
  }
}
    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": "タスク１"
    }
],
"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）

  • 補足