フロントエンドエンジニアがAWSを触る。

その１ テーブルを作成する

・[テーブルの作成]

・[テーブル名]入力
・[パーティションキー]入力
　→本記事では、idとします。

DynamoDBテーブル作成完了。

その２ IAMロール作成

・[ロールを作成]

・[AWSのサービス]
　→Lambdaのrole作成のため。
・[次へ]

・[Lambda]選択

・[AWSLambdaBasicExecutionRole]選択

・[AmazonDynamoDBFullAccess]選択
・[次へ]選択

・[ロール名]入力
その他はdefaultのまま。

ロール作成完了。

その３ Lambda関数の作成

・[関数の作成]選択

・[関数名]任意入力
・[ランタイム：python3.9]選択
→本記事ではpythonで作成します。

・[既存のロールを使用する]選択
・[既存のロール：その２で作成したロール]選択
・画面下部の[関数の作成]選択

関数の作成ができました。ここからは関数を編集します。

コードソース欄：

lambda_function.py

import boto3
import json

dynamodb = boto3.resource('dynamodb')
table    = dynamodb.Table('data-list')

def post_users(requestJSON):
    table.put_item(Item={'id': requestJSON['id'], 'title': requestJSON['title'], 'price': requestJSON['price'], 'decribe': requestJSON['decribe']})

def lambda_handler(event, context):
    request = json.loads(event['body'])
    post_users(request)

・注意：Deployを忘れずに。

その4 APIGateway

・[RESTAPI 構築]選択

・[プロトコルを選択する：REST]
・[新しいAPIの作成：新しいAPI]
・[名前と説明 API名*：任意名]
・[APIの作成]選択

リソースの作成

作成できました。

メソッドの作成

・[アクション]選択
・[メソッドの作成]選択

・GET等のメソッドを作成します。
・Lambda関数以外はdefault状態。
・[Lambda関数：その３で作成したLambda関数]選択
・[保存]-[OK]

・[統合リクエスト]選択

・[マッピングテンプレート]選択
・[マッピングテンプレートの追加]選択

・[マッピングテンプレート下部]下記code添付 - [保存]選択

//POST メソッドの場合

post.

{
    "body" : "$util.escapeJavaScript($input.body)"
}

//GET メソッドの場合

get.

{
    "id" : "$input.params('id')"
}

・[application/json]入力
・[はい、この統合を保護します]選択

その５ Windowsのcmdで実行

cmd.

curl -X POST -H "Content-Type: application/json" -d "{\"id\":\"01\",\"title\":\"魔王勇者\",\"price\":\"250000\",\"decribe\":\"魔王勇者の冒険\"}"  https://********************/******/*****

・[APIGateway]-[ステージ]URLの呼び出しのURLをコピペ

POSTが成功しました。
※GET,PUT,DELETE,POSTいずれも上記手順で対応可能です。
※Lambda関数のcodeは実行したいAPI内容により異なります。

その6 AngularアプリからPOST実行するには

・[CORSの有効化]選択

・[Access-Control-Allow-Origin*]に許可したいオリジンを入力。
→一時的に試すためにCORSの有効化をしたい場合は'*'ままでもOK。

・[CORS を有効にして既存の CORS ヘッダーを置換]を選択

angular.ts

//[APIGateway]-[ステージ]URLの呼び出しのURLを urlで第一引数にセットしてます。
//DynamoDBに追加したい内容をbodyにobj型で第二引数にセット。
    const body = {
      id:"02",
      title:"転スラ",
      price:4890,
      decribe:"転生物語"
    }
    return this.HTTP.post(this.url,body);

http.ts

 //HTTPCLIENTで接続する方法です。
    /**
   * @POST
   * @param uri 
   */
    public post(uri:string,body:any):any{

      return this.HttpClient.post(uri,body)
      .pipe(
        catchError(this.handleError),
      );
    }

処理後に、AWS DynamoDBにレコード追加されてるか確認してレコード追加されてれば簡単ではあるが一連の流れはつかめたとおもいます。

最後に

休みの日に10時間くらいかけてAPIGatewayやLambdaの意味や役割がよくわかってない状態からここまでまとめましたため不備や誤りが生じているかもしれません。
実運用には本記事は参考にせず、一連の流れを簡単に把握する目的で閲覧ください。