Amplifyを最初に勉強する時に勘違いしていた事実あって、明らかに時間の浪費をしたのでここにメモる
チュートリアルなんかで ReactとかAngularプロジェクトなどからAmplifyに接続するお手本が多いが、たいていはフロントエンドのプロジェクト内で amplify initしている
てっきりフロントエンド側環境に amplify initして、環境を作らなければならないような錯覚に陥るんだけどそうじゃないです
amplifyには フロントサイドとバックエンドサイド機能があって、全く構造が異なります。
フロントサイドは package.jsonに aws-amplify, aws-amplify-reactなどのようなパッケージを組み込んで、あくまでフロントエンド側の機能の一部として使います。
なので amplify initは不要です。
つまりフロントエンドのプロジェクト内にamplifyフォルダ自体が不要なんです。
もちろん例外はあって、フロントエンド側を amplify publish使ってホスティングまでしたい場合はamplifyのバックエンド機能が必要となります。ただしホスティング機能のみ追加でOK
具体的には以下のコマンドのみ必要（完了までいろいろ聞かれるが割愛）
＄amplify init
$amplify add hosting
ホスティング機能だけのamplifyバックエンドがあればいいんです。
実際のAppsyncとかDB定義とかS3設定は別のバックエンド専用のプロジェクトを作って、その中で設定する。
じゃあ、バックエンド側の変更をフロント側に伝えるにはどうすればいいのかという話ですが、基本は src/aws-export.js src/API.ts src/graphql/フォルダ配下を共有すればいいと思います。
※共有ということはバックエンド側でこのソースを作ってやる必要があリます
※TypeScriptの場合です。iOSとかAndroidとかはまた別のファイル名になります。
※dev,stg,prodなどの複数環境で同一コードを利用するために aws-export.js はファイルサーバなどで管理し、それ以外はgitに入れてしまう運用をします。
graphql経由でlamda関数にアクセスし、そこでS3操作や、メール送信、SNSなどを実装してしまえば、上記graphql周りのコード共有だけで完結します。
なおgitを使わない方法もあって、もしamplify initをフロント側で実行してるなら以下のコマンドで、
バックエンド側のファイルをクラウド経由で持って来れます
$rm .graphqlconfig.yml
$amplify add codegen --apiId <AppsyncのAPI ID>
これを使うだけのためにamplify initをしてもいいかもしれないですが、amplify initするとクラウド側にそのAmplifyプロジェクトが生まれてしまうので注意が必要です。
正直git経由の運用は手間はかかるのですが、フロントエンドエンジニアにAmplifyのバックエンドを意識させたくないとか、余計なAmplifyプロジェクトを作りたくない場合はgit経由が良いと思います。
例えばamplify initするにはAWSのアクセスキーやシークレットキーが必要になるのですが、フロント作成は外注で教えたくないケースもあるかもしれません。
逆にフロント側作成も社内メンバーで、風通しが良い関係なら後者の方が良いと思います。「使ってないフロント専用のAmplifyプロジェクト見つけたら消すからね！」で通じる関係値ですね。
いずれにせよシンプルさを考えればAmplifyプロジェクトをバックエンド専用として分離してしまうのが得策だと思います。