フルスタックプロジェクトのセットアップ

開始するには、AndroidまたはiOS用の新しいReact Nativeプロジェクトを初期化します。

AmplifyはExpo SDKを通じて利用できない新しいネイティブモジュールが必要になりました。その結果、Expo Goはサポートされなくなりましたが、それでもExpoを使用できるようにしてください。Amplify v6でExpo Goのサポート廃止について詳しく知る。

次のコマンドで新しいアプリを作成します:

npx create-expo-app amplified_todo
cd amplified_todo

次のコマンドでアプリを開始します:

Android向け:

npx expo run:android

iOS向け:

npx expo run:ios

追加のプロンプトに従い、ビルドの構成に時間をかけてください。準備ができたら、アプリが各シミュレーターで起動します。

開発環境をセットアップした後、次のコマンドで新しいアプリを作成します:

npx react-native init amplified_todo

cd amplified_todo

次のコマンドでアプリを開始します:

npm start

r - reload the app
d - open developer menu
i - run on iOS
a - run on Android

新しいバックエンドの初期化

実行中のアプリが完成したので、Amplifyをセットアップして、アプリをサポートするために必要なバックエンドサービスを作成できるようにします。

新しいターミナルを開きます。プロジェクトのルートから、次を実行します:

amplify init

Amplifyを初期化するときに、アプリに関する情報の入力を求めるプロンプトが表示されます:

? Enter a name for the project (amplified_todo)
The following configuration will be applied:
Project information
| Name: amplified_todo
| Environment: dev
| Default editor: Visual Studio Code
| App type: javascript
| Javascript framework: react-native
| Source Directory Path: /
| Distribution Directory Path: /
| Build Command: npm run-script build
| Start Command: npm run-script start
? Initialize the project with the above configuration? Yes
Using default provider  awscloudformation
? Select the authentication method you want to use: AWS profile
? Please choose the profile you want to use default

新しいAmplifyプロジェクトを初期化するときに、いくつかのことが起こります:

バックエンド定義を保存するamplifyというトップレベルディレクトリを作成します。チュートリアルを進める際に、GraphQL APIやWebホスティングなどのクラウド機能を追加します。これらの機能を追加すると、amplifyフォルダはバックエンドスタックを定義するインフラストラクチャアズコードテンプレートで成長します。インフラストラクチャアズコードは、複製可能なバックエンドスタックを作成するベストプラクティス方法です。
指定したSource Directory Pathにamplifyconfiguration.jsonというファイルを作成します。これはAmplifyで作成するサービスのすべての構成を保持します。これは、Amplify JavaScriptクライアントライブラリがバックエンドサービスに接続するために必要な情報を取得する方法です。
.gitignoreファイルを変更し、生成されたファイルを無視リストに追加します

注意: Expo EAS buildを使用している場合は、eas buildコマンドを実行する前に、amplifyconfiguration.jsonファイルをローカルgitリポジトリにフォース認証する必要があります。これは、amplifyconfiguration.jsonファイルがデフォルト.gitignoreで除外されており、eas buildコマンドはビルドに未追跡ファイルを含まないためです。ビルドが完了したら、amplifyconfiguration.jsonファイルをgitリポジトリから削除し、リモートリポジトリにコミットおよびプッシュしないでください。

Amplifyライブラリをインストール

次のコマンドを実行して必要な依存関係をインストールします:

npm install aws-amplify @aws-amplify/react-native @react-native-community/netinfo @react-native-async-storage/async-storage react-native-get-random-values

Instructions for React Native version 0.72 and below

@aws-amplify/react-native requires a minimum iOS deployment target of 13.0 if you are using react-native version less than or equal to 0.72. Open the Podfile located in the ios directory and update the target value:

- platform :ios, min_ios_version_supported
 + platform :ios, 13.0

npm install aws-amplify @aws-amplify/react-native @react-native-community/netinfo @react-native-async-storage/async-storage react-native-get-random-values

iOS用のポッド依存関係もインストールする必要があります:

npx pod-install

ポッド依存関係をインストールした後、アプリを再構築します:

npm run ios

注意: @react-native-async-storage/async-storageとreact-native-get-random-valuesをインストールしていることを確認してください。そうしないと、実行時にエラーが発生します。

import { Amplify } from 'aws-amplify';
import amplifyconfig from './src/amplifyconfiguration.json';
Amplify.configure(amplifyconfig);

// index.js
import { Amplify } from 'aws-amplify';
import amplifyconfig from './src/amplifyconfiguration.json';
Amplify.configure(amplifyconfig);

アプリケーションのライフサイクルのできるだけ早い段階でAmplify.configureを呼び出していることを確認してください。構成がないか、Amplify.configureがほかのAmplify JavaScript APIの前に呼び出されていない場合はNoCredentialsエラーがスローされます。ライブラリが構成されていないトラブルシューティングガイドでこの問題の考えられる原因を確認してください。

以上がAmplifyの構成に必要なすべてです。Amplify CLIを使用してカテゴリを追加または削除し、バックエンド構成を更新すると、amplifyconfiguration.jsonの構成が自動的に更新されます。

アプリがセットアップされ、Amplifyが初期化されたので、次のステップでAPIを追加できます。

Amplify CLIのセットアップ

APIとデータベースをアプリに接続する