クイックスタート

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

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

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

より素早く始めるための "To-do" スターターアプリケーションを用意しました。まず、スターター Vue テンプレートを使用して 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/ # Vue code
│   ├── assets/ # Styling for your app
│   ├── components/ # UI code to sync todos in real-time
│   ├── App.vue # UI layout
│   └── 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-vue-template.git
cd amplify-vue-template && npm install

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

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

5. 削除機能の実装

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

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

  <template>
  <main>
    <h1>My todos</h1>
    <button @click="createTodo">+ new</button>
    <ul>
      <li
        v-for="todo in todos"
        :key="todo.id"
Copy highlighted code example
        @click="deleteTodo(todo.id)"
      >
        {{ todo.content }}
      </li>
    </ul>
    <div>
      🥳 App successfully hosted. Try creating a new todo.
      <br />
      <a href="https://docs.amplify.aws/vue/start/quickstart/">
        Review next steps of this tutorial.
      </a>
    </div>
  </main>
</template>
}

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

npm run dev

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

6. ログイン UI の実装

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

ログイン体験を素早く起動する最も簡単な方法は、Amplify UI ライブラリで利用可能な Authenticator UI コンポーネントを使用することです。

npm add @aws-amplify/ui-vue

src/App.vue ファイルで、Authenticator UI コンポーネントをインポートし、<main> テンプレートをラップします。

<script>
Copy highlighted code example
import { Authenticator } from "@aws-amplify/ui-vue";
import "@aws-amplify/ui-vue/styles.css";
// ... other imports
</script>

<template>
  <main>
Copy highlighted code example
    <authenticator>
      <template v-slot="{ signOut }">
        <Todos />
        <button @click="signOut">Sign Out</button>
      </template>
    </authenticator>
  </main>
</template>

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

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',
  },
});

アプリケーションのクライアントコードで、ログイン後に異なるユーザーを区別するためにユーザー名もレンダリングしましょう。

<script>
Copy highlighted code example
import { Authenticator } from "@aws-amplify/ui-vue";
import "@aws-amplify/ui-vue/styles.css";
// ... other imports
</script>

<template>
  <main>
    <authenticator>
Copy highlighted code example
      <template v-slot="{ user, signOut }">
        <h1>Hello {{user?.signInDetails?.loginId}}'s todos</h1>
        <Todos />
        <button @click="signOut">Sign Out</button>
      </template>
    </authenticator>
  </main>
</template>

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

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

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

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

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

🥳 成功

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