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 で作成された Vue アプリの main.ts) で、次の編集を行います:
import { Amplify } from 'aws-amplify';import outputs from '../amplify_outputs.json';
Amplify.configure(outputs);バックエンドにデータを書き込む
<script setup lang="ts">import type { Schema } from '../../amplify/data/resource'import { generateClient } from 'aws-amplify/data'
const client = generateClient<Schema>()
async function createTodo() { await client.models.Todo.create({ content: window.prompt("Todo content?"), isDone: false })}</script>
<template> <div> <button @click="createTodo">Add new todo</button> </div></template>バックエンドからデータを読み込む
次に、すべての todo をリストし、todo が追加された後に todo を再度取得します:
<script setup lang="ts">import { onMounted, ref } from 'vue';import type { Schema } from '../../amplify/data/resource'import { generateClient } from 'aws-amplify/data'
const client = generateClient<Schema>()
// create a reactive reference to the array of todosconst todos = ref<Array<Schema['Todo']['type']>>([]);
function fetchTodos() { const { data: items, errors } = await client.models.Todo.list(); todos.value = items; }
async function createTodo() { await client.models.Todo.create({ content: window.prompt("Todo content?"), isDone: false }) fetchTodos();}
onMounted(() => { fetchTodos();});
</script>
<template> <div> <button @click="createTodo">Add new todo</button> <ul> <li v-for="todo in todos" :key="todo.id"> {{ todo.content }} </li> </ul> </div></template>リアルタイム更新をサブスクライブする
observeQuery を使用して、バックエンドデータのライブフィードをサブスクライブすることもできます。コードをリアルタイム observeQuery を使用するようにリファクタリングしましょう。
<script setup lang="ts">import { onMounted, ref } from 'vue';import type { Schema } from '../../amplify/data/resource'import { generateClient } from 'aws-amplify/data'
const client = generateClient<Schema>()
// create a reactive reference to the array of todosconst todos = ref<Array<Schema['Todo']["type"]>>([]);
function fetchTodos() { client.models.Todo.observeQuery().subscribe({ next: ({ items, isSynced }) => { todos.value = items }, }); }
async function createTodo() { await client.models.Todo.create({ content: window.prompt("Todo content?"), isDone: false }) // no more manual refetchTodos required! // - fetchTodos()}
onMounted(() => { fetchTodos();});
</script>
<template> <div> <button @click="createTodo">Add new todo</button> <ul> <li v-for="todo in todos" :key="todo.id"> {{ todo.content }} </li> </ul> </div></template>結論
成功しました! Amplify Data で初めてのリアルタイム API とデータベースを作成する方法を学びました。
次のステップ
Amplify Data で発見することがたくさんあります。詳細については、以下をご覧ください: