Amplify を用いてウェブとネイティブのマルチプラットフォーム対応する

記事タイトルとURLをコピーする

こんにちは、技術1課の加藤です。
最近 Amplify にハマって色々と触ってみているのですが、 Amplify って複数のクライアントプラットフォームに対応しているんですよね。

マルチプラットフォームに対応しているからにはやっぱり複数のプラットフォームでバックエンドを共有したいもの。

というわけで今回は React を使ってウェブアプリとネイティブアプリを作成し、同じ認証情報を使ってログインしてみます。

1. React ウェブアプリ

まずはウェブアプリ + 認証機構の実装を行います。

1-1. React アプリの作成

$ npx create-react-app react-amplify
$ cd react-amplify

一応、ちゃんと動くか確認します。

$ yarn start
or 
$ npm start

以下の画面が開けばOKです。

確認が終わったら Ctrl + C で開発サーバーを止めておきます。

1-2. AWS 接続情報の設定

以下のコマンドで AWS 接続情報の設定をします。
(すでに設定が済んでいる場合はこの手順は省略可能です)

$ amplify configure

1-3. Amplify プロジェクトの作成

$ amplify init
Note: It is recommended to run this command from the root of your app directory
? Enter a name for the project react-amplify
? Enter a name for the environment dev
? Choose your default editor: Vim (via Terminal, Mac OS only)
? 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 amplify

1-4. 認証機能のバックエンドリソースを作成

$ 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 status

Current Environment: dev

| Category | Resource name        | Operation | Provider plugin   |
| -------- | -------------------- | --------- | ----------------- |
| Auth     | reactamplifyxxxxxxxx | Create    | awscloudformation |

大丈夫そうであればデプロイします。

$ amplify push

1-5. フロントエンドのコードに認証機能を実装

簡単に実装します。
まずは必要なライブラリのインストールから。

$ yarn add aws-amplify aws-amplify-react
or
$ npm install aws-amplify aws-amplify-react

src/App.js を開き以下のように編集します。

import React from 'react';
import logo from './logo.svg';
import './App.css';
import Amplify from 'aws-amplify';  // 追加
import awsconfig from './aws-exports';  // 追加
import { withAuthenticator } from 'aws-amplify-react';  // 追加

Amplify.configure(awsconfig);  // 追加

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default withAuthenticator(App);  // 編集

1-6. 実装した認証機構を使ってアカウントを作成

ではアカウントを作成してみましょう。 yarn start するとブラウザにログイン画面が表示されます。
[Create account] を選択し、アカウント作成画面に移ります。

必要な情報を入力して [CREATE ACCOUNT] を押下します。
このあと登録したメールアドレスに認証コードが発行されるので、アドレスは普通に使えるものを入力してください。

 

 

Confirmation Code を入力して、 [CONFIRM] を押下してください。
これでアカウントが作成されます。

登録した Username および Password を使ってログインできることを確認してください。

ログインが完了すると、 React の初期ページが表示されます。

2. React Native アプリ

ウェブアプリケーションでの実装が確認できたので、次はReact Native のアプリケーションを作ってみましょう。
今回は Expo を用いて実装します。

2-1. React Native アプリの作成

expo cli を用いてアプリを作成します。以下のコマンドを実行してください。
なお途中テンプレートを聞かれるので、 blank を選んでください。

$ expo init react-native-amplify
$ cd react-native-amplify

こちらもひとまずちゃんと動くか確認します。

$ yarn start
or
$ npm start

こんな画面が出てきます。

ぼくはiOSアプリで動きを確認したいので、 Run on iOS simulator を選び、シミュレータを起動します。
iOS シミュレータを使う方法に関しては Expoのドキュメント を参考にしてください。(Android を試したい方はこちら )

以下のような画面が立ち上がればOKです。

2-2. バックエンドリソースの設定

さて、ここから共通のバックエンドリソースを使う設定を行っていきます。
といっても難しいことはありません。
以下のように、コマンドと数回の選択を行うだけ。余裕。

$ amplify pull

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 amplify
? Which app are you working on? xxxxxxxxx
Backend environment 'dev' found. Initializing...
? Choose your default editor: Vim (via Terminal, Mac OS only)
? Choose the type of app that you're building javascript
Please tell us about your project
? What javascript framework are you using react-native
? Source Directory Path:  /
? Distribution Directory Path: /
? Build Command:  npm run-script build
? Start Command: npm run-script start

? Do you plan on modifying this backend? Yes

これにより、 amplify ディレクトリ および aws-exports.js ファイルが生成されます。

2-3. フロントエンドのコードに認証機能を実装

必要なライブラリをインストールします。

$ yarn add aws-amplify aws-amplify-react-native
or
$ npm install aws-amplify aws-amplify-react-native

./App.js を開き、以下の通り修正します。

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import Amplify from 'aws-amplify';  // 追加
import awsconfig from './aws-exports';  // 追加
import { withAuthenticator } from 'aws-amplify-react-native’;  // 追加

Amplify.configure(awsconfig);  // 追加

function App() {  // 編集
  return (
    <View style={styles.container}>
      <Text>Open up App.js to start working on your app!</Text>
    </View>
  );
}

export default withAuthenticator(App);  // 追加

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

この状態でシミュレータを動かしたら以下のエラーが発生しました。。。

Unable to resolve “@react-native-community/netinfo” from “node_modules/@aws-amplify/core/lib/Util/Reachability.native.js”

@react-native-community/netinfo が必要とのことなので、インストールします。

$ yarn add @react-native-community/netinfo
or
$ npm install @react-native-community/netinfo

改めてシミュレータを動かしたところ、ちゃんと動きました

2-4. ログインしてみる

さて、正しく環境が作れていれば、ここで先ほど作成したユーザーでのログインが可能なはずです。
試してみましょう。

シミュレータを立ち上げると、ログイン画面が表示されます。
ここに先ほど作成したユーザーの Username および Password を入力してみましょう。

ログインして、 React Native の初期ページが表示されれば、完了です。

まとめ

マルチプラットフォームの対応はどうやるんだというのが気になり、今回 React を使ってウェブアプリとネイティブアプリを実装してみました。

簡単ですので、ぜひ試してみてください。