APIを構築する前回はユーザー認証機能を付けましたが、まだデータの永続化が出来ていないのでTodoアプリとしては未完成です。APIを追加してデータをデータベースに保存出来るようにします。現状を確認すると、下のようになっています。下のコマンドでAPIカテゴリを追加します。選ぶように言われます。Web上で見つかる情報にはGraphQLを使ったものが圧倒的に多いように思いますが、ここではあえてRESTを選びます。DynamoDB上に作成するテーブル名まで入力すると、次に作成するカラム情報の入力になります。ドキュメントをざっと読んだところ、DynamoDBでは基本的に1アプリケーションで使うテーブルは出来るだけ少ない方が望ましいらしく、「1テーブルで済ませられればそれが最も良い」との事です。長年リレーショナルデータベースに馴染んだ身としてはなかなか目から鱗な考え方です。DynamoDBでのスキーマ設計の勘所は、「パーティションキー」と「ソートキー」および「グローバル・セカンダリインデックス」「ローカル・セカンダリインデックス」を上手く使うことにあるようです。)この辺り、非常に奥が深そうで面白いのですがとりあえず今はシンプルなTodoリストアプリを作りたいだけなので、極力簡単な方法で行きたいと思います。パーティションキーを「pk」、ソートキーを「sk」とし、3つ目のカラムはmap型で「data」としておきました。map型にはJSONを格納できるので、こうしておけば後からの仕様変更にもある程度柔軟に対応することが可能になるかと思います。パーティションキーとソートキーを何にするかというのは、アプリケーションの要件によって大きく変わる部分で、開発効率にも大きく関わってきます。"todo:"というプリフィックスを付加して格納することにしました。することでユーザーのidが分かればそのユーザーに属するタスクの一覧を簡単に取得することが出来るようになります。始まるという条件で検索することになります。DynamoDBではパーティションキーは完全一致でしか検索出来ませんが、ソートキーは部分一致や範囲検索が可能なので、このようなクエリーが可能になります。以外のものにすれば対応出来ます。して保存すれば、簡単にそのレコードを一意に指定して読み出す事が出来ます。1アプリケーションで一つのテーブルしか使わない、というのはこのように2つのキー(およびセカンダリインデックス)を上手く使って複数の種類のデータを保存する、ということになるのかなと思います。カラム設定の入力が終わると、テーブルへのアクセス権の設定をするか聞かれるので、認証していないユーザーはAPIへのアクセスが出来ない様に設定しておきます。実行して、追加した設定をAWS側に反映します。完了するとAWS側では下記のリソースが作成されています。DynamoDBこれらのうち、Lambda関数は自動生成されたコードだと上手く動かず、何をしているのかを理解した上でアプリケーションの要件に合わせてそこそこ手を加える必要がありました。false}}という形になっています。Gatewayから受け取ったオブジェクトをDynamoDBのスキーマに合った形式に適宜変換してから保存しています。次はReactアプリの方を変更して行きます。この辺りのドキュメントを見ながらAPIへのアクセス処理を実装します。DELETEでLamdaで作成してあるAPIにアクセスすることが出来るので、各アクションからこれらを適宜呼び出しています。useReducer)を使って作っています。/services/todo-service.js----------ここまででなんとかシンプルなTodoリストアプリが完成しました。DynamoDB以外の任意のデータベースを使うことも可能。Consoleでホスティングするところまで行いました。Cognitoによるユーザー認証を追加したいと思います。現在の状態を確認しておきます。configuration?」と聞かれます。configuration」を選択して次に進みました。実行して追加した設定をAWS側に反映します。Pool、Lambdaファンクションなど)が作成されているのが分かります。次にReactアプリケーションの方でCognitoに接続するために、必要なライブラリを追加します。Components」を使います。/pagesフォルダ内にlogin.jsを作成し下のコードを入力しました。開くと下のようなログイン画面が表示されるようになります。account」のリンクをクリックします。(この辺りの文言はカスタマイズ可能です。)ここで、電話番号の入力欄が必須となってしまっています。これを非表示にするためのカスタマイズ方法がドキュメントには載っているのですが、その通りにやってみても上手く行きませんでした。ComponentのバグとしてGitHubのIssueに上がっているようです。この記事を書いている数時間前にFixがマージされているみたいなので、近日中には解決しそうです。今はとりあえずダミーの電話番号を入力して次へ進みます。登録フォームをSubmitすると、確認コードの入力画面に移ります。入力したメールアドレスに確認コードが送られているので、そのコードを入力して「Confirm」をクリックすれば登録完了です。Poolを見てみると、確かに1件のユーザー情報が登録されているのが分かります。バックエンド側を何も作り込んでいないのにここまで自動的に出来上がってしまうのはすごいですね!最後に上で作成したlogin.jsと同様に認証用のUIをindex.jsページにも追加します。Out」リンクを追加ししました。'aws-amplify';でAuthクラスをインポートし、リンクがクリックされたらAuth.signOut();を実行すればOKです。Consoleでホスティングしてみます。nextpackage.jsonはこんな感じになっています。ファイルが出力されます。Consoleでホスティングすることまで出来れば目的達成です。deployment...」を選ぶと、ブラウザが開いて接続するGitリポジトリを聞かれます。いう設定ファイルを手動で変更する必要があるので、ダウンロードしてプロジェクトのルートフォルダに保存します。ここではNext.jsでスタティック・エクスポートした成果物をデプロイしたいので、下のように一部を変更します。(commandsとbaseDirectory)変更したamplify.ymlファイルをGitリポジトリにコミット・プッシュします。Console側でビルド処理が走ります。ProvisionからVerifyまで全てグリーンになってから画面に表示されているURLをクリックすると、アプリケーションがデプロイされているのが確認出来ます。dev」で実行しながらローカルで開発します。ブラウザ上だけで動くTodoアプリを作りました。API経由でのDynamoDBへのデータ永続化機能」を追加して行こうと思います。試してみることにしました。作ったのは、Todoリスト。よるWebアプリです。ログインすると、DynamoDBに保存された自分のTodoリストが表示されます。Cognitoという構成になりました。シンプルなTodoリストですが、Cognitoによるユーザー認証やDynamoDBなど慣れないモノについて使い方を調べながら作ったので結構時間がかかりました。ConsoleによるフロントエンドのHosting機能は非常に便利で使いやすいと思いました。方が使いやすいかなあ」という感じです。ドキュメントが(内容的には非常に多岐に渡って網羅されているのですが)今ひとつ分かりにくい気がします。これからせっかくなのでもう少し機能追加をしながら使い込んで見たいと思います。