サーバーレスのウェブアプリケーションを構築3 バックエンドの構築

2021.07.16

こんにちは。イムチェジョンです。
前はフロントエンドとユーザー管理をやってみました。 今回のブログではAWS Lambda、Amazon DynamoDBを利用し、バックエンドの構築しようと思います。

[サーバーレスのウェブアプリケーションを構築シリーズ]
1. AWS Amplify を使った静的ウェブホスティング
2. Amazon Cognito を使ったユーザー管理
3. バックエンドの構築 (AWS Lambda、Amazon DynamoDB)
4. RESTful API (Amazon API Gateway、 AWS Lambda)

アジェンダ

  1. 今回の目標
  2. AWS Lambda、Amazon DynamoDBを利用してバックエンドの構築
  3. まとめ

0. 今回の目標

目標:AWS Lambda、Amazon DynamoDBを利用し、バックエンド構築する。

バックエンドで実行するのはユーザーが地図をクリックした時にその情報がDynamoDBに保存できるように作ることです。

1. AWS Lambda、Amazon DynamoDBを利用してバックエンドの構築

2-1. Amazon DynamoDBのテーブル作成

新しいテーブルを作成します。

テーブル名:Rides
パーティションキー:RideId
デフォルト設定を使用します。

作成済みのテーブルでリソースネーム (ARN)を覚えておきます。

2-2. Lambda関数のためのIAMロール作成

Lambda関数のためのIAMロール作成しましょう。
まず、IAMロールを作成します。 ユーズケースでLambdaを選択します。

アクセス権限ポリシーでAWSLambdaBasicExecutionRoleを追加します。

IAMロール名を入力し、作成をします。

作成完了のページでインラインポリシーにddb:PutItemを追加したいので、インラインポリシー追加をクリックします。

以下の設定をします。
サービス:DynamoDB
アクション:PutItem
リソース:指定 / ARNに上で作成したDynamoDBのリソースネーム (ARN)

ポリシーの名前を入力し、作成をします。

IAMロールページでインラインポリシーが追加されているのが確認できます。

2-3. 処理のためLambda関数を作成

次はLambda関数を作成してみましょう。関数は位置の情報をいただき、地図の情報の変えてDynamoDBに保存する役割をします。

以下の設定をします。
関数名:RequestSite
ランタイム:Node.js
実行ロール:既存のロールを使用するを選択
既存ロール:上で作ったAmplifySiteLambdaを選択

index.jsのコードソースを変更します。
ユーザーが地図をクリックした時にその情報がDynamoDBに保存するコードソースを作成します。
詳しいコードソースはこちらで参考してください。

2-4. テスト

上で作成したLambdaをテストしてみましょう。

以下の設定で新しいテストイベントを生成します。テストには位置の情報を入れて関数に位置の情報を送るように作成します。
イベント名:TestRequestEvent

{
    "path": "/ride",
    "httpMethod": "POST",
    "headers": {
        "Accept": "*/*",
        "Authorization": "eyJraWQiOiJLTzRVMWZs",
        "content-type": "application/json; charset=UTF-8"
    },
    "queryStringParameters": null,
    "pathParameters": null,
    "requestContext": {
        "authorizer": {
            "claims": {
                "cognito:username": "the_username"
            }
        }
    },
    "body": "{\"PickupLocation\":{\"Latitude\":47.6174755835663,\"Longitude\":-122.28837066650185}}"
}

上で生成したテストを実行します。

成功した結果を確認します。 テストで送った位置情報を基準に結果の情報が結果に出ました。

{
  "statusCode": 201,
  "body": "{\"RideId\":\"f2OM0UpjWbMmZWfdPPD4rA\",\"Unicorn\":{\"Name\":\"Bucephalus\",\"Color\":\"Golden\",\"Gender\":\"Male\"},\"UnicornName\":\"Bucephalus\",\"Eta\":\"30 seconds\",\"Rider\":\"the_username\"}",
  "headers": {
    "Access-Control-Allow-Origin": "*"
  }
}

DynamoDBにも成功的に情報が保存されました。

2. まとめ

今回はAWS LambdaとAmazon DynamoDBを利用してバックエンドの構築してみました。
次はAmazon API Gatewayを利用し、ウェブブラウザでLambda関数を実行できるようにしてみます。