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 

Getting Started

2. Amplifyの設定

AWS Amplify CLIの使い方〜インストールから初期セットアップまで〜 - Qiita

3. Amplifyでバックエンド設定

$ amplify init

4. 認証機能を作成

$ amplify add auth
$ amplify push

Cognitoのリソースが作られる

aws-amplify-reactのサインイン/サインアップコンポーネントをアプリに差し込む

サインアップしてみる

メール認証でべりふぁい

データはこんなふうに保存される

5. APIを作成

$ amplify add api

schemaを定義

$ amplify push

queryとmutationが自動生成される

AppSyncのリソースが作られる

DynamoDBのリソースが作られる

アプリ内からAPIを呼ぶように書き換え

タスクを登録してみる

データはこんなふうに保存される

6. デプロイ

$ amplify add hosting
$ amplify publish

S3バケットが作られて、静的ホスティングがかかる

プロダクションモードだとこの上にCloudFrontかましてhttps対応してくれる

デプロイ完了！

ビルド設定は最初の`amplify init`の時にgenったこのあたりをよしなに使ってくれたわけか

つまづいたところ

・Pinpoint入れてからCognito設定したらばぐった

[Error] AWSPinpointProvider - record event failed. , [CredentialsError: Missing credentials in config] 揃 Issue #3600 揃 aws-amplify/amplify-js

いったんどちらの設定も削除、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よりこっちの方がいいかもな〜とか思いました。