AWS Amplifyのハンズオン

# AWS Amplify

## 概要

↓ の AWS Amplify のハンズオンを行い、バージョン違いによる内容の差異や詰まったところを記載しつつログを残す。
https://aws.amazon.com/jp/getting-started/hands-on/build-web-app-s3-lambda-api-gateway-dynamodb/

# ハンズオン

## アーキテクチャ
![AWS Diagrams (コピー) (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/658524/1ee38379-84c4-bae0-569d-c3ff9e6f0679.png)

## 手順

- ウェブアプリケーションを作成する
- サーバーレス関数を構築する
- サーバーレス関数を WEB アプリケーションにリンクする
- データテーブルを作成する
- WEB アプリケーションに対話性を追加する
- リソースをクリーンアップする

## ウェブアプリケーションを作成する

[Sample](https://aws.amazon.com/jp/getting-started/hands-on/build-web-app-s3-lambda-api-gateway-dynamodb/module-one/?e=gs2020&p=build-a-web-app-intro)のHTMLファイルをzipにしてアップロードしてデプロイ

## サーバーレス関数を構築する
JavaScriptのHelloWorld関数を作成する。ハンズオンに掲載されているSampleコードはNode.js 16.xのため、Node.js 20.xではそのままでは動かないため修正が必要。
```
export const handler = async (event) => {
  const name = JSON.stringify(`Hello from Lambda, ${event.firstName} ${event.lastName}`);
  const response = {
      statusCode: 200,
      body: name
  };

  return response;
};
```
関数を作成後はデプロイし、テストタブからイベントを作成・保存・テストしエラーが発生しないことを確認する。

## サーバーレス関数を WEB アプリケーションにリンクする
API Gatewayから新しいAPIを作成し作成したLamdaの関数と紐づける。
CORSを有効にする。ハンズオンとUIが異なるのに注意。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/658524/4328c67a-6841-026d-951a-f159e04ae3a5.png)
CORSを有効にするとOPTIONSの項目が作成される
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/658524/726dd6b1-8fd5-7316-f2f9-9415852488ad.png)
APIの検証をする。ハンズオンでは画面上からテストできるようだったが見当たらないのでPostmanを利用して実行できることを確認する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/658524/5640ad5a-8140-a81d-bf17-d4324d1e003f.png)

## データテーブルを作成する
DynamoDBテーブルを作成する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/658524/fdc2aa1c-4ac5-5276-c187-4f674712d8cb.png)

Lamda関数にDynamoDBへのアクセス許可の設定をIAMから行う
設定タブ＞アクセス権限にあるロール名のリンクからIAMに移動
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/658524/0cc794e3-5dfb-eaf3-6085-6c5de8b8aea4.png)
許可を追加＞インラインポリシーを追加からハンズオンに記載されている設定を追加する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/658524/1a22c1e6-9794-2b21-0f40-972795986949.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/658524/2f93a9b8-b68d-4d17-319f-0d3a318e1fca.png)

Lamada関数のコードをAWS SDK（JavaScript）を使用してDynamoDBテーブルに書き込む処理へ変更する
```
// AWS SDKモジュールをインポート
import { DynamoDBClient, PutItemCommand } from "@aws-sdk/client-dynamodb";
// DynamoDBクライアントを作成
const dynamo = new DynamoDBClient({ region: "ap-northeast-1" }); // リージョンは適宜変更してください

// Lambda関数のエントリーポイントを定義
export const handler = async (event) => {
  // 現在の日付と時刻を取得
  const date = new Date();
  // 日付と時刻を人間が読みやすい形式で変数に格納
  const now = date.toISOString();
  const name = JSON.stringify(`Hello from Lambda, ${event.firstName} ${event.lastName}`);

  const PK = "id";
  const id = `${event.firstName}${event.lastName}`;
  // DynamoDBにデータを保存するパラメータを設定
  const command = new PutItemCommand({
    TableName: "HelloWorldDatabase",
    Item: {
      [PK]: { S: id },
      name: { S: name }
    },
  });

  try {
    // DynamoDBにPutItemCommandを送信
    await dynamo.send(command);

    // 成功時のレスポンスを作成
    const response = {
      statusCode: 200,
      body: JSON.stringify({ message: `Current time is: ${now}` })
    };

    // レスポンスを返す
    return response;
  } catch (err) {
    console.error("Error", err);
    
    // エラー時のレスポンスを作成
    return {
      statusCode: 500,
      body: JSON.stringify({ error: err.message })
    };
  }
};

```
変更をテストしDynamoDBテーブルに追加されることを確認する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/658524/71e7bff4-2f61-5dfc-ec78-af72a9d734d9.png)

## WEB アプリケーションに対話性を追加する
AmplifyコンソールからWEBアプリケーションをハンズオンのソースで更新する。リクエストするURLは以下のキャプチャのようにAPI Gatewayから確認できる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/658524/a59a8950-1c13-80d1-27cd-07e3205cec98.png)
更新されたWEBアプリケーションからAPIを実行し、DynamoDBテーブルに追加されることを確認する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/658524/cdea28e7-eedc-e142-4c31-43abf1cdd655.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/658524/4a52a658-a5ee-c735-c906-897b4a212e9d.png)

## リソースをクリーンアップする
ハンズオンの内容に従って作成したリソースを削除する。
Amplifyは以下から削除可能
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/658524/981c370e-9c2a-a906-8e84-be4bf70b844b.png)


# かかったコスト
ハンズオンでは最短所要時間が35分となっていましたが、実施した期間としては5日間程度かかりました。
無料利用枠に収まっているためお金は発生しませんでした。

# 詰まったポイント
- 作成したAmplifyアプリが見つからない
→ リージョンが異なっていた
- Nodeのバージョンが違いSampleソースでは動かない
→ ChatGPTにバージョンを指定して修正すると早かった
- DynamoDBのパーテーションキーを"数値"で作成したことによるエラー
→ リクエストを送るときは文字列で送る必要がある

# FigmaでAWS アーキテクチャ図の作成
以下リンクのFigmaからAWS diagram softwareのテンプレートを取得して作成する
https://aws.amazon.com/jp/architecture/icons/

# まとめ
AWS の UI が変わっていること・Node のバージョンが異なることでハンズオンの通りにいかないところは苦戦しつつも実践することができた。
次は、サーバレスではなくWEBサーバを使うパターンやDockerを利用したパターン、CI/CDを取り入れたパターン等試したい