React+Amplify+Cognito認証のアプリを自動デプロイまで行う

はじめに

React のSPA(Single Page Application)アプリに、AWSのAmplifyライブラリとCognito認証を組み合わせたものを、BitbucketというGit サービスにコミット後、Web アプリとして自動デプロイする方法を見ていきたいと思います。

事前に、Bitbucket で deploy-app というリポジトリを作成済みとします。

もちろん、Bitbucket は Git のサービスなので、Bitbucket を GitHub と読み替えても動作します。

React アプリの作成

まずは、React のアプリを TypeScript で作成して、Amplify の必要なライブラリをインストールします。

$ npx create-react-app deploy-app --typescript
$ cd deploy-app
$ git remote add origin https://xxxxx@bitbucket.org/xxxxx/deploy-app.git  #xxxxxは自分のリポジトリに読み替え
$ yarn add aws-amplify aws-amplify-react 

次に、Amplify の初期化を行います。

$ npm install -g @aws-amplify/cli
$ amplify init
Note: It is recommended to run this command from the root of your app directory
? Enter a name for the project deploy-app
? Enter a name for the environment dev
? Choose your default editor: Visual Studio Code
? Choose the type of app that you're building javascript
Please tell us about your project
? What javascript framework are you using react
? Source Directory Path:  src
? Distribution Directory Path: build
? Build Command:  npm run-script build
? Start Command: npm run-script start
Using default provider  awscloudformation

For more information on AWS Profiles, see:
https://docs.aws.amazon.com/cli/latest/userguide/cli-multiple-profiles.html

? Do you want to use an AWS profile? Yes
? Please choose the profile you want to use default

$ amplify push

準備が整ったので、アプリを起動してみましょう。

$ yarn start

デフォルトの React アプリが起動しますね。

では、この React アプリに Cognito 認証を付けてみましょう。

$ amplify add auth
Using service: Cognito, provided by: awscloudformation
 
 The current configured provider is Amazon Cognito. 
 
 Do you want to use the default authentication and security configuration? Defau
lt configuration
 Warning: you will not be able to edit these selections. 
 How do you want users to be able to sign in? Username
 Do you want to configure advanced settings? No, I am done.
 
$ amplify push

この作業が終わると、aws-exports.jsという設定ファイルが作成されます。

index.tsx を編集します。

$ vi index.tsx 

+ import Amplify from 'aws-amplify';
+ import * as aws_exports from './aws-exports';
+ Amplify.configure(aws_exports.default);

App.tsx を編集します。

$ vi App.tsx

   // ファイルの先頭に追加
+ import { withAuthenticator } from "aws-amplify-react";

  // ファイル末尾を書き換え
- export default App;
+ export default withAuthenticator(App);

ここで以下の行でエラーが出ると思うので対処します。

import { withAuthenticator } from "aws-amplify-react";

tsconfig.jsonにnoImplicitAnyの設定falseを追加します。

$ vi tsconfig.json
+ "noImplicitAny": false,

エラーが解消されるので、もう一度アプリを起動します。

$ yarn start

Cognitoの認証画面が表示されましたね。

'Create account'からアカウントを作成してログインします。

すると、最初の画面が表示されました。

では、変更点をコミットしてリモートリポジトリにpushします。その際、.gitignoreからaws-exports.jsを取り除きます。

$ vi .gitignore
- aws-exports.js

$ git add .
$ git commit -m "create app"
$ git push origin master

デプロイ設定

ここから先は、AWS コンソールの Amplify メニューで作業を行います。

Amplify の deploy を選択すると、以下の画面が表示されるので自分の Git リポジトリにあったサービスを選択します。ここでは、Bitbucketを選択しました。

リポジトリとブランチを選択します。

そのまま次に進みます。

「保存してデプロイ」します。

デプロイが終わるとステータスが以下のようになります。

デプロイ時のおもしろい機能で複数デバイスの画面キャプチャが残ります。

amplifyapp.com ドメインにデプロイされたアプリを確認します。ちゃんと Cognito 認証画面が表示されますね。

ちゃんとログインできました。

おわりに

簡単ですが、React + Amplify + Cognito 認証のアプリを、Amplify の自動デプロイまで行ってみました。

この自動デプロイですが、一度作成ができると、リモートリポジトリのmasterマージがされると自動でデプロイされるようです。

デプロイ先には、「アプリの設定」>「ドメイン管理」から独自ドメインも使用できますね。

これは便利！

追記

独自ドメインの登録方法を調べました。

www.aruse.net