AWS Lambda関数を用いてDynamoDBとToggleボタンを連携させてみた

はじめに

AWSのLambda関数を用いてDynamoDBとToggleボタンを連携させてみました。
大まかな流れは以下の通りです。

1. DynamoDBの作成
2. Vueプロジェクトの作成
3. DynamoDBの値に応じてToggleボタンの状態を変化させる
4. Toggleボタンの状態に応じてDynamoDBの値を変化させる

開発環境

• Windows 11
• Vue CLI 5.0.8
• Vue 2.7.14
• npm 6.14.14
• Node.js 14.17.5

実装

DynamoDBの作成

まず、DynamoDBにアクセスし、テーブルを作成します。
設定は以下のようにしました。

Vueプロジェクトの作成

続いて、Vueプロジェクトを作成します。
以下のコマンドを実行してVueアプリケーションを作成します。

ターミナル

vue create フォルダ名

フォルダ名は任意です。

作成できたら、以下のコマンドを実行して、Vuetifyを追加します。

ターミナル

vue add vuetify

途中でプリセットの選択を聞かれるので、Default(recommended)を選択します。
今回は作成したプロジェクト内のHelloWorld.vueを編集する形で進めます。

DynamoDBの値に応じてToggleボタンの状態を変化させる

続いて、DynamoDBの値に応じてToggleボタンの状態を変化させます。

まず、Lambdaにアクセスし、Lambda関数を作成します。
今回は、DynamoDBのtoggleの値を取得する関数と変更する関数の2つを作成します。
以下、DynamoDBのtoggleの値を取得する関数はget-toggle-status、DynamoDBのtoggleの値を変更する関数はupdate-toggle-statusと表記します。

まず、get-toggle-statusの作成を行います。

次に、設定を行います。
初期設定では、タイムアウトが3秒に設定されていますが、短いので30秒に変更します。

既存のロールにアクセスし、AmazonDynamoDBFullAccessにチェックを入れます。

今回はLambda関数単体のURLを用いるので、関数URLを作成します。

関数URLの設定は以下の通りです。

次に、get-toggle-statusのlambda_function.pyを以下のようにします。
テーブル名はご自身のテーブル名に合わせてください。

lambda_function.py

import json
import boto3

dynamodb = boto3.resource('dynamodb')
table = dynamodb.Table('テーブル名') 

def lambda_handler(event, context):
    response = table.get_item(Key={'id': '1'})
    toggle_status = response['Item']['toggle']
    return {
        'statusCode': 200,
        'body': json.dumps({'toggle': toggle_status}),
        'headers': {
            'Access-Control-Allow-Headers': '*',
            'Access-Control-Allow-Origin': '*',
            'Access-Control-Allow-Methods': '*'
        }
    }

DynamoDBから、idが1、属性値がtoggleの値を取り出しています。

そして、Vue側でget-toggle-statusを叩き、DynamoDBのtoggleの値がtrueならばToggleボタンをON状態で表示、falseならばOFF状態で表示するようにします。
HelloWorld.vueの全体のコードを以下のように変更してください。
get-toggle-statusのURLはご自身のものに合わせてください。

HelloWorld.vue

<template>
  <v-switch v-model="toggleValue" label="Toggle" />
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      toggleValue: false,
    };
  },
  mounted() {
    axios.get('get-toggle-statusのURL')
      .then(response => {
        const toggleStatus = response.data.toggle;
        this.toggleValue = toggleStatus === true;
      })
      .catch(error => {
        console.log(error);
      });
  },
};
</script>

まず、v-switchタグを用いてToggleボタンを配置します。
次に、scriptタグ内のdataでtoggleValueという変数を定義し、v-modelでv-switchタグと紐づけます。
そして、axiosでget-toggle-statusを叩いてDynamoDBのtoggleの値を取得し、Toggleボタンの表示を更新します。

ここまで終えると、DynamoDBの値に応じてToggleボタンの状態が変化します。
DynamoDB側でbool値を切り替えると、Toggleボタンの表示が変わることが確認できます。

DynamoDBの値がTrueのときは、ToggleボタンがONに

DynamoDBの値がFalseのときは、ToggleボタンがOFFに

Toggleボタンの状態に応じてDynamoDBの値を変化させる

続いて、Toggleボタンの状態に応じてDynamoDBの値を変化させます。
まずは、get-toggle-statusと同じ手順でupdate-toggle-statusを作成し、関数URLの作成まで行ってください。

関数URLの作成まで終えたら、update-toggle-statusのlambda_function.pyを以下のようにしてください。

lambda_function.py

import boto3
import json

dynamodb = boto3.resource('dynamodb')
table_name = 'テーブル名'
table = dynamodb.Table(table_name)

def lambda_handler(event, context):
        toggle_state = json.loads(event['body'])['toggleValue']
        if toggle_state:
            new_value = True
        else:
            new_value = False
        response = table.update_item(
            Key={
                'id': '1'
            },
            UpdateExpression='SET toggle = :val',
            ExpressionAttributeValues={
                ':val': new_value
            },
            ReturnValues='UPDATED_NEW'
        )
        return {
            'statusCode': 200,
            'body': json.dumps(response),
            'headers': {
                'Access-Control-Allow-Headers': '*',
                'Access-Control-Allow-Origin': '*',
                'Access-Control-Allow-Methods': '*'
            }
        }

Toggleボタンが切り替わったタイミングで、更新されたtoggleValueの値が送られてくるので、その値がtrueならばDynamoDBのtoggleをTrueに、falseならばFalseにします。

そして、Vue側ではToggleが切り替わったタイミングでtoggleValueの値を更新し、更新された値をupdate-toggle-statusにPOSTします。

HelloWorld.vue

<template>
  <v-switch v-model="toggleValue" label="Toggle" @change="updateToggleState" />
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      toggleValue: false,
    };
  },
  mounted() {
    axios.get('get-toggle-statusのURL')
      .then(response => {
        const toggleStatus = response.data.toggle;
        this.toggleValue = toggleStatus === true;
      })
      .catch(error => {
        console.log(error);
      });
  },
  methods: {
    updateToggleState() {
      axios.post('update-toggle-statusのURL', {
        toggleValue: this.toggleValue,
      })
        .then(response => {
          console.log(response.data);
        })
        .catch(error => {
          console.error(error);
        });
    },
  },
};
</script>

まず、updateToggleStateというメソッドを作成し、axiosでtoggleValueの値をupdate-toggle-statusにPOSTするようにします。
次に、v-switchタグ内に@change="updateToggleState"を追加し、Toggleボタンが切り替わったタイミングでupdateToggleStateを呼び出すようにします。

ここまで終えると、Toggleボタンの状態に応じてDynamoDBの値が変化します。

ToggleボタンをONに切り替えると、DynamoDBの値がTrueに

ToggleボタンをOFFに切り替えると、DynamoDBの値がFalseに

おわりに

今回はLambda関数を用いてDynamoDBとToggleボタンを連携させてみました。
Toggleボタンでデータベースのbool値を変更するケースはよくあると思うので、使いこなしていきたいと思います！
関数URLもAPI Gatewayが不要で、やってみたら便利でした。