🗄️

AWS Amplify Gen2をチュートリアルで体験する１

2024/08/16に公開

AWS

Amplify

tech

Next.jsフレームワークとAmplify Gen2を使ったフルスタックなアプリケーション開発を試してみます。Gen1は使ったことがないし、Next.jsもほぼ未経験状態からスタート。

少しだけ入口を行ったり来たりしている状態ですが、まずはチュートリアルのテンプレートを使ってGithubリポジトリの作成からAmplify Gen2環境の作成まで進めてみて、全体を俯瞰してみてみたいと思います。

テンプレートから環境セットアップ

以下のドキュメントにあるテンプレートを使ったプロジェクト新規作成を試してみます。Githubのアカウントは必要なので、もってない場合は先に済ませておく必要がある。

とりあえずプライベートで作成

しばらくすると、リポジトリとアプリケーションコードが生成

テンプレートで生成されたコード

package.jsonの中身。Next.jsとAmplify関連のモジュールがインストールされています。

//package.json
{
  "name": "aws-amplify-gen2",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@aws-amplify/ui-react": "^6.1.13",
    "aws-amplify": "^6.4.0",
    "next": "14.1.1",
    "react": "^18",
    "react-dom": "^18"
  },
  "devDependencies": {
    "@aws-amplify/backend": "^1.0.4",
    "@aws-amplify/backend-cli": "^1.1.1",
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "typescript": "^5.3.2"
  }
}

Reactのコードで、TODOアプリがサンプルとして生成されてます。ほかにもレイアウト関連のコードはありますが省略。

//app/page.tsx
"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 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 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>
  );
}

amplify/backend.ts

バックエンドのコード。amplify-backendモジュールを使っていて、バックエンドで必要な認証とかデータ処理なんかのコア機能はここに用意されているので、実装そのものは、簡素な感じ。

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

defineBackend({
  auth,
  data,
});

amplify/auth/resource.ts

認証処理の定義ですかね。ここでもamplify-backendモジュールを使います。詳細追っかけるのは、後日にします。

//amplify/auth/resource.ts
import { defineAuth } from "@aws-amplify/backend";

/**
 * Define and configure your auth resource
 * @see https://docs.amplify.aws/gen2/build-a-backend/auth
 */
export const auth = defineAuth({
  loginWith: {
    email: true,
  },
});

amplify/data/resource.ts

schemaってあるので、ここでデータ定義をしてます。後半のコメントは、フロントエンド側でどうやって使うのかのサンプルがあります。実際にpage.tsxで実装されてます。

//amplify/data/resource.ts
import { type ClientSchema, a, defineData } from "@aws-amplify/backend";

/*== 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()]),
});

export type Schema = ClientSchema<typeof schema>;

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

/*== STEP 2 ===============================================================
Go to your frontend source code. From your client-side code, generate a
Data client to make CRUDL requests to your table. (THIS SNIPPET WILL ONLY
WORK IN THE FRONTEND CODE FILE.)

Using JavaScript or Next.js React Server Components, Middleware, Server 
Actions or Pages Router? Review how to generate Data clients for those use
cases: https://docs.amplify.aws/gen2/build-a-backend/data/connect-to-API/
=========================================================================*/

/*
"use client"
import { generateClient } from "aws-amplify/data";
import type { Schema } from "@/amplify/data/resource";

const client = generateClient<Schema>() // use this Data client for CRUDL requests
*/

/*== STEP 3 ===============================================================
Fetch records from the database and use them in your frontend component.
(THIS SNIPPET WILL ONLY WORK IN THE FRONTEND CODE FILE.)
=========================================================================*/

/* For example, in a React component, you can use this snippet in your
  function's RETURN statement */
// const { data: todos } = await client.models.Todo.list()

// return <ul>{todos.map(todo => <li key={todo.id}>{todo.content}</li>)}</ul>