AWS Mobile Hub による react-native アプリ開発（構築〜認証）

AWS mobile-hub が react-native に対応したとのことなので、マニュアル(Developer Guide) を元にサンプルアプリを作成・実行して見ます。

はじめに

当初PetStoreのようなサンプルのアプリがダウンロードできるのかと思いましたが、react-native のサンプルはまだないようです。

マニュアルもまだ不十分な気がします。本手順よりも、もう少しスマートなやり方があるのかもしれません。

前提

node がインストールされていること
react-native がインストールされていること

準備

react-native プロジェクトの作成
前述のように雛形プロジェクトが落ちてくるわけではなかったので、最初に react-native initで初期プロジェクトを作成しました。

react-native init awsmobile
cd awsmobile

セットアップ

awsmobile-cli をインストール/設定します。

npm install -g awsmobile-cli

実行結果

└─┬ awsmobile-cli@1.0.6 
  ├─┬ aws-amplify@0.1.30
  │ └─┬ axios@0.17.1
  │   └── follow-redirects@1.3.0 
  └── aws-sdk@2.177.0 

アクセスキーの設定

AWSのシークレットキーを設定します。

awsmobile configure

awsmobile init　コマンドによる Mobile Hub プロジェクトの作成

$ awsmobile init

Please tell us about your project:
? Where is your project's source directory:  /
? Where is your project's distribution directory that stores build artifacts:  build
? What is your project's build command:  npm run-script build
? What is your project's start command for local test run:  npm run-script start

? What awsmobile project name would you like to use:  awsmobile

Successfully created AWS Mobile Hub project: awsmobile

retrieving the latest backend awsmobile project information
awsmobile project's details logged at: awsmobilejs/#current-backend-info/backend-details.json
awsmobile project's access information logged at: awsmobilejs/#current-backend-info/aws-exports.js
awsmobile project's access information copied to: aws-exports.js
awsmobile project's specifications logged at: awsmobilejs/#current-backend-info/mobile-hub-project.yml
contents in #current-backend-info/ is synchronized with the latest in the aws cloud

Success! your project is now initialized with awsmobilejs

   awsmobilejs/.awsmobile
     is the workspace of awsmobile-cli, please do not modify its contents

   awsmobilejs/#current-backend-info
     contains information of the backend awsmobile project from the last
     synchronization with the cloud

   awsmobilejs/backend
     is where you develop the codebase of the backend awsmobile project

   awsmobile console
     opens the web console of the backend awsmobile project

   awsmobile run
     pushes the latest development of the backend awsmobile project to the cloud,
     and runs the frontend application locally

   awsmobile publish
     pushes the latest development of the backend awsmobile project to the cloud,
     and publishes the frontend application to aws S3 for hosting

Happy coding with awsmobile!

aws console で確認すると、指定した名前awsmobileでプロジェクトが作成されます。

• 今回はマニュアル通り cli にて作成しましたが、aws console 上で作成して awsmobile init することもできるようです。

バックエンドとの接続設定

react-native プロジェクトを AWS Mobile Hub に接続するよう設定します。

AWS Amplify for React Nativer ライブラリをインストール

npm install --save aws-amplify-react-native

公式のGet Started にあるように App.js に下記のコードを追加

• YOUR-PATH-TO/ は適当に置き換える必要がありました。

import Amplify from 'aws-amplify-react-native';
import aws_exports from './aws-exports';

Amplify.configure(aws_exports);

修正した App.js のコード

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import Amplify from 'aws-amplify-react-native';

import aws_exports from './aws-exports';

import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  View
} from 'react-native';

const instructions = Platform.select({
  ios: 'Press Cmd+R to reload,\n' +
    'Cmd+D or shake for dev menu',
  android: 'Double tap R on your keyboard to reload,\n' +
    'Shake or press menu button for dev menu',
});

export default class App extends Component<{}> {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to React Native!
        </Text>
        <Text style={styles.instructions}>
          To get started, edit App.js
        </Text>
        <Text style={styles.instructions}>
          {instructions}
        </Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

Amplify.configure(aws_exports);

実行してみます。公式にはnpm run ios とありますが、下記で動作させました。

react-native run-ios

実行結果

画面が表示されました。
まだ、react-nativeのサンプル画面と特に変わりはありません。

認証連携

画面に認証機能を追加してみます。 AWS Cognito　と連携させたアプリにします。

コマンドで実行することも可能なようですが、今回はAWS Console から設定しました。

コンソール上で、 User Sing-in をクリックして設定します。

Eamil and Passwordを設定し、Sing-in必須としました。

awsmobile pull コマンドを用いて、設定情報を取り込み

$ awsmobile pull

retrieving the latest backend awsmobile project information
awsmobile project's details logged at: awsmobilejs/#current-backend-info/backend-details.json
awsmobile project's access information logged at: awsmobilejs/#current-backend-info/aws-exports.js
awsmobile project's access information copied to: aws-exports.js
awsmobile project's specifications logged at: awsmobilejs/#current-backend-info/mobile-hub-project.yml
contents in #current-backend-info/ is synchronized with the latest in the aws cloud
? sync corresponding contents in backend/ with #current-backend-info/ Yes

amazon-cognito-identity-js モジュールのリンク設定

react-native link amazon-cognito-identity-js

App.js ソースに認証モジュールを組み込み

import 文の追加

import { withAuthenticator } from 'aws-amplify-react-native';

最終行に export を設定

export default withAuthenticator(App);

App の定義で export default を外す。

class App extends Component<{}> {

実行結果

react-native run-ios

Sing In ページが表示されました。

sing up を行い、送信メールのパスコードを入力します。

無事ログインできるようになりました。

次は Cloud Logic を追加して見たいと思います。

参考

AWS公式ドキュメント