Firebase大好きなやつがAWS Amplifyに入門する

AWS触るの久々すぎる…とりあえずgetting-started見よう
https://aws.amazon.com/jp/amplify/getting-started

初期化中

めっちゃ押せそうなのにただの画像なの罠

amplify cliのインストール

curl -sL https://aws-amplify.github.io/amplify-cli/install | bash && $SHELL

コンソールの使い方がまだ全然わからないがとりあえずAuthのセットアップする。Cognitoのこのパスワードポリシー設定できるのはいいよなぁ。SNSログインの選択肢にTwitterがなかった。

Data Modelを作ってみる。型がいっぱいある！Date系の型めっちゃあるな。ID型とかGraphQLを感じる。インターフェースがGraphQLにできるという話を聞いているので、きっとそういうことなのだろう。is requiredとかも右側のサイドメニューから設定できる。

リレーションが設定できる！これを何に使うのか全然まだわからんがとりあえず設定してみた

Data Modelの作成に失敗する、なぞだ

リロードしたらなんか消えちゃったからとりあえずUserだけにして作ってみたらいけた。フロントデプロイしてみたいので、そっちをセットアップするぞ

作業再開
フロントのデプロイしようとおもって https://ap-northeast-1.console.aws.amazon.com/amplify/home からfrontendのリポジトリ連携してデプロイしようとしているが、設定ファイルがインラインで触れると書いているくせに触れないし、保存してデプロイボタン押しても先に進まないし意味わからん

できるだけ何も触らないようにしたら連携できた。gitのブランチごとにフロントエンドの環境？を用意できるみたい。とりあえず絶対CI/CD組めみたいな圧を感じる。

環境変数もブランチ？ごとに上書きできるみたい。

よしよしデプロイできた！ブランチごとにプレビュー用デプロイみたいなのを用意することもできるらしいが、一旦は置いておこう。SDK使ってバックエンド叩いてみよう。
https://develop.d3dxjnwk53phwp.amplifyapp.com/

backend environmentの追加方法がわからん。Consoleからはできないのかな？

backend environmentの追加👇

amplify env add
 ? Do you want to use an existing environment? (Y/n): n
 ? Enter a name for the environment: dev

Firebaseと違って、1つのProject？のなかにenvironmentを複数用意するスタイル

一旦今日はここまで。続きは週明けかな。以下気になること。

• 特定のbackend environmentで作ったData Modelを別のEnvironmentに反映させるには？
• APIでカスタムなロジックを作りたいときは？

👆の疑問はこのDocsに書いてそうだな。schema.graphqlファイルに書いていくっぽい。Directivesでmodelとか権限周りのauthとか書くみたい。
https://docs.amplify.aws/cli/graphql-transformer/overview#create-a-graphql-api

権限はこんな感じでかけるらしい。simplest caseのほうは、デフォルトでownerフィールドが追加される模様。

# The simplest case
type Post @model @auth(rules: [{ allow: owner }]) {
  id: ID!
  title: String!
}

# The long form way
type Post
  @model
  @auth(
    rules: [
      { allow: owner, ownerField: "owner", operations: [create, update, delete, read] },
    ])
{
  id: ID!
  title: String!
  owner: String
}

operationsはread, create, update, delete。readにgetとlistの両方が含まれてるのはfirestoreとは違うとこだな。

type Todo @model
  @auth(rules: [{ allow: owner, operations: [create, delete, update] }]) {
  id: ID!
  updatedAt: AWSDateTime!
  content: String!
}

In this schema, only the owner of the object has the authorization to perform update (updateTodo) and delete (deleteTodo) operations on the owner created object, but anyone can read them (getTodo, listTodos). This prevents the object from being updated or deleted by users other than the creator of the object while allowing all authenticated users of the app to read them.

firestoreとぜんぜん違う！書いてなかったらできてしまうのか…？（ブラックリスト方式感ある？）自分で読み書きできる気がしないんだがw

APIでカスタムロジック作りたいとき

Custom ResolverでQuery/Mutationが作れる（Lambda functionになる）
https://docs.amplify.aws/cli/graphql-transformer/function

APIとかは雰囲気わかったので次は開発環境整え系見る。とりあえずここ見る。
https://docs.amplify.aws/cli/teams/overview

ローカルで使用するamplifyのenvironmentを切り替える amplify env checkout ENVIRONMENT_NAME

push/pullなど、envを指定したい場合は --envName VALUE をつければいけるっぽい

とりあえずTodoアプリみたいなのを作ろうとしてる。まずはauthからやる。

import { Auth } from 'aws-amplify'
...

    await Auth.signUp({
      username: data.email,
      password: data.password,
      attributes: {
        email: data.email,
      },
    })

これを呼ぶとForgot password codeってメールが飛んでくる🤔 Auth.confirmSignUpってメソッドに確かにcode渡せるようになっているが、SignUpのときに👇で設定したメッセージが飛んでくるのは意味わからなくない…？むずかしい！

amplifyではなくUserPoolsのほうの画面に行って、メッセージのカスタマイズ→Eメール検証メッセージのカスタマイズ にいってリンクに変更して、Auth.resendSignUp を呼ぶとエラーになっちゃった。

ぐぐるとCognitoにドメインが設定されてないからだめだったみたいで設定したらresendできるようになり、やっとsignInできるようになった！むずかしい〜
https://note.kiriukun.com/entry/20191022-aws-cognito-userpool-domain-error

リンクじゃなくてコードにしておいて、メールで送られてくるメッセージを Forgot password code じゃなくて、メールアドレス確認コードみたいにしておけばいいかもしれん。

schema.gqlに以下追記した

type Todo @model @auth(rules: [{
  allow: owner
}]) {
  id: ID!
  title: String!
}

amplifyクラウド側に反映させようと思ってひとまずコード生成しようと思い amplify api gql-compile すると @auth directive with 'userPools' provider found, but the project has no Cognito User Pools authentication provider configured. ってエラーが出た。User Poolは作ってるはず。

ぐぐったらまさになIssue発見。
https://github.com/aws-amplify/amplify-cli/issues/3480

amplify api update 叩いて update auth setting みたいなやつ押してUser Poolも使うように設定変更したらコンパイルできるようになった。

ぐぬぬ、variablesの部分に型効かないのか… これは辛いな

型情報自体は自動生成してくれるからこうするしかないか

import { API, graphqlOperation } from 'aws-amplify'
import { createTodo } from 'graphql/mutations'
import { CreateTodoInput } from 'API'
...
  const onCreateTask = handleSubmit(async data => {
    const input: CreateTodoInput = { title: data.title }
    const response = await API.graphql(graphqlOperation(createTodo, { input }))
    console.log({ response })
  })

listに対するsubscriptionは作れないのかなーーーGraphQLは使ってたから知識があるがSubscriptionは使ってなかったからそこの勉強が必要そうか
https://docs.amplify.aws/lib/graphqlapi/subscribe-data/q/platform/js

結果に型つかないのが厳しいというか、AmplifyのTypeScriptSDK作った人あんまりTS詳しくないのでは…

authまわりもanyが多すぎて辛い… 匿名ログインももしかしたらできないかもしれないしなかなか厳しい。ココでいう匿名ログインはFirebase Authの匿名ログインおよび匿名からuserID引き継いだまま昇格できること。

unauthenticated loginを有効にしているときに、unauthenticatedなユーザーが以下のように定義されてるTodoのデータを作成したくて createTodo のGraphQL APIを叩いても No current user ってエラーがクライアント側で発生してしまう。

type Todo @model @auth(rules: [{allow: owner}]) {
  id: ID!
  title: String!
}

• unauthenticated login？したユーザーでも createTodo はエラーになるのは正しい？
• Email等でログインせずにownerとしてデータを作成することはAmplifyではできない？
• ボクのunauthenticated loginの処理が間違えている？（特に何かメソッドを呼んでいるわけではなく、 await Auth.currentCredentials() してクレデンシャルあるなって確認しているだけ）