AWS Amplifyのハンズオン

Last updated at 2024-11-14Posted at 2024-11-14

AWS Amplify

概要

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

ハンズオン

アーキテクチャ

手順

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

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

Sampleの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が異なるのに注意。

CORSを有効にするとOPTIONSの項目が作成される

APIの検証をする。ハンズオンでは画面上からテストできるようだったが見当たらないのでPostmanを利用して実行できることを確認する。

データテーブルを作成する

DynamoDBテーブルを作成する

Lamda関数にDynamoDBへのアクセス許可の設定をIAMから行う
設定タブ＞アクセス権限にあるロール名のリンクからIAMに移動

許可を追加＞インラインポリシーを追加からハンズオンに記載されている設定を追加する

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テーブルに追加されることを確認する。