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アプリケーションを作成します。

1ターミナル2vue create フォルダ名

フォルダ名は任意です。

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

1ターミナル2vue 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を以下のようにします。

テーブル名はご自身のテーブル名に合わせてください。

1lambda_function.py2import json3import boto345dynamodb = boto3.resource('dynamodb')6table = dynamodb.Table('テーブル名') 78def lambda_handler(event, context):9    response = table.get_item(Key={'id': '1'})10    toggle_status = response['Item']['toggle']11    return {12        'statusCode': 200,13        'body': json.dumps({'toggle': toggle_status}),14        'headers': {15            'Access-Control-Allow-Headers': '*',16            'Access-Control-Allow-Origin': '*',17            'Access-Control-Allow-Methods': '*'18        }19    }

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

そして、Vue側でget-toggle-statusを叩き、DynamoDBのtoggleの値がtrueならばToggleボタンをON状態で表示、falseならばOFF状態で表示するようにします。

HelloWorld.vueの全体のコードを以下のように変更してください。

get-toggle-statusのURLはご自身のものに合わせてください。

1HelloWorld.vue

まず、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を以下のようにしてください。

1lambda_function.py2import boto33import json45dynamodb = boto3.resource('dynamodb')6table_name = 'テーブル名'7table = dynamodb.Table(table_name)89def lambda_handler(event, context):10        toggle_state = json.loads(event['body'])['toggleValue']11        if toggle_state:12            new_value = True13        else:14            new_value = False15        response = table.update_item(16            Key={17                'id': '1'18            },19            UpdateExpression='SET toggle = :val',20            ExpressionAttributeValues={21                ':val': new_value22            },23            ReturnValues='UPDATED_NEW'24        )25        return {26            'statusCode': 200,27            'body': json.dumps(response),28            'headers': {29                'Access-Control-Allow-Headers': '*',30                'Access-Control-Allow-Origin': '*',31                'Access-Control-Allow-Methods': '*'32            }33        }

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

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

1HelloWorld.vue

まず、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が不要で、やってみたら便利でした。