🗄️

AWS Amplify Gen2をチュートリアルで体験する２

2024/08/16に公開

AWS

Amplify

tech

前回のつづき

テンプレートから作成されたプロジェクトは追加機能しかないです。

削除機能
認証機能

を追加してみます。

削除機能追加

実装するために、ローカルでアプリケーション開発＆実行できるように環境をセットアップします。(以下はUbuntu22.04環境で作業してます)

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

下図のようにamplify_outputs.jsonをダウンロードして、プロジェクトのルートに配置します。

よく見ると、既存のgitignoreでリポジトリ管理外のファイルに指定されてます。

下記のように削除処理（deleteTodo関数）とリスト選択したきのコールバック処理を追加します。

//app/page.tsx
export default function App() {
  ：
  // （追加）削除コールバック
  function deleteTodo(id: string) {
    client.models.Todo.delete({ id })
  }
  return (
    <main>
      :
      <ul>
        {todos.map((todo) => (
          <li onClick={() => deleteTodo(todo.id)} key={todo.id}>{todo.content}</li>
        ))}
      </ul>
      :
    </main>
  );
}

ローカルでサーバーを起動して試してみる。以下コマンドで開発用のサーバーが3000番ポートで起動するので、ブラウザでアクセスしてみます。

> npm run dev

アプリケーションが立ち上がると、前回入力した値が表示されてます。項目をクリックすると、選択した項目が削除されると思います。

amplify_outputs.jsonの接続情報を取得しているので、ローカルで動作しているフロントエンドアプリがAWS上のDynamoDBのテーブルにアクセスできているわけです。

ログイン機能を実装する

@aws-amplify/ui-reactの最新版をインストールします。いろんなGUI系のコンポーネントが用意されてます。

> npm add @aws-amplify/ui-react

importの定義を追加して、<Authenticator>タグでmainタグを囲うのと、サインアウト用の <button>タグを追加します。

import { Authenticator } from '@aws-amplify/ui-react'
import '@aws-amplify/ui-react/styles.css'
：
<Authenticator>
  {({ signOut, user }) => (
    <main>
    :
    <button onClick={signOut}>Sign out</button>
    </main>
  )}
</Authenticator>

先ほどのアプリケーションを表示すると、ログイン画面が表示されるようになります。

メールアドレスとパスワードを入力して、ユーザを作成すると、メールアドレスに認証コードが送付されるので、コード入力して登録を完了させます。一連のよくあるユーザ登録機能がほぼノーコードで使えるのはありがたいです。

TODO画面を見ると、実装したログアウトボタンが追加されてます。ログアウト、ログインを実際試して動作することがわかります。

AWSのコンソールで、Amazon Cognitoのユーザプールを見ると、先ほど登録されたユーザIDが表示されてます。ここで登録ユーザが安全に管理がされてます。

本番環境にフロントエンドの実装をデプロイする

先ほどまでは、ローカルホスト上でTODO削除とログイン機能の確認をしました。
本番環境のURLにアクセスしてみます。

ローカル環境から登録したデータは反映されてますが、フロントエンドの実装は反映されてないです。まだデプロイしてないのでこれは正しいです。

ここで、コミット＆プッシュします。

> git commit -am "added authenticator"
> git push

コンソールからデプロイ管理画面を見ると、githubリポジトリのプッシュに反応して、コードのビルドとデプロイが自動的に開始されてます。
今回は完了までに5分ほどかかってます。（ちょっと遅い？）

もう一度本番環境のURLにアクセスすると、ローカル環境と同じように認証機能、削除機能が反映されてます。

Amplify Gen1では、Amplify用のコマンド実行が必要だったみたいですが、これまでの一連の開発の流れでは発生してないです。

削除機能追加

ログイン機能を実装する

本番環境にフロントエンドの実装をデプロイする

Discussion