React × Amplify × Dynamo環境を学ぶ

導入

皆さんこんにちは
最近化粧水用のスプレーノズルを買ったのですが、
高保湿タイプの化粧水は粘度が高く霧状にならないとの事で、顔面にストレートで飛んできてびっくりしてしまいました。
そういう時はおとなしく普通のノズルを買いましょう。。。。

今回の記事は前回でとりあえずできたReact×Amplify×Dynamoの環境を学ぶという事で、
各コンテンツの疑問点を自分なりにまとめていこうという記事になります。
半分は備忘録になると思いますが、お時間ある方はぜひ読んでいってください。

1. ) ディレクトリの状態

まず現状のディレクトリ構成が以下のような形になっています。
ここからまずは各ディレクトリの役割についてみていきます。

BLOG_BACKEND/
├─ .vscode/
│
├─ amplify/
│  ├─ backend/
│  │  ├─ api/
│  │  ├─ function/
│  │  ├─ storage/
│  │  └─ types/
│  │
│  ├─ backend-config.json
│  ├─ tags.json
│  └─ team-provider-info.json
│
├─ hooks/
│  ├─ post-push.sh.sample
│  └─ pre-push.sh.sample
│
├─ types/
│
├─ amplifyconfiguration.json
├─ aws-exports.js
├─ cli.json
├─ README.md
└─ .gitignore

2. ) Amplify

まずはAmplify関連のディレクトリになります。

📁 amplify/
呼んで字のごとくですが、amplifyの定義が基本的に入っています。

amplify/
├─ backend/
│  ├─ api/
│  ├─ function/
│  ├─ storage/
│  └─ types/
├─ backend-config.json
├─ tags.json
└─ team-provider-info.json

📁 amplify/backend/

AWS側に作られるリソースが 種類別 に入ります。

📁 api/

• API Gateway の定義
• REST / GraphQL API
• path（/hello など）や紐づくLambda情報

amplify add apiで追加したAPIの定義が以下のような形で色々入っています。
基本的には直接使うことは無いと思われます。

{
  "version": 1,
  "paths": {
    "/hello": {
      "name": "/hello",
      "lambdaFunction": "hello",
      "permissions": {
        "setting": "open"
      }
    },
    "/posts": {
      "name": "/posts",
      "lambdaFunction": "hello",
      "permissions": {
        "setting": "open"
      }
    }
  }
}

📁 function/

Lambda関数の実体
実際に書くコード（index.js / handler.ts など）
実際に処理を書くのはここだけだと思います。
前回までの学習だと /posts配下でGET,POST等の条件分岐を書いたりしました。

3. ) DynamoDB

📁 storage/

• DynamoDB / S3 などの定義
• テーブル名
• 主キー（partition key）

前回までの学習でpostsテーブルを作成しました。
その際の設定などがここに入っています。

{
  "tableName": "postsTable",
  "partitionKeyName": "id",
  "partitionKeyType": "S"
}

4. ) Lambda

よくあるディレクトリ構成

amplify/
└─ backend/
   └─ function/
      └─ hello/
         ├─ src/
         │  ├─ index.js        ← ★メイン処理
         │  └─ event.json      ← ローカルテスト用
         │
         ├─ package.json       ← 依存関係
         ├─ amplify.state      ← Amplify管理用
         └─ README.md

Lambdaではこのhelloのディレクトリ１つが AWS Lambda1つ分になっています。
なのでサービスを大きくするとディレクトリ数がどんどん増えていくイメージです。
今は勉強用にhelloですが、多分☆☆LIstとか☆☆DetailsとかAPI毎に増えていくと思います。

src/index.js
そして各ディレクトリの中に入っているindex.jsが本体になります。
前回までの学習でもここに処理を書いていました。

exports.handler = async (event) => {
  return {
    statusCode: 200,
    body: JSON.stringify({
      message: "Hello from Lambda!"
    }),
  };
};

src/event.json
こちらまだ使っていないですが、Localで動作確認ができる様です。

{
  "httpMethod": "GET",
  "path": "/hello"
}

5. ) AmplifyとLambdaの関係

• API Gatewayは入口
• Lambdaが中身（処理）

ブラウザ / curl
   ↓  HTTPリクエスト
API Gateway（/hello）
   ↓  event として渡す
Lambda（hello）
   ↓  return
API Gateway
   ↓
HTTPレスポンス

ではまず API GAteway（/hello）はどこにあるかと言うと、
cloudformation-templateの中にあります。
簡易的な例が出ていますが、実際に除くと色々書いてあって訳が分からないので諦めました。
要するにFunctionの対応した物を呼び出すという事が書いてあるようです。

amplify/
└─ backend/
   └─ api/
      └─ helloApi/
      　　└─build
         　 ├─ helloApi-cloudformation-template.json
         　 └─ parameters.json

"Paths": {
  "/hello": {
    "get": {
      "x-amazon-apigateway-integration": {
        "uri": {
          "Fn::Sub": [
            "arn:aws:apigateway:${region}:lambda:path/2015-03-31/functions/${lambdaArn}/invocations",
            {
              "lambdaArn": {
                "Fn::GetAtt": ["helloLambdaFunction", "Arn"]
              }
            }
          ]
        }
      }
    }
  }
}

ぶっちゃけ訳わからないのですが、ChatGPTによる分かり易い例えが以下
要するにGateway → Lambda → Gateway　となっている様です。

👤 クライアント
「GET /hello ください」

🚪 API Gateway
「あ、これは helloLambdaFunction に渡すやつだな」

⚙ Lambda
「event受け取った。処理して返すね」

🚪 API Gateway
「了解、HTTPレスポンスにして返す」

まとめ

思ったより長くなってしまいました。
結局一番大事なのは Gateway → lambda → Gateway
Amplifyは 自動構築・管理　をやってくれるという事ですね。

Amplifyがやってくれるので実際Gatewayもあまり意識することは無いような気がしました。
一旦今回はここまで、もう少し深堀したさもありますが長くなり過ぎなので、
次回はもう少し深堀するか何か作業しながら深堀す気まぐれでやりたいと思います。

それではまたお会いしましょう(｀･ω･´)ゞ