2020年4月17日

AWS AmplifyでReactアプリにユーザー認証機能を追加する

前回はNext.jsでエクスポートしたWebアプリをAmplify Consoleでホスティングするところまで行いました。

今回はこのアプリにAWS Cognitoによるユーザー認証を追加したいと思います。



まず amplify status で現在の状態を確認しておきます。



次に、 amplify auth add を実行。




最初に「Do you want to use the default authentication and security configuration?」と聞かれます。

ここでデフォルト設定を使って試したところ、サインアップの際にメールアドレスの他に電話番号の入力も必須になってしまったので、それを回避するために今度は「Manual configuration」を選択して次に進みました。


次に、amplify push を実行して追加した設定をAWS側に反映します。


コマンドが完了すると、AWS側では必要なリソース(Cognito User Pool、Lambdaファンクションなど)が作成されているのが分かります。


次にReactアプリケーションの方でCognitoに接続するために、必要なライブラリを追加します。

npm i aws-amplify @aws-amplify/ui-react


ログイン画面の表示には「Amplify UI Components」を使います。

/pagesフォルダ内にlogin.jsを作成し下のコードを入力しました。

----------

----------

これだけで、http://localhost:3000/login を開くと下のようなログイン画面が表示されるようになります。



もちろん最初はユーザー登録が必要なので、「Create account」のリンクをクリックします。(この辺りの文言はカスタマイズ可能です。)


ここで、電話番号の入力欄が必須となってしまっています。
これを非表示にするためのカスタマイズ方法がドキュメントには載っているのですが、その通りにやってみても上手く行きませんでした。

検索したところ、UI ComponentのバグとしてGitHubのIssueに上がっているようです。ちょうどこの記事を書いている数時間前にFixがマージされているみたいなので、近日中には解決しそうです。今はとりあえずダミーの電話番号を入力して次へ進みます。


登録フォームをSubmitすると、確認コードの入力画面に移ります。




入力したメールアドレスに確認コードが送られているので、そのコードを入力して「Confirm」をクリックすれば登録完了です。



この時点でAWSコンソールでCognitoのUser Poolを見てみると、確かに1件のユーザー情報が登録されているのが分かります。


バックエンド側を何も作り込んでいないのにここまで自動的に出来上がってしまうのはすごいですね!


最後に上で作成したlogin.jsと同様に認証用のUIをindex.jsページにも追加します。

-----

-----

ここではサインアウトボタンは要らないので削除し、代わりに右上のヘッダー内に「Sign Out」リンクを追加ししました。

サインアウトの処理を実装するには、

import { Auth } from 'aws-amplify';

でAuthクラスをインポートし、リンクがクリックされたら

Auth.signOut();

を実行すればOKです。



次回はバックエンド側のREST APIをAmplifyのサーバーレスな機能を使って追加します!

AWS AmplifyとDynamoDBでサーバーレスなREST APIを構成する 




ここまでのソースコードはこちらで確認出来ます!






 

2020年4月16日

Next.jsでスタティック・エクスポートしたサイトをAWS Amplify Consoleでホスティングする

今回は、Next.jsから(SSR無しの)スタティックなSPAとしてエクスポートしたサイトを、Amplify Consoleでホスティングしてみます。


サンプルReactアプリの作成


npm init -y
npm i -S react react-dom next
 


package.jsonはこんな感じになっています。




npm run dev を実行すると開発サーバーが立ち上がるのでブラウザで http://localhost:3000 を開きます。


npm run export を実行すると out フォルダにindex.htmlや404.html などのファイルが出力されます。今回はこれらの静的なHTMLファイルを Amplify Consoleでホスティングすることまで出来れば目的達成です。


amplify-cliのインストール


npm i -g amplify-cli

Amplifyの初期化


amplify configure








amplify init



Amplify Consoleでのホスティング設定を追加


amplify hosting add


上のコマンドを実行して「Continuous deployment...」を選ぶと、ブラウザが開いて接続するGitリポジトリを聞かれます。




amplify.yml という設定ファイルを手動で変更する必要があるので、ダウンロードしてプロジェクトのルートフォルダに保存します。


ここではNext.jsでスタティック・エクスポートした成果物をデプロイしたいので、下のように一部を変更します。(commandsとbaseDirectory)




変更したamplify.ymlファイルをGitリポジトリにコミット・プッシュします。

プッシュした時点で自動的にAmplify Console側でビルド処理が走ります。




ProvisionからVerifyまで全てグリーンになってから画面に表示されているURLをクリックすると、アプリケーションがデプロイされているのが確認出来ます。


今は「Hello!」と表示するだけで何もしないアプリケーションですが、後は通常のReactアプリケーションとして「npm run dev」で実行しながらローカルで開発します。




ひとまずブラウザ上だけで動くTodoアプリを作りました。





このままではブラウザを閉じるとデータが消えてしまうので意味が無いですが、次回以降のエントリではここに「ユーザー認証」と「REST API経由でのDynamoDBへのデータ永続化機能」を追加して行こうと思います。


AWS AmplifyでReactアプリにユーザー認証機能を追加する

AWS AmplifyとDynamoDBでサーバーレスなREST APIを構成する




現在のソースコードはこちらで参照出来ます!

https://github.com/mikehibm/amplify-test01/tree/blog-2020-04-15






 

2020年4月14日

AWS AmplifyでReactアプリ開発を試してみた

時間があったので前から気になっていた AWS Amplify を試してみることにしました。

とりあえず作ったのは、Todoリスト。React (Next.js) によるWebアプリです。



username / password でログインすると、DynamoDBに保存された自分のTodoリストが表示されます。



使った技術は、

フロントエンド
 - Next.js
 - Amplify Console (Hosting)

バックエンド
 - Lambda
 - API Gateway
 - DynamoDB
 - Cognito

という構成になりました。


至ってシンプルなTodoリストですが、Cognitoによるユーザー認証やDynamoDBなど慣れないモノについて使い方を調べながら作ったので結構時間がかかりました。

Amplify ConsoleによるフロントエンドのHosting機能は非常に便利で使いやすいと思いました。

ただ、今のところ全体的な感想としては 「Firebase の方が使いやすいかなあ」という感じです。特にドキュメントが(内容的には非常に多岐に渡って網羅されているのですが)今ひとつ分かりにくい気がします。


これからせっかくなのでもう少し機能追加をしながら使い込んで見たいと思います。


  1) Next.jsでスタティック・エクスポートしたサイトをAWS Amplify Consoleでホスティングする

  2) AWS AmplifyでReactアプリにユーザー認証機能を追加する

  3) AWS AmplifyとDynamoDBでサーバーレスなREST APIを構成する