1) Next.jsでスタティック・エクスポートしたサイトをAWS Amplify Consoleでホスティングする
2) AWS AmplifyでReactアプリにユーザー認証機能を追加する
3) AWS AmplifyとDynamoDBでサーバーレスなREST APIを構成する
今回はサーバーレスなREST APIを追加してデータをデータベースに保存出来るようにします。
amplify status で現状を確認すると、下のようになっています。
下のコマンドでAPIカテゴリを追加します。
amplify add api
まず GraphQL か REST かを選ぶように言われます。
Web上で見つかる情報にはGraphQLを使ったものが圧倒的に多いように思いますが、ここではあえてRESTを選びます。
DynamoDB上に作成するテーブル名まで入力すると、次に作成するカラム情報の入力になります。
ドキュメントをざっと読んだところ、DynamoDBでは基本的に1アプリケーションで使うテーブルは出来るだけ少ない方が望ましいらしく、「1テーブルで済ませられればそれが最も良い」との事です。
長年リレーショナルデータベースに馴染んだ身としてはなかなか目から鱗な考え方です。
どうやらDynamoDBでのスキーマ設計の勘所は、「パーティションキー」と「ソートキー」および「グローバル・セカンダリインデックス」「ローカル・セカンダリインデックス」を上手く使うことにあるようです。
DynamoDBのテーブル設計をするとき、自分に問いかけていること – 或る阿呆の記 ( https://hack-le.com/dynamodb-query/ )
この辺り、非常に奥が深そうで面白いのですがとりあえず今はシンプルなTodoリストアプリを作りたいだけなので、極力簡単な方法で行きたいと思います。
パーティションキーを「pk」、ソートキーを「sk」とし、3つ目のカラムはmap型で「data」としておきました。map型にはJSONを格納できるので、こうしておけば後からの仕様変更にもある程度柔軟に対応することが可能になるかと思います。
パーティションキーとソートキーを何にするかというのは、アプリケーションの要件によって大きく変わる部分で、開発効率にも大きく関わってきます。
今回は、pkカラムには認証されたユーザーのidに "user:" というプリフィックスを付加して格納し、skカラムにはTodoアイテムのid（ランダムに生成されたもの）の先頭に "todo:"というプリフィックスを付加して格納することにしました。
こうすることでユーザーのidが分かればそのユーザーに属するタスクの一覧を簡単に取得することが出来るようになります。
実際のクエリーとしては、
- pkが "user:" + ユーザーid に一致する
- skが "todo:" で始まる
という条件で検索することになります。
DynamoDBではパーティションキーは完全一致でしか検索出来ませんが、ソートキーは部分一致や範囲検索が可能なので、このようなクエリーが可能になります。
また、ユーザーに属するデータでTodo項目以外のデータを保存したい場合には、skに付けるプリフィックスを "todo:" 以外のものにすれば対応出来ます。
例えば、ユーザーごとのアプリ設定を保存したい場合は、pkは同じでskを "pref:" として保存すれば、簡単にそのレコードを一意に指定して読み出す事が出来ます。
1アプリケーションで一つのテーブルしか使わない、というのはこのように2つのキー（およびセカンダリインデックス）を上手く使って複数の種類のデータを保存する、ということになるのかなと思います。
カラム設定の入力が終わると、テーブルへのアクセス権の設定をするか聞かれるので、認証していないユーザーはAPIへのアクセスが出来ない様に設定しておきます。
次に amplify push を実行して、追加した設定をAWS側に反映します。
完了するとAWS側では下記のリソースが作成されています。
- API Gateway
- Lambda
- DynamoDB
これらのうち、Lambda関数は自動生成されたコードだと上手く動かず、何をしているのかを理解した上でアプリケーションの要件に合わせてそこそこ手を加える必要がありました。
/amplify/backend/function/(Function名)/src/app.js （一部のみ抜粋）
-----
-----
アプリケーション側で扱うModelとしては
{
id: 'todo:12312-312132',
text: 'ミルクを買う',
done: false
}
のような形になっているのですが、DynamoDBに保存されるのは、
{
pk: 'user:aaaaaaaaaaa',
sk: 'todo:12312-312132',
data: {
text: 'ミルクを買う',
done: false
}
}
という形になっています。
このため app.js の内部でAPI Gatewayから受け取ったオブジェクトをDynamoDBのスキーマに合った形式に適宜変換してから保存しています。
さて、次はReactアプリの方を変更して行きます。
この辺りのドキュメントを見ながらAPIへのアクセス処理を実装します。
Amplify Docs –– Fetching Data
基本的には、
import { API } from 'aws-amplify';
でAPIクラスをインポートした後、
await API.post(apiName, path, options); // CREATE
await API.get(apiName, path, options); // READ
await API.put(apiName, path, options); // UPDATE
await API.del(apiName, path, options); // DELETE
でLamdaで作成してあるAPIにアクセスすることが出来るので、各アクションからこれらを適宜呼び出しています。
React側の実装としては、Hooks（useEffect, useReducer）を使って作っています。
/services/todo-service.js
-----
-----
ここまででなんとかシンプルなTodoリストアプリが完成しました。
- Amplify Consoleによるスタティックなサイトのホスティングは簡単・超便利！
- Amplify CLIでのユーザー認証機能の追加はパラメータの設定が最初ちょっと大変だけど、何回か試行錯誤して分かってしまえばこちらも簡単で素晴らしい！
- Amplify CLIでのREST APIの作成は、DynamoDBの特性を理解して設定する事が超重要！（*）
* もちろんDynamoDB以外の任意のデータベースを使うことも可能。
現在のソースコードは下記から確認可能です！
https://github.com/mikehibm/amplify-test01
1) Next.jsでスタティック・エクスポートしたサイトをAWS Amplify Consoleでホスティングする
2) AWS AmplifyでReactアプリにユーザー認証機能を追加する
3) AWS AmplifyとDynamoDBでサーバーレスなREST APIを構成する