Zenn
📝

Amplify Gen2 の Quickstart をやってみた

に公開
AWS
Amplify
tech

Quickstart - AWS Amplify Gen 2 Documentation
Vue.js でやってみました。

前提

  • リポジトリ: CodeCommit
  • コード編集環境: Cloud9

Amplify アプリの作成

まずは上記ドキュメントのリポジトリをクローンし、CodeCommit リポジトリにプッシュしました。

CodeCommit リポジトリをソースに指定して Amplify アプリを作成しました。
Amplify アプリの設定はすべてデフォルトです。


デプロイ完了後、Amplify のデフォルトドメインにアクセスしてアプリが表示されることを確認します。

削除機能の追加

Amplify コンソールのデプロイされたバックエンドリソースから amplify_outputs.json をダウンロードし、アプリのルートフォルダに配置します。

components/Todos.vue に削除機能を追加します。

components/Todos.vue
<script setup lang="ts">
import '@/assets/main.css';
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 todos
const todos = ref<Array<Schema['Todo']["type"]>>([]);

function listTodos() {
  client.models.Todo.observeQuery().subscribe({
    next: ({ items, isSynced }) => {
      todos.value = items
     },
  }); 
}

function createTodo() {
  client.models.Todo.create({
    content: window.prompt("Todo content")
  }).then(() => {
    // After creating a new todo, update the list of todos
    listTodos();
  });
}

// 追加
function deleteTodo(id: string) {
  client.models.Todo.delete({ id })
}
    
// fetch todos when the component is mounted
 onMounted(() => {
  listTodos();
});

</script>

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

再度リポジトリプッシュし、デプロイ完了後に削除機能が追加されたことを確認します。
todo リストの項目をクリックして項目が削除されれば OK です。

ログイン UI の追加

$ npm add @aws-amplify/ui-vue

src/App.vue を以下のように定義します。

src/App.vue
<script setup lang="ts">
import Todos from './components/Todos.vue'
import { Authenticator } from "@aws-amplify/ui-vue";
import "@aws-amplify/ui-vue/styles.css";
</script>

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

再度リポジトリプッシュし、デプロイ完了後に認証機能が追加されたことを確認します。

ユーザーの作成やログインについても試すことができました。

バックエンドの更新

$ npx ampx sandbox

Amplify コンソールでサンドボックスが追加されていることを確認できます。

amplify/data/resource.ts を以下のように定義します。

amplify/data/resource.ts
import { type ClientSchema, a, defineData } from "@aws-amplify/backend";

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

export type Schema = ClientSchema<typeof schema>;

export const data = defineData({
  schema,
  authorizationModes: {
     defaultAuthorizationMode: 'userPool',
  },
});

src/App.vue を以下のように定義します。

src/App.vue
<script setup lang="ts">
import Todos from './components/Todos.vue'
import { Authenticator } from "@aws-amplify/ui-vue";
import "@aws-amplify/ui-vue/styles.css";
</script>

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

再度リポジトリプッシュし、「ログイン UI の実装」で追加したユーザーとは別のメールアドレスでユーザーを作成します。
1 人目のユーザーと 2 人目のユーザーで todo リストが共有されないことを確認します。

1 人目のユーザーの todo リストには test という項目を追加しました。

2 人目のユーザーには test という項目はなく test2 という項目を追加できました。

再度 1 人目のユーザーでログインしても test2 の項目は表示されないことを確認できました。

環境の削除

以下のコマンドでサンドボックスを削除できます。

$ npx ampx sandbox delete

Amplify アプリについてはコンソールから削除できます。

まとめ

今回は Amplify Gen2 の Quickstart をやってみました。
どなたかの参考になれば幸いです。

参考資料

Discussion