Amplify のハンズオンにおける 2 つの注意点

AWS Hands-on for Beginners AWS Amplify を用いた Web サイトの構築方法を学ぼう | AWS Webinar をやってみたのですが、動画内の手順ではうまくいかない部分が 2 つあったので、解決策も含めて紹介します。

環境

・OS: Windows 10 Home
・ブラウザ: Google Chrome 最新バージョン
・Cloud9 の Node.js: v16.14.0
・Cloud9 の Amplify CLI: 4.45.0
上記以外の、Cloud9 のインスタンスタイプなどは動画の手順と同様のものを選択しています。

注意点 1 ドキュメントのコードが変更されている

以下の手順において、動画で参照しているドキュメントと、僕が試した段階 (2022/03/05) でのドキュメントで、コードが変更されていました。

対象手順：05 AWS Amplify のハンズオン（Auth 編）
対象動画時点：4:11 ~
対象ドキュメント：Tutorial - Add authentication - React - AWS Amplify Docs

動画で参照しているコード

hands-on-todo/src/App.js に追記するコードは以下のようになっていました。

import { withAuthenticator } from '@aws-amplify/ui-react'

export default withAuthenticator(App)

2022/03/05 時点のコード

import { Authenticator } from '@aws-amplify/ui-react';
import '@aws-amplify/ui-react/styles.css';

return (
  <Authenticator>
    {({ signOut, user }) => (
      <div style={styles.container}>
        <h1>Hello {user.username}</h1>
        <button style={styles.button} onClick={signOut}>Sign out</button>
        <br />
        <h2>Amplify Todos</h2>
        <input
          onChange={event => setInput('name', event.target.value)}
          style={styles.input}
          value={formState.name}
          placeholder="Name"
        />
        <input
          onChange={event => setInput('description', event.target.value)}
          style={styles.input}
          value={formState.description}
          placeholder="Description"
        />
        <button style={styles.button} onClick={addTodo}>Create Todo</button>
        {
          todos.map((todo, index) => (
            <div key={todo.id ? todo.id : index} style={styles.todo}>
              <p style={styles.todoName}>{todo.name}</p>
              <p style={styles.todoDescription}>{todo.description}</p>
            </div>
          ))
        }
      </div>
    )}
  </Authenticator>
);

import に関しては、動画と同様の場所にコピペしました。

return からのコードに関しては、デフォルトコードの return 部分を上書きするかたちでコピペしました。

デフォルト

上書き後

動画では、App.js 最終行の export default App を export default withAuthenticator(App) に修正していますが、2022/03/05 時点のドキュメントには、この部分の修正は記載されていなかったので、いじりませんでした。

注意点 2 email が必須属性になってしまう

以下の手順において、amplify add auth で username を選択したにもかかわらず、email が必須属性となってしまいます。

対象手順：05 AWS Amplify のハンズオン（Auth 編）
対象動画時点：1:26 ~
対象ドキュメント：Tutorial - Add authentication - React - AWS Amplify Docs
対象コマンド：amplify add auth

amplify add auth の設定

amplify add auth の設定は動画と同じように設定します。
ここで、サインインに使用する情報として、username を選択している点を覚えておいてください。

続いて、amplify push コマンドを実行します。
amplify push 後、npm start を実行し、アプリ画面を確認します。
先述の通り、動画のコードとは変わっているため、UI も変わりますが、そこは大丈夫です。
動画の手順通り、「Create Account」をクリックします。

email が必須というエラーが発生

Username と Password を入力し、「Create Account」をクリックすると、以下のエラーが発生します。
要約すると、「email が必須」という内容です。

Attributes did not conform to the schema: email: The attribute is required

amplify add auth コマンド実行時に、確かに username を指定しましたが、なぜか email が必須属性になってしまいます。

原因は、amplify add auth コマンド実行後に自動生成される、以下の CloudFormation テンプレートだと思われます。

hands-on-todo/amplify/backend/auth/handsontodo<id>/handsontodo<id>-cloudformation-template

Cognito UserPool の設定を見ると、email が必須属性になっています。
これにより、Create Account 時に、「email」が必須というエラーが出ていると思われます。

メールアドレスを入力しても同様のエラーとなる

「email が必須属性ならメールアドレスを入力すれば解決」と思いきや、メールアドレスを入力しても、先述の「email が必須」というエラーになってしまいます。

この状態では、アカウントを作成できないので、ログイン画面からログインして、アプリを動かすことができません。

解決策

解決策として、Cognito コンソールからユーザーを作成する方法があります。
まずは、Cognito コンソールを開き、「ユーザープールの管理」をクリックします。

ハンズオンで作成されたユーザープールをクリックします。

左側のサイドバーから「ユーザーとグループ」をクリックします。
ちなみに、こちらのコンソール上でも、「必須の属性」が email になっていることが確認できます。

「ユーザーの作成」をクリックします。

各項目を入力してユーザーを作成しますが、電話番号は国番号から入力する必要があります。日本は「+81」なので、自分の電話番号の先頭に「+81」をつけて入力します。

これで、ユーザーを作成できました。

では、作成したユーザーでログインできるか確認してみます。

初回ログイン時には、パスワードの変更を求められます。

パスワード変更後、Todo アプリの画面が表示されました。
コンソールで作成したユーザーで、ログインできることが確認できました。

その他 アプリの挙動が気になる

ログイン後にアプリのテキスト入力欄に入力を行うと、一文字入力した時点でカーソルが入力欄から外れます。

この辺はアプリ側のコードをいじれば直りそうですが、ハンズオンを完了するために必須ではないので、気になる方はコードをいじってみてください。

まとめ

今回は、Amplify のハンズオンにおける 2 つの注意点を紹介しました。
ハンズオンを実施するタイミングによっては、今回のエラーは解消されているかもしれませんが、同様のエラーでハマっている方がいれば、参考にして頂ければ幸いです。

色々ハマりますが、やっぱり僕は Amplify が好きです。
皆さんもこの機会に Amplify で爆速アプリ開発をしてみませんか？