React Native × AWS Amplifyで詰まった話【実体験まとめ】

Amplify + AppSync + DynamoDBの全体像

まずこの3つの関係を整理します。最初にここを理解しないと、何をしているかわからないまま作業して事故が起きます。

?️ アーキテクチャの全体像

React Native アプリ
    ↓ GraphQL クエリ（API.graphql）
AWS AppSync（GraphQL APIサーバー）
    ↓ リゾルバーが変換
Amazon DynamoDB（実際のデータ保存）
    ↑
AWS Amplify（設定・デプロイを管理するツール）

Amplifyは設定・デプロイを管理するツールです。AppSyncはフロントからのGraphQLクエリを受け取りDynamoDBへの操作に変換するAPIサーバーです。DynamoDBは実際にデータが保存されるデータベースです。

schema.graphqlとamplify pushの仕組み

amplify/backend/api/[API名]/schema.graphqlがデータモデルの定義ファイルです。このファイルが全ての起点です。

# schema.graphql の例
type MeetingMinutes @model @auth(rules: [{ allow: owner }]) {
  id: ID!
  eventId: ID!
  orgId: String!
  audioUrl: String
  transcript: String
  summary: String
  data: AWSJSON   # JSONを自由に保存できるフィールド
}

@modelディレクティブをつけるだけで、AppSyncとDynamoDBの設定が自動生成されます。フィールドを追加したらamplify pushするだけでバックエンドに反映されます。

amplify pushを実行すると以下が自動で行われます。

⚙️ amplify push の処理フロー

1. schema.graphql を解析
2. AppSyncのスキーマを更新
3. DynamoDBのテーブルを更新
4. リゾルバー（クエリとDBの橋渡し）を更新
5. src/graphql/ 以下の自動生成ファイルを更新
6. aws-exports.js を更新（接続設定）

環境（environment）の仕組み

Amplifyには「環境」という概念があります。dev・staging・prodのように、同じアプリの異なる環境を管理できます。

# 環境の一覧確認（* が現在の環境）
amplify env list

# 出力例
  Environments:
  * ローカル   # 個人開発用（現在ここにいる）
    dev       # チーム開発用
    prod      # 本番

# 環境の切り替え
amplify env checkout dev

このとき「現在どの環境にいるか」を常に意識することが最重要です。自分はこれを怠って事故を起こしました。

やらかし① 間違った環境でamplify pushした

# 作業前の確認（必須）
amplify env list
# * がついているのが現在の環境。必ず確認してからpushする

# スキーマ変更のテストは個人環境で行う
amplify env checkout ローカル  # 個人環境に切り替え
amplify push                  # 個人環境にpush

# テストが終わったらチーム環境に戻す
amplify env checkout dev

やらかし② 自動生成ファイルをコミットしなかった

# amplify pushの後は必ずsrc/graphql/をコミット
git add src/graphql/
git commit -m "chore: update auto-generated graphql files"
git push

# src/graphql/ は .gitignore に入れないこと
# 自動生成でも必ずバージョン管理する

やらかし③ Cognito認証エラーで詰まった

原因1: aws-exports.js の identityPoolId が
       現在の環境と一致していない（最多）

原因2: Cognito Identity Pool の設定で
       未認証アクセスが無効になっている

原因3: ローカルのIPアドレスが
       aws-exports.js の redirectSignIn に未登録

原因4: 認証トークンの期限切れ

# Step1: aws-exports.js の identityPoolId を確認
grep -r "identityPoolId" src/aws-exports.js

# AWSコンソール → Cognito → Identity Pools
# 該当のPool のIDと一致しているか確認

# 一致していない場合 → amplify pull で最新設定を取得
amplify pull

# それでも解決しない場合 → 環境を確認して強制再デプロイ
amplify env list          # 環境確認
amplify push --force      # 強制再デプロイ

チームでAmplifyを使うときのルール

実際にやらかした経験から作った、チームでのAmplify作業ルールです。

# ===== 作業前（必須）=====
amplify env list          # 現在の環境を確認
                          # * がついているのが現在の環境

# ===== スキーマ変更・テスト =====
amplify env checkout ローカル  # 個人環境に切り替え
# schema.graphql を編集
amplify push                  # 個人環境にpushしてテスト
git add src/graphql/          # 自動生成ファイルをコミット
git commit -m "chore: update graphql files"

# ===== テスト完了後 =====
amplify env checkout dev      # チームのdev環境に戻す
# PRを出してレビュー後にdev環境に反映

# ===== 動かないときのチェックリスト =====
# 1. amplify env list で環境確認
# 2. amplify pull で最新設定を取得
# 3. amplify push --force で強制再デプロイ
# 4. CloudWatch Logs でエラー確認

Amplifyのチーム開発は、個人開発では気づかないトラブルが多いです。でも「作業前にenv listで環境確認」を習慣にするだけで、大半の事故は防げます。

Recommended

ブログを始めるならConoHa WINGが最速

エンジニアの技術メモをブログで発信して収益化。月1,000円以下で始められます。

▶ ConoHa WINGを見てみる

※ アフィリエイトリンクです