【Next.js】Next.jsからAppSyncを使ってアカウント情報を取得する①

前回はCognitoを利用して認証処理を作成しました。
今回はCognitoのユーザーIDに紐づく情報をDynamoDBからAppSyncを利用して取得します。
前回の記事はこちらを参照してください。

目次

DynamoDB

Amazon DynamoDBは、Amazon Web Services(AWS)が提供する完全マネージド型のNoSQLデータベースサービスです。高い可用性、スケーラビリティ、パフォーマンスを備えており、特に大規模なアプリケーションやリアルタイムデータ処理に適しています。
NoSQLなのでMySQLのようなテーブル結合はできません。
DynamoDBの料金は、主に以下で決まります。

データストレージと転送

保存されるデータ量とリージョン間のデータ転送に応じて課金されます。
25GBまで無料です。それ以降は毎月GBあたり0.25USDです。

キャパシティユニット

キャパシティーモードがプロビジョンドの場合は、DynamoDBに設定されているテーブルのキャパシティー(読み込み・書き込み)の数値で利用実績に関わらず料金がかかります。
オンデマンドの場合は、異なる料金計算が行われます。

プロビジョンドスループットモード

プロビジョンドの場合1秒間に必要と予想される読み込み・書き込みできるキャパシティユニットを事前に指定しておくことになります。オートスケール機能もありますが、急激なアクセスがあるとスケールされる前に一時的にスロットリングする場合があります。事前に設定することで料金の予測が可能です。
無料枠は、25WCU、25RCUまで無料です。詳細な料金プランは公式ドキュメントを参照してください。

オンデマンドスループットモード

アクセス量に応じて自動でスケーリングし、リクエスト数に基づいて課金されます。
プロビジョンドとは違い、キャパシティユニットの設定も必要ありません。
無料枠はありません。(と言っても個人で開発するレベルではほとんど料金はかからないと思います)
詳細な料金プランは公式ドキュメントを参照してください。

テーブル作成

DynamoDBテーブルを作成していきます。
画面上部の検索バーで「DynamoDB」と入力し、DynamoDBをクリックします。

「テーブル」をクリックします。

「テーブルの作成」をクリックします。

画像のように各設定項目を入力します。
テーブル設定は「デフォルト設定」の場合、プロビジョンドキャパシティモードでそれぞれ5RCU、5WCUの設定となります。個人で開発する上ではそれぞれ1RCU、1WCUほどあれば足りると思うので、「設定をカスタマイズ」で設定します。なおAutoScallingはオフにしましょう。
グローバルセカンダリインデックスをuser_idで設定しておきます。user_idはCognitoが払い出すuser_id(sub_id)を格納するために使用します。
すべて入力したら「テーブルの作成」をクリックします。

テーブルが作成されたことを確認し、テーブル名をクリックします。

「テーブルアイテムの探索」をクリックします。

「アクション」⇒「項目の作成」をクリックし、動作確認用のデータを作成します。

画像のように各設定項目を入力します。
mailにはCognitoで設定したメールアドレスを、user_idにはCognitoから取得したuser_id(sub_id)を入力します。(青枠の部分です)
これでデータ準備は完了です。

AppSync

AppSync(AWS AppSync)は、Amazon Web Services(AWS)が提供するフルマネージドのGraphQLベースのAPIサービスです。AppSyncを使用するとリアルタイムデータの同期やオフライン対応のモバイルやウェブアプリケーションの構築が簡単にできます。
GraphQL(グラフキューエル)は、Facebookによって2012年に開発され、2015年に公開されたクエリ言語であり、APIを効率的にデータ取得するためのツールです。REST APIの代替として広く採用されています。GraphQLは、クライアントがどのデータを必要としているかを具体的に指定できるため、APIの利用効率を向上させる特徴があります。
ざっくり言うと、GraphQLというAPIツールをサーバレスで簡単に使用できるのがAppSyncです。
先ほど用意したDynamoDBのアカウント情報をAppSyncからAPI経由で取得したいと思います。

AppSyncの料金は、リクエストされた分だけ課金されるイメージです。
250,000リクエストまで無料枠で利用できるため、個人で開発する分には料金がかからないのも嬉しいポイントです。
詳細な料金プランは公式ドキュメントを参照してください。

サービスロールを用意する

GraphQLからDynamoDBを操作するにあたり、サービスロールを設定する必要があります。
画面上部の検索バーで「IAM」と入力し、IAMをクリックします。

まずはロールで使用するポリシーを作成します。

「ポリシーの作成」をクリックします。

エディタに「JSON」を選択し、画像のようにJSONを入力します。

「ポリシー名」を入力します。

ポリシー作成後は、「ロール」をクリックします。

「ロールを作成」をクリックします。

信頼されたエンティティに「AWSのサービス」を、ユースケースに「AppSync」を選択し、「次へ」をクリックします。

「次へ」をクリックします。

「ロール名」を入力し、「ロールを作成」をクリックします。

ロールが作成されていることを確認し、作成したロールをクリックします。

「ポリシーをアタッチ」をクリックします。

先程作成したポリシー「iam-pol-dynamo-app」を選択し、「許可を追加」をクリックします。

GraphQLAPIを作成する

画面上部の検索バーで「AppSync」と入力し、AppSyncをクリックします。

「APIを作成」をクリックします。

「GraphQL APIs」、「DynamoDBテーブルから始める」を選択します。

API名を入力し、先程作成した「dnm-cwk-account」をインポート先に、サービスロールには先程作成した「iam-rol-asc-cwk」を設定します。

画像のように入力します。DynamoDBで定義した内容を記載し、「次へ」をクリックします。

登録内容を確認して、「APIを作成」をクリックします。

AppSyncが作成されたことを確認します。

最後に動作を確認します。「クエリ」から青枠を選択して実行します。先程登録したデータが返却されたことを確認します。

よかったらシェアしてね!
  • URLをコピーしました!

コメント

コメントする

目次