LambdaもDynamoDBもコードから実装可能？AWS Amplify Gen2を使ってみた

git clone https://github.com/<github-user>/amplify-gen2-app.git

npm install 

"use client";

import { useState, useEffect } from "react";
import { generateClient } from "aws-amplify/data";
import type { Schema } from "@/amplify/data/resource";
import "./../app/app.css";
import { Amplify } from "aws-amplify";
import outputs from "@/amplify_outputs.json";
import "@aws-amplify/ui-react/styles.css";

Amplify.configure(outputs);

const client = generateClient<Schema>();

export default function App() {
  const [todos, setTodos] = useState<Array<Schema["Todo"]["type"]>>([]);
  
  function deleteTodo(id: string) {
    client.models.Todo.delete({ id })
  }

  function listTodos() {
    client.models.Todo.observeQuery().subscribe({
      next: (data) => setTodos([...data.items]),
    });
  }

  useEffect(() => {
    listTodos();
  }, []);

  function createTodo() {
    client.models.Todo.create({
      content: window.prompt("Todo content"),
    });
  }

  return (
    <main>
      <h1>My todos</h1>
      <button onClick={createTodo}>+ new</button>
      <ul>
        {todos.map((todo) => (
          <li onClick={() => deleteTodo(todo.id)} key={todo.id}>{todo.content}</li>
        ))}
      </ul>
      <div>
        🥳 App successfully hosted. Try creating a new todo.
        <br />
        <a href="https://docs.amplify.aws/nextjs/start/quickstart/nextjs-app-router-client-components/">
          Review next steps of this tutorial.
        </a>
      </div>
    </main>
  );
}

aws configure sso

npx ampx sandbox --profile <認証情報を設定したプロファイル 例:amplify-policy-xxxxxx>

import { defineFunction } from '@aws-amplify/backend';

export const helloAmplify = defineFunction({
　// オプションで関数の名前を指定できます（デフォルトはディレクトリ名です）
  name: 'hello-amplify',
  // オプションでハンドラーのパスを指定できます（デフォルトは "./handler.ts" です）
  entry: './handler.ts'
});

import type { Handler } from 'aws-lambda';

export const handler: Handler = async (event, context) => {
// 関数コードはここに記述します
  return 'Hello, Amplify Gen2!?';
};

import { defineBackend } from '@aws-amplify/backend';
import { auth } from './auth/resource.js';
import { data } from './data/resource.js';
import { helloAmplify } from './functions/helloamplify/resource';

defineBackend({
  auth,
  data,
  helloAmplify,
});

import { type ClientSchema, a, defineData } from "@aws-amplify/backend";
import { helloAmplify } from "../functions/helloamplify/resource";

/*== STEP 1 ===============================================================
The section below creates a Todo database table with a "content" field. Try
adding a new "isDone" field as a boolean. The authorization rule below
specifies that any user authenticated via an API key can "create", "read",
"update", and "delete" any "Todo" records.
=========================================================================*/
const schema = a.schema({
  Todo: a
    .model({
      content: a.string(),
    })
    .authorization((allow) => [allow.publicApiKey()]),

  helloAmplify: a
    .query()
    .returns(a.string())
    .authorization((allow) => [allow.publicApiKey()])
    .handler(a.handler.function(helloAmplify)),    
});

export type Schema = ClientSchema<typeof schema>;

export const data = defineData({
  schema,
  authorizationModes: {
    defaultAuthorizationMode: "apiKey",
    apiKeyAuthorizationMode: {
      expiresInDays: 30,
    },
  },
});

import { generateClient } from "aws-amplify/data";
import type { Schema } from "@/amplify/data/resource";
import { Amplify } from "aws-amplify";
import outputs from "@/amplify_outputs.json";
Amplify.configure(outputs)
const client = generateClient<Schema>();

export async function GET() {
  try {
    const result = await client.queries.helloAmplify();
    return Response.json({ message: result });
  } catch (error) {
    return Response.json({ error: "Error calling helloAmplify" }, { status: 500 });
  }
}

npm run dev

import { type ClientSchema, a, defineData } from "@aws-amplify/backend";
import { helloAmplify } from "../functions/helloamplify/resource";

～～省略～～
const schema = a.schema({
  Todo: a
    .model({
      content: a.string(),
    })
    .authorization((allow) => [allow.publicApiKey()]),
～～中略～～
});

～～省略～～

import { type ClientSchema, a, defineData } from "@aws-amplify/backend";
import { helloAmplify } from "../functions/helloamplify/resource";

～～省略～～
const schema = a.schema({
  Todo: a
    .model({
      content: a.string(),
    })
    .authorization((allow) => [allow.publicApiKey()]),

  Invoices: a
    .model({
      InvoiceID: a.id().required(),
      BillNo: a.string().required(),
      SlipNo: a.string().required(),
      CustomerID: a.string().required(),
      CustomerName: a.string().required(),
      Products: a.string().required(),
      Number: a.integer().required(),
      UnitPrice: a.float().required(),
      Date: a.string().required(),
    })
    .identifier(["InvoiceID"])
    .authorization((allow) => [allow.publicApiKey()]),

～～中略～～
});

～～省略～～

import { NextRequest, NextResponse } from 'next/server';
import { generateClient } from "aws-amplify/data";
import type { Schema } from "@/amplify/data/resource";
import { Amplify } from "aws-amplify";
import outputs from "@/amplify_outputs.json";

// Amplify の設定を読み込んで初期化
Amplify.configure(outputs);

// データ用のクライアントを生成
const client = generateClient<Schema>();

// GETリクエスト: GraphQLのobserveQueryを使い、全てのInvoicesレコードを取得
export async function GET() {
  return new Promise<Response>((resolve, reject) => {
    const subscription = client.models.Invoices.observeQuery({ })
      .subscribe({
        next: (snapshot: any) => {
          subscription.unsubscribe();
          resolve(NextResponse.json(snapshot.items));
        },
        error: (error: any) => {
          reject(NextResponse.json({ error: error.message }, { status: 500 }));
        }
      });
  });
}

// POST リクエストハンドラ: GraphQLのcreate操作を使って、請求書（Invoice）データを登録
export async function POST(request: NextRequest) {
  try {
    const body = await request.json();
    const invoiceData = {
      InvoiceID: body.InvoiceID,
      BillNo: body.BillNo,
      SlipNo: body.SlipNo,
      CustomerID: body.CustomerID,
      CustomerName: body.CustomerName,
      Products: body.Products,
      Number: body.Number,
      UnitPrice: body.UnitPrice,
      Date: body.Date,
    };    
    const result = await client.models.Invoices.create(invoiceData);
    return NextResponse.json({ result });
  } catch (error: any) {
    console.error("Error creating Invoice:", error);
    return NextResponse.json({ error: error.message }, { status: 500 });
  }
}

import { NextResponse, NextRequest } from 'next/server';
import { generateClient } from "aws-amplify/data";
import type { Schema } from "@/amplify/data/resource";
import { Amplify } from "aws-amplify";
import outputs from "@/amplify_outputs.json";

// Amplify の設定を読み込んで初期化
Amplify.configure(outputs);

// データ用のクライアントを生成
const client = generateClient<Schema>();

// GET: 指定された Invoice ID に一致するレコードを取得
export async function GET(request: NextRequest, { params }: { params: Promise<{ id: string }> }) {
  const id = (await params).Id;
  return new Promise<Response>((resolve, reject) => {
    const subscription = client.models.Invoices.observeQuery({ filter: { InvoiceID: { eq: id } } })
      .subscribe({
        next: (snapshot: any) => {
          subscription.unsubscribe(); 
          resolve(NextResponse.json(snapshot.items));
        },
        error: (error: any) => {
          reject(NextResponse.json({ error: error.message }, { status: 500 }));
        }
      });
  });
}

// PUT: 指定された Invoice ID のレコードを更新（update を使用）
export async function PUT(request: NextRequest, { params }: { params: Promise<{ id: string }> }) {
  try {
    const id = (await params).id;
    const body = await request.json();
    const result = await client.models.Invoices.update({ InvoiceID: id, ...body });
    return NextResponse.json({ result });
  } catch (error: any) {
    return NextResponse.json({ error: error.message }, { status: 500 });
  }
}

// DELETE: 指定された Invoice ID のレコードを削除（delete を使用）
export async function DELETE(request: NextRequest, { params }: { params: Promise<{ id: string }> }) {
  try {
    const id = (await params).id;
    const result = await client.models.Invoices.delete({ InvoiceID: id });
    return NextResponse.json({ result });
  } catch (error: any) {
    return NextResponse.json({ error: error.message }, { status: 500 });
  }
}

npm install swagger-ui-react @types/swagger-ui-react

'use client';

import dynamic from 'next/dynamic';
import styles from './page.module.css';
import 'swagger-ui-react/swagger-ui.css';

const SwaggerUI = dynamic(() => import('swagger-ui-react'), { ssr: false });

export default function SwaggerUIPage() {
  return (
    <div className={styles.swaggerContainer}>
      <h1>Invoices API Documentation</h1>
      <SwaggerUI url="/swagger.json" />
    </div>
  );
}

.swaggerContainer {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background: white !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: auto !important;
  z-index: 1000 !important;
  display: block !important;
}

.swaggerContainer * {
  box-sizing: border-box;
}