AmplifyとReactでCognito認証ページを作る（その１）

企業がユーザーに何らかのサービス提供を行いたい場合、ログイン機能を設け、会員組織を構築する必要がある。その際、CMSを導入すればログイン機能を追加できるかもしれないが、開発費用が発生することが多く敷居が高い。また、Synergy!やSpiralなど外部ASPを使うことで会員サービスを追加可能だが、本体サイトと親和性が低く、カスタマイズに限界があることも多い。

そこでサーバーレスの技術を使って静的HTMLでログイン機能（会員組織）を作ることに挑戦する。Amazon Cognitoを使えば会員管理を簡易にできそうに思えたが、フロント側のJavaScriptの実装が難しかった。必須となるReactを理解しつつ実装を進める。

React、最初は非常にとっかかりがなく理解が難しかったが、一度理解してしまえば非常にわかりやく画期的な仕組みであることがわかる。

今回、以下の６階建てのビルに例えた構成で進める。

「その１」では、６階（Amazon Amplify バックエンド<Cognito>）部分を作り、「その２」で５階部分（Amazon Amplify フロントエンド<Authenticator>）を作る。最後に「その３」で、４階部分の「React/JSXの知識」を得つつ、Reactを実装していく。

以下のページ構成を作るイメージである。

６階：Amazon Amplify バックエンド(Cognito)

以下を参考に進めた。

■AWS Amplify CLIの使い方〜インストールから初期セットアップまで〜 – Qiita
https://qiita.com/Junpei_Takagi/items/f2bc567761880471fd54

Node.jsのインストール

まずは、Node.js をインストールする（ターミナルで「node -v」後にバージョンが出ればOK）。

■Node.js
https://nodejs.org/ja/

その後、基本的に以下のコマンドをターミナルで実行していくだけである。

npm install -g @aws-amplify/cli
amplify configure
amplify init
amplify add auth
amplify push

Amazon Amplifyのインストール

Amplifyの初期化をインストールするため、ターミナルから以下を実行する。

npm install -g @aws-amplify/cli

すると以下のエラーが発生したので・・・

Error: EACCES: permission denied, mkdir '/usr/local/lib/node_modules/@aws-amplify'

Error: EACCES: permission denied, symlink '../lib/node_modules/@aws-amplify/cli/lib/run.js' -> '/usr/local/bin/amplify'

以下のように書き込み権限を付与する。

cd /usr/local/lib
sudu chmod 777 node_modules
sudu chmod 777 bin

改めて以下を実行する。

npm install -g @aws-amplify/cli

以下のように「amplify -v」が表示されれば成功している。

amplify configure – Amplifyが使うユーザープロファイルを作成

以下を実行すると、ブラウザが起動し、AWSログイン画面が表示される。

amplify configure

ターミナルに戻る。東京リージョンである「ap-northeast-1」を選択する。

特にこだわりがなければデフォルトの user name のままでエンター。

するとブラウザに以下の「ユーザーを追加」の画面（IAM）が表示される。「次のステップ：アクセス権限」ボタンをクリック。

「次のステップ：タグ」をクリック。

「次のステップ：確認」をクリック。

Amplifyへのアクセス権限が付与されることを確認。「ユーザーの作成」をクリック。

ユーザーの追加が成功。「.csv のダウンロード」をクリックしてCSVファイルをダウンロードし、アクセスキーIDとシークレットアクセスキーをコピーしておく。

ターミナルに戻り、エンターを押す。accessKeyId、secretAccessKeyを聞いてくるので先ほどコピーした値を貼り付ける。Profile Nameはわかりやすい名前にしておく。

amplify init – Amplifyのバックエンドを作成

「amplify init」を実行し、Amplifyのバックエンドを作成する。注意点として、amplifyのモジュールが作成されるので、新たにAmplifyバックエンド用のディレクトリを作成し、そこに「cd」しておく。その上で「amplify init」を実行する。

amplify init

Amplifyのトップに表示されるアプリ名になるため、プロジェクト名はわかりやすい名前にしておく。configurationを実行するため「Y」を入力。

authentication method を聞いてくるので、「AWS profile」を選択してエンター。

profile を聞いてくるので、先ほど作成したプロファイル名を選択してエンター。

CloudFormation、S3Bucket、IAMなどの設定が自動で行われる。完了するとAmplifyの改善に貢献するかを聞かれる。どちらでもOK。

バックエンドのデプロイが完了した。

amplify add auth(push) – AmplifyにAuth(Cognito)を追加

認証サービスであるCognitoを使いたいため、Amplifyに「auth」を追加する。

amplify add auth

サインイン（ログイン）方法を聞いてくるので「Email」を選択。ここでデフォルトの「Username」を選択すると、EmailとUsernameの扱いが曖昧になるため、「Email」がわかりやすいと判断。

高度な configure をしたいかを聞かれるが、今回「No, I am done.」とした。

成功した。

続いて「amplify push」して、バックエンドを更新する。

amplify push

continue するか聞いてくるので「Y」をエンター。

バックエンドの更新（Cognitoの設定）が完了する。

以下のようなファイル群が自動で作成された。aws-export.jsは次回使うことになる。

Amazon Cognitoにアクセスするとユーザープールが作成されている。

以上でバックエンドの構築は完了。これだけでは何が起こったのか検証できないが、次回は、Amplifyのフロントエンドを作成する方法を解説する。