Amplify Data をセットアップする
このガイドでは、Amplify Data をセットアップする方法を学びます。これには、TypeScript を使用してデータモデルを定義してリアルタイム API とデータベースを構築し、認可ルールで API をセキュアにすることが含まれます。また、カスタムユースケースにスケーリングするために AWS Lambda を使用することも紹介します。
開始する前に、以下が必要です:
Amplify Data を使うと、数分でデータベースによるセキュアで リアルタイム API を構築できます。TypeScript を使用してデータモデルを定義した後、Amplify はリアルタイム API をデプロイします。この API は AWS AppSync によって提供され、Amazon DynamoDB データベースに接続されています。認可ルールで API をセキュアにでき、AWS Lambda でカスタムユースケースにスケーリングできます。
データバックエンドを構築する
すでに npm create amplify@latest を実行している場合、amplify/data/resource.ts ファイルが表示されます。これは、データバックエンドを構成するための中心的な場所です。最も重要な要素は schema オブジェクトで、バックエンドのデータモデル (a.model()) とカスタムクエリ (a.query())、ミューテーション (a.mutation())、サブスクリプション (a.subscription()) を定義します。
import { a, defineData, type ClientSchema } from '@aws-amplify/backend';
const schema = a.schema({ Todo: a.model({ content: a.string(), isDone: a.boolean() }) .authorization(allow => [allow.publicApiKey()])});
// Used for code completion / highlighting when making requests from frontendexport type Schema = ClientSchema<typeof schema>;
// defines the data resource to be deployedexport const data = defineData({ schema, authorizationModes: { defaultAuthorizationMode: 'apiKey', apiKeyAuthorizationMode: { expiresInDays: 30 } }});すべての a.model() は、クラウドで以下のリソースを自動的に作成します:
- レコードを保存するための DynamoDB データベーステーブル
- レコードを作成、読取 (リスト/取得)、更新、削除するためのクエリおよびミューテーション API
- 各レコードが最初に作成されたとき、または最後に更新されたときを追跡するのに役立つ
createdAtおよびupdatedAtフィールド - レコードの作成、更新、削除イベントをサブスクライブするためのリアルタイム API
allow.publicApiKey() ルールは、API キーで認証されたすべての人が、todo を作成、読取、更新、削除できることを指定します。
これらのリソースをクラウドサンドボックスにデプロイするには、ターミナルで次の CLI コマンドを実行します:
npx ampx sandboxアプリケーションコードをデータバックエンドに接続する
クラウドサンドボックスが起動して実行されている場合、API エンドポイント URL や API キーなどのデータバックエンドへの接続情報を含む amplify_outputs.json ファイルも作成されます。
フロントエンドコードをバックエンドに接続するには、以下を実行する必要があります:
- Amplify ライブラリを Amplify クライアント構成ファイル (
amplify_outputs.json) で構成する - Amplify ライブラリから新しい API クライアントを生成する
- エンドツーエンドの型安全性を備えた API リクエストを実行する
まず、Amplify クライアントライブラリをプロジェクトにインストールします:
npm add aws-amplifyアプリのエントリーポイント (通常、Vite で作成された React アプリの main.tsx) で、次の編集を行います:
import { Amplify } from 'aws-amplify';import outputs from '../amplify_outputs.json';
Amplify.configure(outputs);バックエンドにデータを書き込む
最初に、新しい todo アイテムを作成するボタンを追加しましょう。"create Todo" API リクエストを実行するには、フロントエンドコードで generateClient() を使用してデータクライアントを生成し、Todo モデルの .create() 操作を呼び出します。Data クライアントは完全に型付きされたクライアントで、IDE 内のコード補完を提供します。IDE 内のこのコード補完機能を有効にするには、generateClient 関数に Schema タイプを渡します。
import type { Schema } from '../amplify/data/resource'import { generateClient } from 'aws-amplify/data'
const client = generateClient<Schema>()
export default function TodoList() { const createTodo = async () => { await client.models.Todo.create({ content: window.prompt("Todo content?"), isDone: false }) }
return <div> <button onClick={createTodo}>Add new todo</button> </div>}ローカル開発モードで npm run dev でアプリケーションを実行して、todo を作成した後にネットワークタブを確認します。/graphql エンドポイントへの成功したリクエストが表示されるはずです。
バックエンドからデータを読み込む
次に、すべての todo をリストし、todo が追加された後に todo を再度取得します:
import { useState, useEffect } from "react";import type { Schema } from "../amplify/data/resource";import { generateClient } from "aws-amplify/data";
const client = generateClient<Schema>();
export default function TodoList() { const [todos, setTodos] = useState<Schema["Todo"]["type"][]>([]);
const fetchTodos = async () => { const { data: items, errors } = await client.models.Todo.list(); setTodos(items); };
useEffect(() => { fetchTodos(); }, []);
const createTodo = async () => { await client.models.Todo.create({ content: window.prompt("Todo content?"), isDone: false, });
fetchTodos(); }
return ( <div> <button onClick={createTodo}>Add new todo</button> <ul> {todos.map(({ id, content }) => ( <li key={id}>{content}</li> ))} </ul> </div> );}リアルタイム更新をサブスクライブする
observeQuery を使用して、バックエンドデータのライブフィードをサブスクライブすることもできます。コードをリアルタイム observeQuery を使用するようにリファクタリングしましょう。
import type { Schema } from "../amplify/data/resource";import { useState, useEffect } from "react";import { generateClient } from "aws-amplify/data";
const client = generateClient<Schema>();
export default function TodoList() { const [todos, setTodos] = useState<Schema["Todo"]["type"][]>([]);
useEffect(() => { const sub = client.models.Todo.observeQuery().subscribe({ next: ({ items }) => { setTodos([...items]); }, });
return () => sub.unsubscribe(); }, []);
const createTodo = async () => { await client.models.Todo.create({ content: window.prompt("Todo content?"), isDone: false, }); // no more manual refetchTodos required! // - fetchTodos() };
return ( <div> <button onClick={createTodo}>Add new todo</button> <ul> {todos.map(({ id, content }) => ( <li key={id}>{content}</li> ))} </ul> </div> );}結論
成功しました! Amplify Data で初めてのリアルタイム API とデータベースを作成する方法を学びました。
次のステップ
Amplify Data で発見することがたくさんあります。詳細については、以下をご覧ください: