クイックスタート

👋 AWS Amplify へようこそ！このクイックスタートガイドでは、以下を行います：

1. React と Vite のアプリをデプロイする
2. リアルタイムデータ更新を備えたデータベースを構築して接続する
3. 認証と認可ルールを設定する

フルスタックアプリを AWS にデプロイする

より素早く始めるための "To-do" スターターアプリケーションを用意しました。まず、スターター React テンプレートを使用して GitHub アカウントにリポジトリを作成します。

1. リポジトリの作成

スターターテンプレートを使用して GitHub アカウントにリポジトリを作成します。このテンプレートは Amplify バックエンド機能を備えた create-vite-app をscaffold します。

GitHub のフォームを使用してリポジトリの作成を完了します。

2. スターターアプリのデプロイ

リポジトリが作成されたので、Amplify でデプロイします。

GitHub を選択します。ポップアップウィンドウで Amplify に GitHub アカウントへのアクセスを許可した後、リポジトリと main ブランチを選択してデプロイします。他の変更は行わず、フローを進めて Save and deploy をクリックします。

3. デプロイされたアプリの確認

├── amplify/ # Folder containing your Amplify backend configuration
│   ├── auth/ # Definition for your auth backend
│   │   └── resource.tsx
│   ├── data/ # Definition for your data backend
│   │   └── resource.ts
|   ├── backend.ts
│   └── tsconfig.json
├── src/ # React UI code
│   ├── App.tsx # UI code to sync todos in real-time
│   ├── index.css # Styling for your app
│   └── main.tsx # Entrypoint of the Amplify client library
├── package.json
└── tsconfig.json

ビルドが完了したら、「Visit deployed URL」を選択して新しくデプロイされたブランチにアクセスします。ビルドで API、データベース、および認証バックエンドがデプロイされているため、新しい To-do アイテムを作成できます。

Amplify コンソールで、デプロイブランチ（この場合は main）をクリック > 左側メニューの Data を選択 > Data manager でデータベースに入力されたデータを確認します。

フロントエンドの更新

To-do リストアイテムの削除フローを作成してアプリの機能を強化する方法を学びましょう。

4. ローカル環境のセットアップ

フロントエンドに機能を追加するために、ローカル開発環境をセットアップしましょう。デプロイされたブランチをクリックすると、ビルド履歴とデプロイされたバックエンドリソースのリストが表示される Deployments ページに移動します。

ページ下部に Deployed backend resources タブがあります。タブをクリックし、Download amplify_outputs.json file ボタンをクリックします。

リポジトリをローカルにクローンします。

git clone https://github.com/<github-user>/amplify-vite-react-template.git
cd amplify-vite-react-template && npm install

上でダウンロードした amplify_outputs.json ファイルをプロジェクトのルートに移動します。

├── amplify
├── src
├── amplify_outputs.json <== backend outputs file
├── package.json
└── tsconfig.json

5. 削除機能の実装

src/App.tsx ファイルに新しい deleteTodo 機能を追加し、<li> 要素の onClick ハンドラに関数を渡します。

function App() {
  // ...
Copy highlighted code example
  function deleteTodo(id: string) {
    client.models.Todo.delete({ id })
  }

  return (
    <main>
      <h1>My todos</h1>
      <button onClick={createTodo}>+ new</button>
      <ul>
        {todos.map(todo => <li
Copy highlighted code example
          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/react/start/quickstart/">Review next step of this tutorial.</a>
      </div>
    </main>
  )
}

ローカル開発サーバーを起動して削除機能を試してみましょう：

npm run dev

これにより http://localhost:5173 でローカル開発サーバーが起動します。

6. ログイン UI の実装

スターターアプリケーションには、amplify/auth/resource.ts ファイルに事前設定済みの認証バックエンドがすでに定義されています。メールアドレスとパスワードによるログインをサポートするように設定されていますが、Google、Amazon、Sign In With Apple、Facebook など、さまざまなログインメカニズムをサポートするように拡張できます。

ログイン体験を素早く起動する最も簡単な方法は、Amplify UI ライブラリで利用可能な Authenticator UI コンポーネントを使用することです。src/main.tsx ファイルで、Authenticator UI コンポーネントをインポートし、<App> コンポーネントをラップします。

import React from 'react';
import ReactDOM from 'react-dom/client';
Copy highlighted code example
import { Authenticator } from '@aws-amplify/ui-react';
import { Amplify } from 'aws-amplify';
import App from './App.tsx';
import outputs from '../amplify_outputs.json';
import './index.css';
Copy highlighted code example
import '@aws-amplify/ui-react/styles.css';

Amplify.configure(outputs);

ReactDOM.createRoot(document.getElementById('root')!).render(
Copy highlighted code example
  <React.StrictMode>
    <Authenticator>
      <App />
    </Authenticator>
  </React.StrictMode>
);

Authenticator コンポーネントは認証バックエンドの設定を自動検出し、認証バックエンドの認証フローに基づいて正しい UI 状態をレンダリングします。

src/App.tsx ファイルに、ユーザーがアプリケーションからサインアウトできるボタンを追加します。Amplify UI ライブラリの useAuthenticator フックをインポートして、Authenticator の状態にフックします。

import type { Schema } from '../amplify/data/resource';
Copy highlighted code example
import { useAuthenticator } from '@aws-amplify/ui-react';
import { useEffect, useState } from 'react';
import { generateClient } from 'aws-amplify/data';

const client = generateClient<Schema>();

function App() {
Copy highlighted code example
  const { signOut } = useAuthenticator();

  // ...

  return (
    <main>
      {/* ... */}
Copy highlighted code example
      <button onClick={signOut}>Sign out</button>
    </main>
  );
}

export default App;

localhost 環境でアプリケーションを再度試してみましょう。ログイン体験が表示されるはずです。

これらの変更をクラウドに反映するには、git にコミットして変更をアップストリームにプッシュします。

git commit -am "added authenticator"
git push

Amplify は git コミットに基づいてアプリの最新バージョンを自動的にデプロイします。数分後、アプリケーションがリビルドされると、ホストされているアプリが削除機能をサポートするように更新されます。

バックエンドの更新

各ユーザーが自分の To-do のみにアクセスできるよう、ユーザーごとの認可ルールを実装するためにバックエンドを更新しましょう。

7. ローカル AWS 認証情報のセットアップ

バックエンドの更新を行うには、ローカルマシンからバックエンドの更新をデプロイするための AWS 認証情報が必要です。

ローカルマシンに AmplifyBackendDeployFullAccess 権限ポリシーを持つ AWS プロファイルと認証情報がすでにある場合は、ステップ 8 にスキップしてください。

それ以外の場合は、ローカルマシンからバックエンドの更新をデプロイする Amplify 権限を付与する ローカル AWS 認証情報のセットアップ を行ってください。

8. クラウドサンドボックスのデプロイ

本番ブランチに影響を与えずにバックエンドを更新するには、Amplify のクラウドサンドボックスを使用します。この機能はチームの各開発者に個別のバックエンド環境を提供し、ローカル開発とテストに最適です。

クラウドサンドボックスを起動するには、新しいターミナルウィンドウで以下のコマンドを実行します：

npx ampx sandbox

クラウドサンドボックスが完全にデプロイされると（約5分）、新しく分離された認証とデータバックエンドへの接続情報で amplify_outputs.json ファイルが更新されます。

9. ユーザーごとの認可の実装

スターターの To-do アイテムは現在すべてのユーザー間で共有されていますが、ほとんどの場合、データはユーザーごとに分離することが望まれます。

ユーザーごとにデータを分離するには、「オーナーベースの認可ルール」を使用できます。To-do アイテムにオーナーベースの認可ルールを適用しましょう：

import { type ClientSchema, a, defineData } from '@aws-amplify/backend';

const schema = a.schema({
  Todo: a.model({
    content: a.string(),
Copy highlighted code example
  }).authorization(allow => [allow.owner()]),
});

export type Schema = ClientSchema<typeof schema>;

export const data = defineData({
  schema,
  authorizationModes: {
    // This tells the data client in your app (generateClient())
    // to sign API requests with the user authentication token.
Copy highlighted code example
    defaultAuthorizationMode: 'userPool',
  },
});

アプリケーションのクライアントコードで、ログイン後に異なるユーザーを区別するためにユーザー名もレンダリングしましょう。src/App.tsx ファイルに移動し、useAuthenticator フックから user プロパティをレンダリングします。

// ... imports

function App() {
Copy highlighted code example
  const { user, signOut } = useAuthenticator();

  // ...

  return (
    <main>
Copy highlighted code example
      <h1>{user?.signInDetails?.loginId}'s todos</h1>
      {/* ... */}
    </main>
  )
}

ローカルアプリケーションに戻って、To-do アイテムのユーザー分離をテストしてみましょう。

本番バックエンドではなくクラウドサンドボックスで作業しているため、新しいユーザーを再度サインアップする必要があります。

これらの変更をクラウドに反映するには、git にコミットして変更をアップストリームにプッシュします。

git commit -am "added per-user data isolation"
git push

Amplify コンソールでビルドが完了すると、main バックエンドがクラウドサンドボックス内で行われた変更をサポートするように更新されます。クラウドサンドボックス内のデータは完全に分離されており、本番データベースを汚染しません。

🥳 成功

以上です！AWS Amplify でフルスタックアプリの構築に成功しました。Amplify の使い方についてさらに詳しく学びたい場合は、Amplify の仕組みの概念ガイドをご覧ください。