クイックスタート
前提条件
始める前に、以下がインストールされていることを確認してください：
- Node.js v18.17 以降
- npm v9 以降
- git v2.14.1 以降
- AWS アカウントの作成も必要です。AWS Amplify は AWS 無料利用枠の一部であることに注意してください。
- Amplify で使用するための AWS アカウントの設定 手順。
このクイックスタートガイドでは、Expo の TypeScript テンプレートを使用して Android または iOS 向けの Todo アプリケーションを構築する方法を説明します。
npx create-expo-app my_amplify_app -t expo-template-blank-typescriptcd my_amplify_appバックエンドの作成
AWS Amplify を始める最も簡単な方法は、create-amplify コマンドを使用して npm 経由で行うことです。ベースプロジェクトディレクトリから実行できます。
cd my_amplify_appnpm create amplify@latest? Where should we create your project? (.) # press enterこのコマンドを実行すると、現在のプロジェクトに Amplify バックエンドファイルが以下のファイル構成でscaffold されます：
├── amplify/│ ├── auth/│ │ └── resource.ts│ ├── data/│ │ └── resource.ts│ ├── backend.ts│ └── package.json├── node_modules/├── .gitignore├── package-lock.json├── package.json└── tsconfig.jsonバックエンドをデプロイするには、Amplify の開発者ごとのクラウドサンドボックスを使用します。この機能はチームの各開発者に個別のバックエンド環境を提供し、ローカル開発とテストに最適です。サンドボックス環境でアプリケーションを実行するには、以下のコマンドを実行します：
npx ampx sandbox認証の追加
初期のscaffoldには、amplify/auth/resource.ts ファイルに事前設定済みの認証バックエンドがすでに定義されています。メールアドレスとパスワードによるログインをサポートするように設定されていますが、Google、Amazon、Sign In With Apple、Facebook など、さまざまなログインメカニズムをサポートするように拡張できます。
ログイン体験を素早く起動する最も簡単な方法は、Amplify UI ライブラリで利用可能な Authenticator UI コンポーネントを使用することです。
Authenticator を使用するには、プロジェクトに以下の依存関係を追加する必要があります：
npm add \ @aws-amplify/ui-react-native \ @aws-amplify/react-native \ aws-amplify \ @react-native-community/netinfo \ @react-native-async-storage/async-storage \ react-native-safe-area-context@^4.2.5 \ react-native-get-random-values \ react-native-url-polyfilliOS をターゲットにする場合は、以下を実行して iOS の cocoapods をインストールします：
npx pod-install次に、App.tsx ファイルを以下のように更新します：
import React from "react";import { Button, View, StyleSheet } from "react-native";
import { Amplify } from "aws-amplify";import { Authenticator, useAuthenticator } from "@aws-amplify/ui-react-native";
import outputs from "./amplify_outputs.json";
Amplify.configure(outputs);
const SignOutButton = () => { const { signOut } = useAuthenticator();
return ( <View style={styles.signOutButton}> <Button title="Sign Out" onPress={signOut} /> </View> );};
const App = () => { return ( <Authenticator.Provider> <Authenticator> <SignOutButton /> </Authenticator> </Authenticator.Provider> );};
const styles = StyleSheet.create({ signOutButton: { alignSelf: "flex-end", },});
export default App;Authenticator コンポーネントは認証バックエンドの設定を自動検出し、認証バックエンドの認証フローに基づいて正しい UI 状態をレンダリングします。
ローカル環境でアプリケーションを再度実行してみましょう。ログイン体験が表示されるはずです。
データの追加
初期のscaffoldには、amplify/data/resource.ts ファイルに事前設定済みのデータバックエンドがすでに定義されています。デフォルトの例では、content フィールドを持つ Todo モデルが作成されます。
以下を追加するように変更しましょう：
- ブール型の
isDoneフィールド。 - Auth リソースを通じて認証されたオーナーが自分のレコードを「作成」、「読み取り」、「更新」、「削除」できる認可ルール。
defaultAuthorizationModeを更新して、ユーザー認証トークンで API リクエストに署名します。
import { type ClientSchema, a, defineData } from '@aws-amplify/backend';
const schema = a.schema({ Todo: a .model({ content: a.string(), isDone: a.boolean() }) .authorization(allow => [allow.owner()])});
export type Schema = ClientSchema<typeof schema>;
export const data = defineData({ schema, authorizationModes: { defaultAuthorizationMode: 'userPool' }});次に、To-do アイテムを作成、一覧表示、削除するための UI を実装しましょう。src フォルダを作成し、その中に TodoList.tsx という新しいファイルを作成します。このページには Todo アイテムの作成、読み取り、更新、削除に関する情報が含まれます。
以下のコードをファイルにコピーして貼り付けます：
import { useState, useEffect } from "react";import { View, Button, Text, StyleSheet, FlatList } from "react-native";
import { generateClient } from "aws-amplify/data";import type { Schema } from "../amplify/data/resource";import { GraphQLError } from "graphql";const client = generateClient<Schema>();
const TodoList = () => { const dateTimeNow = new Date(); const [todos, setTodos] = useState<Schema["Todo"]["type"][]>([]); const [errors, setErrors] = useState<GraphQLError>();
useEffect(() => { const sub = client.models.Todo.observeQuery().subscribe({ next: ({ items }) => { setTodos([...items]); }, });
return () => sub.unsubscribe(); }, []);
const createTodo = async () => { try { await client.models.Todo.create({ content: `${dateTimeNow.getUTCMilliseconds()}`, }); } catch (error: unknown) { if (error instanceof GraphQLError) { setErrors(error); } else { throw error; } } };
if (errors) { return <Text>{errors.message}</Text>; }
const renderItem = ({ item }: { item: Schema["Todo"]["type"] }) => ( <TodoItem {...item} /> ); return ( <View style={{ flex: 1 }}> <FlatList data={todos} renderItem={renderItem} keyExtractor={(item) => item.id} ItemSeparatorComponent={() => ( <View style={styles.listItemSeparator} /> )} ListEmptyComponent={() => <Text>The todo list is empty.</Text>} style={styles.listContainer} ></FlatList> <Button onPress={createTodo} title="Create Todo" /> </View> );};
const TodoItem = (todo: Schema["Todo"]["type"]) => ( <View style={styles.todoItemContainer} key={todo.id}> <Text style={{ ...styles.todoItemText, textDecorationLine: todo.isDone ? "line-through" : "none", textDecorationColor: todo.isDone ? "red" : "black", }} > {todo.content} </Text> <Button onPress={async () => { await client.models.Todo.delete(todo); }} title="Delete" /> <Button onPress={() => { client.models.Todo.update({ id: todo.id, isDone: !todo.isDone, }); }} title={todo.isDone ? "Undo" : "Done"} /> </View>);
const styles = StyleSheet.create({ todoItemContainer: { flexDirection: "row", alignItems: "center", padding: 8 }, todoItemText: { flex: 1, textAlign: "center" }, listContainer: { flex: 1, alignSelf: "stretch", padding:8 }, listItemSeparator: { backgroundColor: "lightgrey", height: 2 },});
export default TodoList;上記のコードでは、ランダムな Todo アイテムを作成してリストに表示できます。完了としてマークしたり、リストを更新したり、その操作を元に戻したりすることができます。アイテムを削除することもできます。リスト内の各変更はサブスクリプションで監視され、すぐに画面に表示されます。
コードをより詳しく見てみると：
generateClientはモデルのために必要なファイルとフォルダを生成します。TodoListコンポーネントにはサブスクリプション、作成操作、作成されたアイテムを保持するリストが含まれます。TodoItemには各 Todo アイテムに関する情報が含まれます。
最後に、App.tsx の App コンポーネントを以下のように更新します：
const App = () => { return ( <Authenticator.Provider> <Authenticator> <SafeAreaView style={styles.container}> <SignOutButton /> <TodoList /> </SafeAreaView> </Authenticator> </Authenticator.Provider> );};
const styles = StyleSheet.create({ container: { flex: 1, padding: 8, }, signOutButton: { alignSelf: "flex-end", },});アプリケーションを実行すると、以下の動作が確認できるはずです：
プロジェクトのクリーンアップのためにサンドボックス環境を終了できます。
クラウドへの変更の公開
クラウドへの変更の公開にはリモート git リポジトリが必要です。Amplify はフルスタックブランチデプロイメントを提供しており、フィーチャーブランチからインフラストラクチャとアプリケーションコードの変更を自動的にデプロイできます。詳細については、フルスタックブランチデプロイメントガイドをご覧ください。
🥳 成功
以上です！AWS Amplify でフルスタックアプリの構築に成功しました。Amplify の使い方についてさらに詳しく学びたい場合は、Amplify の仕組みの概念ガイドをご覧ください。