AWS AmplifyのGraphQL（AppSync）を使ってみてわかったこと【実体験】

エンジニアの記録
技術メモ・実体験

チームメンバーの環境を壊したことがあります。amplify pushを間違った環境で実行してしまいました。

この記事ではAmplify + AppSync + DynamoDBの仕組みの解説と、実際にやらかしたトラブルを全部書きます。同じミスをする人を減らしたい。

対象読者

React NativeでAWSを使い始めた人、チームでAmplifyを使っていて「なんとなく怖い」という人向けです。

PROFILE 20代ITエンジニア｜React Native（Expo）× AWS Amplifyでアプリ開発中｜Raw Ambition 運営
キラ
キラ
「amplify pushは現在の環境のAWSを上書きする」——これを理解していなかったときに事故が起きた。
Contents
  1. Amplify + AppSync + DynamoDBの全体像
  2. schema.graphqlとamplify pushの仕組み
  3. 環境（environment）の仕組み
  4. やらかし① 間違った環境でamplify pushした
  5. やらかし② 自動生成ファイルをコミットしなかった
  6. やらかし③ Cognito認証エラーで詰まった
  7. チームでAmplifyを使うときのルール

Amplify + AppSync + DynamoDBの全体像

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

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

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

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

? POINT

フロントからは「AppSyncにGraphQLクエリを送る」だけでOKです。DynamoDBを直接触ることはほぼありません。AppSyncが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 を更新（接続設定）

⚠️ WARNING

amplify pushは現在選択されている環境のAWSリソースを上書きします。実行前に必ずamplify env listで現在の環境を確認してください。これを怠ると次のやらかし①が起きます。

環境（environment）の仕組み

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

## 環境の一覧確認（* が現在の環境） amplify env list ## 出力例 Environments: *ローカル ← 個人開発用（現在ここにいる） dev ← チーム開発用 prod ← 本番 ## 環境の切り替え amplify env checkout dev

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

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

TROUBLE 01

個人環境のつもりでpushしたら、チームのdev環境を上書きした

⚠️ 何が起きたか

スキーマ変更のテストをするつもりでamplify pushを実行した。しかし環境がdev（チーム共有環境）のままになっていた。チームのdev環境のDynamoDBとAppSyncが上書きされ、他のメンバーの作業が一時的に壊れた。

✅ 解決策と予防策

## 作業前の確認（必須） amplify env list ## * がついているのが現在の環境。必ず確認してからpushする ## スキーマ変更のテストは個人環境で行う amplify env checkout ローカル # 個人環境に切り替え amplify push # 個人環境にpush ## テストが終わったらチーム環境に戻す amplify env checkout dev
キラ
キラ
「amplify pushは現在の環境を上書きする」——これを体で覚えてから、作業前のenv listが習慣になった。

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

TROUBLE 02

自分の環境では動くのに、チームメンバーの環境で「フィールドが存在しない」エラー

⚠️ 何が起きたか

スキーマにフィールドを追加してamplify pushした。自分の環境では正常に動いた。しかしチームメンバーから「フィールドが存在しない」というエラーが出ると報告が来た。原因はsrc/graphql/以下の自動生成ファイルをgitにコミットしていなかったこと。

✅ 解決策と予防策

## amplify pushの後は必ずsrc/graphql/をコミット git add src/graphql/ git commit -m “chore: update auto-generated graphql files” git push ## src/graphql/ は .gitignore に入れないこと ## 自動生成でも必ずバージョン管理する

? POINT

src/graphql/以下のファイルは自動生成ですが、チーム全員が同じクエリ定義を使うために必ずgit管理します。「自動生成だからgitignoreでいい」は間違いです。

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

TROUBLE 03

NotAuthorizedException: Access to Identity is forbidden

⚠️ 症状

アプリ起動時またはAPI呼び出し時にNotAuthorizedException: Access to Identity 'ap-northeast-1:xxxx...' is forbidden.というエラーが出る。

? 原因の候補

原因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 # 強制再デプロイ
スカイ
スカイ
Cognito認証エラーは原因が複数あって特定が難しい。「aws-exports.jsの環境確認→amplify pull」が最初の一手。

チームで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 + AppSync + DynamoDB：フロントはAppSyncにクエリを送るだけ。DynamoDBは直接触らない
  • amplify pushは現在の環境を上書きする。作業前に必ずenv listで確認
  • src/graphql/の自動生成ファイルは必ずgitコミットする
  • Cognito認証エラーはaws-exports.jsの環境確認→amplify pullから始める
  • スキーマ変更は個人環境でテストしてからチーム環境に反映する

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

Recommended
ブログを始めるならConoHa WINGが最速
エンジニアの技術メモをブログで発信して収益化。月1,000円以下で始められます。
▶ ConoHa WINGを見てみる
※ アフィリエイトリンクです
Next
次回：「TypeScriptで型安全なコードを書くために意識していること」
Raw Ambition 始動から2ヶ月目

コメント

タイトルとURLをコピーしました