Ionic ReactでAWS Amplifyを利用する

環境情報

$ node -v
 v12.14.1
$ amplify --v
 4.41.2
$ ionic -v
 6.12.3

セットアップ

セットアップはIonicから行います。Amplify CLIのamplify initはAmplifyまわりの初期設定のみ行いますので、基本的にFWのセットアップをしてから行います。

$ ionic start ionicAmplify
? Framework: React
...あとは好きなように

たまにreact-scriptsのご機嫌を損ねているので、.envファイルを作っておきます。本番運用向けの場合は大人しく解決させる方向で努力する方が良いでしょうが、今は動けばそれでよいのです。

$ echo "SKIP_PREFLIGHT_CHECK=true" > .env

余談ですが、create-react-appとほぼ等価なのでTypeScriptでcreate-react-appしたい場合はionic startしてからIonic系ライブラリをremoveした方が手っ取り早かったりします。

Amplify CLIでセットアップ

続いてAmplifyを設定します。

% amplify init
 Note: It is recommended to run this command from the root of your app directory
 ? Enter a name for the project ionicamplifyexample
 ? 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-configure-profiles.html
 ? Do you want to use an AWS profile? Yes
 ? Please choose the profile you want to use lab

What javascript framework are you usingでionicが出ますが、ドキュメントを見る限りIonic Angularくさいです。今回は安全策として、「Create React Appで作ったアプリ」として設定しました。

Amplify ConsoleでIonic Reactアプリを公開する

アプリを公開するために、ホスティング環境を追加します。

% amplify add hosting
 ? Select the plugin module to execute (Use arrow keys)
 ❯ Hosting with Amplify Console (Managed hosting with custom domains, Continuous deployment) 
   Amazon CloudFront and S3 

今回はテストなので、Manual deploymentを選びます。

? Choose a type 
   Continuous deployment (Git-based deployments) 
 ❯ Manual deployment 
   Learn more 

amplify statusでHostingが増えていればOKです。

% amplify status

Current Environment: dev
| Category | Resource name                       | Operation | Provider plugin   |
| -------- | ----------------------------------- | --------- | ----------------- |
| Hosting  | amplifyhosting                      | Create    | awscloudformation |

amplify publishで公開します。Manual deploymentの場合、amplify initでセットしたビルドコマンドを実行してデプロイまでをローカルで実行してくれます。

$ amplify publish
...

The build folder is ready to be deployed.
 You may serve it with a static server:
 yarn global add serve
   serve -s build
 Find out more about deployment here:
 bit.ly/CRA-deploy
 ✔ Zipping artifacts completed.
 ✔ Deployment complete!
 https://devxxxxxx.amplifyapp.com

Auth機能を追加する

これだけだとあまり面白くないので、Auth機能も足してみます。

$ amplify add auth
$ amplify publish

Amplify SDKも追加しましょう。

yarn add aws-amplify @aws-amplify/ui-react

src/index.tsxに以下の3行を追加します。これでIonic ReactからAWS Amplify SDKへのアクセスの準備ができました。

import Amplify from 'aws-amplify';
import awsconfig from './aws-exports';
Amplify.configure(awsconfig);

あとはsrc/App.tsxを以下のように変更しましょう。これでアプリ全体にAuth機能が追加されます。

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

 -export default App;
 +export default withAuthenticator(App);

ログイン操作が完了すると、Ionicのアプリ画面に戻ってきます。