ReactとAmplifyでTODOアプリを作ってデプロイ！
所要時間
3時間強
環境
・Amplify CLI 3.17.0
・aws-amplify 1.2.4
・aws-amplify-react 2.5.4
やったこと
1. ReactでTODOアプリを組む
2. Amplifyの設定
3. Amplifyでバックエンド設定
4. 認証機能を作成
5. APIを作成
6. デプロイ
詳しく
1. ReactでTODOアプリを組む
基本的にこちらを参考に
https://github.com/dabit3/react-notes
2. Amplifyの設定
3. Amplifyでバックエンド設定
$ amplify init4. 認証機能を作成
$ amplify add auth
$ amplify pushCognitoのリソースが作られる
aws-amplify-reactのサインイン/サインアップコンポーネントをアプリに差し込む
サインアップしてみる
メール認証でべりふぁい
データはこんなふうに保存される
5. APIを作成
$ amplify add apischemaを定義
$ amplify pushqueryとmutationが自動生成される
AppSyncのリソースが作られる
DynamoDBのリソースが作られる
アプリ内からAPIを呼ぶように書き換え
タスクを登録してみる
データはこんなふうに保存される
6. デプロイ
$ amplify add hosting
$ amplify publishS3バケットが作られて、静的ホスティングがかかる
プロダクションモードだとこの上にCloudFrontかましてhttps対応してくれる
デプロイ完了！
ビルド設定は最初の`amplify init`の時にgenったこのあたりをよしなに使ってくれたわけか
つまづいたところ
・Pinpoint入れてからCognito設定したらばぐった
いったんどちらの設定も削除、authのみ再設定でなおった
$ amplify remove analytics
$ amplify remove auth
$ amplify add auth
Do you want to use the default authentication and security configuration?
> Default configurationおわりに
バックエンド開発もインフラ準備もなしで、TODOアプリを作成・自動デプロイまでできました〜すごいな
Amplify CLI使うのの何がいいって、AWS上の全リソースがCloudFormation経由で作られてるのでお掃除らっくらくなところですね！誰が何のために作ったのかようわからんリソースとか後々大変なことになるし！設定系のファイル追跡していればインフラのバージョン管理も楽々。
今回はやらなかったけどもAmplifyの設定からローカル環境のモックたてられるみたいだし、開発する上でもかなり有用なのではないでしょうか。
個人的にもGCPよりAWSに慣れてるのでわたしはFirebaseよりこっちの方がいいかもな〜とか思いました。