翻訳は機械翻訳により提供されています。提供された翻訳内容と英語版の間で齟齬、不一致または矛盾がある場合、英語版が優先します。 # AWS Amplify を使用してサーバーレスの React Native モバイルアプリを構築する *Amazon Web Services、Deekshitulu Pentakota* ## 概要 このパターンでは、AWS Amplify と以下の AWS サービスを使用して React Native モバイルアプリのサーバーレスバックエンドを作成する方法を説明しています。　 + AWS AppSync + Amazon Cognito + Amazon DynamoDB Amplify を使用してアプリケーションのバックエンドを設定してデプロイすると、Amazon Cognito はアプリケーションユーザーを認証し、アプリケーションへのアクセスを許可します。　 次に、AWS AppSync はフロントエンドアプリケーションおよびバックエンドの DynamoDB テーブルとやり取りし、データを作成して取得します。 **注記** このパターンでは、例としてシンプルな「ToDoList」アプリを使用しますが、同様の手順を使用して、任意の React Native モバイルアプリケーションを作成できます。 ## 前提条件と制限事項 **前提条件** + アクティブな AWS アカウント + [AWS コマンドラインインターフェイス (AWS CLI)](https://docs.amplify.aws/cli/start/install/) がインストール済みおよび設定済み + XCode (任意のバージョン) + Microsoft Visual Studio (任意のバージョン、任意のコードエディター、任意のテキストエディター) + Amplify Gurify に精通している + Amazon Cognito に精通している + AWS AppSync に精通している + DynamoDB に精通している + Node.js に精通している + npm に精通している + React と React Native に精通している + JavaScript と ECMAScript 6 (ES6) に精通している + GraphQL に精通している ## アーキテクチャ 次の図は、AWS クラウドで React Native モバイルアプリのバックエンドを実行するためのアーキテクチャの例を示しています。 ![AWS サービスで React Native モバイルアプリを実行するワークフロー。](http://docs.aws.amazon.com/ja_jp/prescriptive-guidance/latest/patterns/images/pattern-img/c95e0150-5762-4c90-946c-efa3a22913e4/images/5beff5f9-9d14-49dc-a046-b74e5bfbd13f.png) 以下は、アーキテクチャ図を示しています。 1. Amazon Cognito はアプリユーザーを認証し、アプリへのアクセスを許可します。　 1. 次に、AWS AppSync はフロントエンドアプリおよびバックエンドの DynamoDB テーブルとやり取りし、データを作成して取得します。 ## ツール **AWS サービス** + [AWS Amplify](https://docs.aws.amazon.com/amplify/latest/userguide/welcome.html) は、フロントエンドのウェブおよびモバイルデベロッパーが AWS で迅速かつ簡単にフルスタックアプリケーションを構築できるようにする専用のツールと機能のセットです。 + [AWS AppSync](https://docs.aws.amazon.com/appsync/latest/devguide/what-is-appsync.html) は、Amazon DynamoDB、AWS Lambda、および HTTP API を含む、複数のソースからのデータを組み合わせることで、アプリケーション開発者にとって便利でスケーラブルな GraphQL インターフェイスを提供します。 + [Amazon Cognito](https://docs.aws.amazon.com/cognito/latest/developerguide/what-is-amazon-cognito.html) は、ウェブおよびモバイルアプリの認証、認可、およびユーザー管理機能を提供します。 + [Amazon DynamoDB](https://docs.aws.amazon.com/amazondynamodb/latest/developerguide/Introduction.html) は、フルマネージド NoSQL データベースサービスです。高速かつ予測可能でスケーラブルなパフォーマンスを発揮します。 **コード** このパターンで使用されているサンプルアプリケーションのコードは、GitHub [aws-amplify-react-native-ios-todo-app](https://github.com/aws-samples/aws-amplify-react-native-ios-todo-app) リポジトリから入手できます。このサンプルファイルを使用するには、このパターンの [**エピック**] セクションの指示に従ってください。 ## エピック ### React Native アプリを作成して実行します | タスク | 説明 | 必要なスキル | | --- | --- | --- | | React Native 開発環境のセットアップ | 手順については、React Native ドキュメントの「[開発環境のセットアップ](https://reactnative.dev/docs/next/environment-setup)」を参照してください。 | アプリ開発者 | | iOS シミュレーターで ToDoList React Native モバイルアプリを作成して実行します。 | [See the AWS documentation website for more details](http://docs.aws.amazon.com/ja_jp/prescriptive-guidance/latest/patterns/build-a-serverless-react-native-mobile-app-by-using-aws-amplify.html) | アプリ開発者 | ### アプリの新しいバックエンド環境を初期化します。 | タスク | 説明 | 必要なスキル | | --- | --- | --- | | AAmplify でアプリをサポートするために必要なバックエンドサービスを作成します。 | [See the AWS documentation website for more details](http://docs.aws.amazon.com/ja_jp/prescriptive-guidance/latest/patterns/build-a-serverless-react-native-mobile-app-by-using-aws-amplify.html)このパターンで使用する TodoList アプリの設定には、以下の設定例を適用してください。
**React Native Amplify アプリの構成設定の例**
? Name: ToDoListAmplify

? Environment: dev

? Default editor: Visual Studio Code

? App type: javascript

? Javascript framework: react-native

? Source Directory Path: src

? Distribution Directory Path: /

? Build Command: npm run-script build

? Start Command: npm run-script start

? Select the authentication method you want to use: AWS profile

? Please choose the profile you want to use: default

詳細については、Amplify Dev Center ドキュメントの「[新しい Amplify バックエンドの作成](https://docs.amplify.aws/lib/project-setup/create-application/q/platform/js/#create-a-new-amplify-backend)」を参照してください。`amplify init` コマンドは、[AWS CloudFormation](https://docs.aws.amazon.com/AWSCloudFormation/latest/UserGuide/Welcome.html) を使用して以下のリソースをプロビジョニングします。 [See the AWS documentation website for more details](http://docs.aws.amazon.com/ja_jp/prescriptive-guidance/latest/patterns/build-a-serverless-react-native-mobile-app-by-using-aws-amplify.html) | アプリ開発者 | ### Amplify React Native アプリに Amazon Cognito 認証を追加する | タスク | 説明 | 必要なスキル | | --- | --- | --- | | Amazon Cognito 認証サービスを作成します。 | [See the AWS documentation website for more details](http://docs.aws.amazon.com/ja_jp/prescriptive-guidance/latest/patterns/build-a-serverless-react-native-mobile-app-by-using-aws-amplify.html)このパターンで使用する TodoList アプリの設定には、以下の設定例を適用してください。
**認証サービスの設定例**
? Do you want to use the default authentication and security configuration? \ 
Default configuration
 
? How do you want users to be able to sign in? \ 
Username 

? Do you want to configure advanced settings? \ 
No, I am done
`amplify add auth` コマンドは、プロジェクトのルートディレクトリ内のローカルフォルダ (**amplify**) に、必要なフォルダ、ファイル、依存関係ファイルを作成します。このパターンで使用する TodoList アプリの設定では、この目的で **aws-exports.js** が作成されます。 | アプリ開発者 | | Amazon Cognito サービスを AWS クラウドにデプロイします。 | [See the AWS documentation website for more details](http://docs.aws.amazon.com/ja_jp/prescriptive-guidance/latest/patterns/build-a-serverless-react-native-mobile-app-by-using-aws-amplify.html)プロジェクトにデプロイされたサービスを確認するには、以下のコマンドを実行して Amplify コンソールに移動します。`amplify console` | アプリ開発者 | | React Native に必要な Amplify ライブラリをインストールし、iOS には CocoaPods 依存関係をインストールします。 | [See the AWS documentation website for more details](http://docs.aws.amazon.com/ja_jp/prescriptive-guidance/latest/patterns/build-a-serverless-react-native-mobile-app-by-using-aws-amplify.html) | アプリ開発者 | | Amplify サービスをインポートして設定します。 | アプリのエントリポイントファイル (**App.js** など) で、次のコード行を入力することで、Amplify サービスの設定ファイルをインポートして読み込みます。
import Amplify from 'aws-amplify'
import config from './src/aws-exports'
Amplify.configure(config)
Amplify サービスをアプリのエントリポイントファイルにインポートした後にエラーが発生した場合は、アプリを停止してください。次に、XCode を開き、プロジェクトの iOS フォルダーから **TodoListAmplify.xcWorkspace** を選択して、アプリを実行します。 | アプリ開発者 | | WithAuthenticator 高次コンポーネント (HOC) を使用するようにアプリのエントリポイントファイルを更新します。 | `withAuthenticator` HOC は、わずか数行のコードを使用して、サインイン、サインアップ、パスワードを忘れた場合のワークフローをアプリ内で実現します。詳細については、Amplify Dev Center で「[オプション 1: ビルド済み UI コンポーネントを使用する](https://docs.amplify.aws/lib/auth/getting-started/q/platform/js/#option-1-use-pre-built-ui-components)」を参照してください。また、React ドキュメントの [高次コンポーネント](https://reactjs.org/docs/higher-order-components.html) についても説明します。[See the AWS documentation website for more details](http://docs.aws.amazon.com/ja_jp/prescriptive-guidance/latest/patterns/build-a-serverless-react-native-mobile-app-by-using-aws-amplify.html)**WithAuthenticator HOC コード例**
import Amplify from 'aws-amplify'
import config from './src/aws-exports'
Amplify.configure(config)
import { withAuthenticator } from 'aws-amplify-react-native';


const App = () => {
  return null;
};


export default withAuthenticator(App);
iOS シミュレーターでは、アプリには Amazon Cognito サービスが提供するログイン画面が表示されます。 | アプリ開発者 | | 認証サービスの設定をテストします。 | iOS シミュレータで、以下の操作を行います。[See the AWS documentation website for more details](http://docs.aws.amazon.com/ja_jp/prescriptive-guidance/latest/patterns/build-a-serverless-react-native-mobile-app-by-using-aws-amplify.html)[Amazon Cognito コンソール](https://console.aws.amazon.com/cognito/)を開いて、**アイデンティティプール**に新しいユーザーが作成されたかどうかを確認することもできます。 | アプリ開発者 | ### AWS AppSync API と DynamoDB データベースをアプリにコネクトします | タスク | 説明 | 必要なスキル | | --- | --- | --- | | AWS AppSync API と DynamoDB データベースを作成します。 | [See the AWS documentation website for more details](http://docs.aws.amazon.com/ja_jp/prescriptive-guidance/latest/patterns/build-a-serverless-react-native-mobile-app-by-using-aws-amplify.html)このパターンで使用する TodoList アプリの設定には、以下の設定例を適用してください。
**API とデータベースの設定例**
? Please select from one of the below mentioned services: \ 
GraphQL 

? Provide API name: todolistamplify

? Choose the default authorization type for the API \ 
Amazon Cognito User Pool

Do you want to use the default authentication and security configuration

? Default configuration How do you want users to be able to sign in? \ 
Username

Do you want to configure advanced settings? \ 
No, I am done.

? Do you want to configure advanced settings for the GraphQL API \ 
No, I am done.

? Do you have an annotated GraphQL schema? \ 
No

? Choose a schema template: \ 
Single object with fields (e.g., "Todo" with ID, name, description)

? Do you want to edit the schema now? \ 
Yes

**GraphQL スキーマの例**
 type Todo @model {
   id: ID!
   name: String!
   description: String
}
| アプリ開発者 | | AWS AppSync API をデプロイします。　 | [See the AWS documentation website for more details](http://docs.aws.amazon.com/ja_jp/prescriptive-guidance/latest/patterns/build-a-serverless-react-native-mobile-app-by-using-aws-amplify.html)このパターンで使用する TodoList アプリの設定には、以下の設定例を適用してください。
**AWS AppSync API の設定例**次の設定では、AWS AppSync に GraphQL API を作成し、Dynamo DB に **Todo** テーブルを作成します。
 ? Are you sure you want to continue? Yes
? Do you want to generate code for your newly created GraphQL API Yes
? Choose the code generation language target javascript
? Enter the file name pattern of graphql queries, mutations and subscriptions src/graphql/**/*.js
? Do you want to generate/update all possible GraphQL operations - \ 
queries, mutations and subscriptions Yes
? Enter maximum statement depth \
[increase from default if your schema is deeply nested] 2
| アプリ開発者 | | アプリのフロントエンドを AWS AppSync API に接続します。 | このパターンで提供されているサンプル TodoList アプリケーションを使用するには、[aws-amplify-react-native-ios-todo-app](https://github.com/aws-samples/aws-amplify-react-native-ios-todo-app) GitHub リポジトリの **App.js** ファイルからコードをコピーします。次に、サンプルコードをローカル環境に統合します。
リポジトリの **App.js** ファイルにあるサンプルコードは以下の処理を行います。[See the AWS documentation website for more details](http://docs.aws.amazon.com/ja_jp/prescriptive-guidance/latest/patterns/build-a-serverless-react-native-mobile-app-by-using-aws-amplify.html) | アプリ開発者 | ## 関連リソース + 「[AWS Amplify](https://aws.amazon.com/amplify/)」 + [Amazon Cognito](https://aws.amazon.com/cognito/) + [AWS AppSync](https://aws.amazon.com/appsync/) + 「[Amazon DynamoDB](https://aws.amazon.com/dynamodb/)」 + 「[React](https://reactjs.org/)」 (React ドキュメント)