おはようございます。ベンジャミンの木村です！

今回、下記AWS公式手順を参考に、下記構成図の通りのAmplify Gen2を用いたAppSync + DynamoDBの構築をしてみました！その手順を記載しましたので、ぜひ手を動かして試してみてください！

Add custom queries and mutations

https://docs.amplify.aws/react/build-a-backend/data/custom-business-logic/

目次

• 1. Amplify Gen2のセットアップ
• 2. データモデルの定義
• 3. AWSにデプロイ
• 4. コンソールより確認
• まとめ

1. Amplify Gen2のセットアップ

まず、Amplify Gen2を使用する準備をします。以下の手順に従ってください。

1-1. 下記記事を参考に事前準備を実施する

https://benjamin.co.jp/blog/technologies/amplify-gen2-deploy-method/

※必要なツールのバージョンは下記になります。

• Node.js v18.16.0以上
• npm v6.14.4以上
• git v2.14.1以上

1-2. 下記のように、amplifyディレクトリ配下にdata/resource.tsファイルを作成する

ここにAppsyncに関する記述を書いていきます。

.
├── amplify
│   ├── backend.ts 
│   └── data
│        └── resource.ts
├── src
│   ├── ・・・
│   ・・・
├── public
│   └── vite.svg
├── dist
│   ├── ・・・
│   ・・・
├── node_modules
│   ├── ・・・
│   ・・・
├── tsconfig.app.json
├── tsconfig.json
├── tsconfig.node.json
├── package-lock.json
├── package.json
├── eslint.config.js
├── index.html
└── vite.config.ts

1-3. IAMユーザー(アクセスキー)の作成

下記手順に沿って、IAMユーザー（アクセスキー）の作成を行なってください。権限は必要に応じて絞った方がいいですが、今回は検証目的のため、AdministratorAccessポリシーを付与して実行します。

https://docs.aws.amazon.com/ja_jp/IAM/latest/UserGuide/access-keys-admin-managed.html

1-4. configの設定

項番1-5のアクセスキーを使って、AWSのアクセスキーをセットしてください。

aws configure --profile <プロファイル>
AWS Access Key ID [None]: ********
AWS Secret Access Key [None]: ********
Default region name [None]: ap-northeast-1
Default output format [None]: json

2. データモデルの定義

今回は、MenuItemモデルを作成し、これに対してGraphQLのクエリやミューテーション、サブスクリプションを定義します。

2-1. data/resource.tsに以下の記述をしてください。

import { a, defineData, type ClientSchema } from '@aws-amplify/backend';

// スキーマを定義
const schema = a.schema({
  MenuItem: a
    .model({
      id: a.id().required(),
      name: a.string().required(),
      description: a.string().required(),
      category: a.string().required(),
      price: a.integer().required(),
      isVegetarian: a.boolean().required()
    }).authorization(allow => [allow.publicApiKey()]), // 公開APIキーで認証
});

// クライアント用スキーマの型定義
export type Schema = ClientSchema<typeof schema>;

// データリソースの定義
export const data = defineData({
  schema,
  authorizationModes: {
    defaultAuthorizationMode: 'apiKey', // APIキーをデフォルト認証方式として設定
    apiKeyAuthorizationMode: { expiresInDays: 30 } // APIキーの有効期限を30日として設定
  },
  name: "MenuItemApi" // AppSync名を設定
});

スキーマをa.modelで定義した場合、このMenuItemモデルは以下のリソースを自動的に作成します。

• DynamoDBテーブル
• クエリとミューテーションのAPI
• createdAtおよびupdatedAtフィールド

これら内容を自分で定義したい場合は、a.customTypeと定義すれば可能です。興味があれば、下記AWS公式ページをご確認ください。

Add custom queries and mutations

https://docs.amplify.aws/react/build-a-backend/data/custom-business-logic/

2-2. amplify/backend.tsのdefineBackendに下記ハイライトされたdataを追記する

import { defineBackend } from '@aws-amplify/backend';
import { data } from "./data/resource";

export const backend = defineBackend({
  data
});

3. AWSにデプロイ

3-1. IAMユーザー(アクセスキーを作成)

データバックエンドの設定が完了したら、以下のコマンドでAWSのサンドボックス環境を立ち上げます。

npx ampx sandbox

※サンドボックスとは、本番環境に構築する時にバックエンドのリソースをテストできる一時的な検証環境を作り出す機能です。検証が終わったら、npx ampx sandbox deleteというコマンドで簡単に削除できることも魅力です。

※検証が不要の場合はそのままGitHubにpush してデプロイしていただいても問題ございませんので、下記記事の項番2を参考にしてください。

Amplify Gen2でのデプロイを簡単にやってみよう！

npx ampx sandboxを実行後、Amplifyによって生成されたAPIキーやエンドポイントなどの接続情報がamplify_outputs.jsonというファイルに保存されます。作成したAppSyncの場所がわからない場合、amplify_outputs.jsonにAPIキーやエンドポイントなどの接続情報が記載されています。

4. コンソールより確認

4-1. 下記URLよりAppSyncのコンソールに移動する

https://ap-northeast-1.console.aws.amazon.com/appsync/home?region=ap-northeast-1#/apis

4-2. コードで記載したAPIができていることを確認し、API名をクリックする

4-3. 左ペインより「クエリ」→「Add new operation」→「Mutation」をクリックする

4-4. inputで表示された項目全てにチェックを入れる→IDを入力→「実行する」→「MyMutation」を選択する

実行すると、実行後にDynamoDBにInsertされる項目が表示される。

4-5. 左ペインの「データソース」→MenuItemとついた「ソース名」をクリックする

4-6. 「テーブルアイテムの探索」をクリックする

4-7. 挿入されたレコードが入っていることを確認する

まとめ

いかがでしたでしょうか？

今回Amplify Gen2でAppSync + DynamoDBの作成を行う記事を記載しました。「意外と簡単にできる！」っと思って頂いたのではないでしょうか？

また、「そもそもGraphQLがわからない」や「そもそもAppSyncについてわからない」という方には下記記事を合わせて拝見いただけますと幸いです。