複数のAmplifyプロジェクトを使った開発方法
トライビートという会社の札幌オフィスで開発全般やってます。
気づいたらもう12月ですね。
AWS Amplify Advent Calendar 2021のカレンダー2は、まだ空きが多いので、今年開発していく中で得た知見をメモとして残しておきます。
概要
- Amplifyの複数envについては色々な記事で情報が公開されている
- 複数のAmplifyプロジェクトを接続する記事をあまり見かけなかったので試行錯誤した
- 実際のプロジェクトでやりたかったこと
- 管理者サイトと一般ユーザー向けサイトを別々のAmplifyでプロジェクトで管理したい
- AmplifyのBackend（Auth、API、Function、Storage）は共有したい
- サブドメインとかで別々にhostingしたいんだけど、Backendはそもそも同じデータ層を扱うので、APIやFunction等で共有できるものは一元管理したい。
どう解決したか
- 一般ユーザー向けサイトを普通にAmplifyプロジェクト（FrontendとBackend）で構築。
- 管理者サイトは、Backendを用意せず、一般ユーザー向けサイトのBackendを参照させる流れで構築。
- 具体的な方法は下記の公式ドキュメントが参考になりました。
- ざっくりとした流れ
- まず最初に、一般ユーザー向けサイト（Backendを含むAmplifyプロジェクト）を通常のAmplifyプロジェクト構築の流れで作成
- 次に管理者向けサイトはフロントエンド部分のみ実装したプロジェクトを構築し、
amplify init等はせずに、amplify pullをしてbackendに一般ユーザー向けサイトを選択する。 - Backendを紐付けるときに、「Do you plan on modifying this backend?」と聞かれるのは、「No」を選択し、管理者向けプロジェクトからはBackendの変更をできないようにする。
- あとは、ドキュメントに従い、Amplify Console上でhostingの設定をしていく
tips
- 管理者向けサイトを
amplify deleteすると、一般ユーザー向けサイトのBackendも削除される。管理者向けサイト側のAmplifyプロジェクト（hostingのみ）削除されることを期待していましたが、そうではなく、接続しているBackendも削除されました。 - Gitは別リポジトリで管理するようにした。モノレポでディレクトリで分ける構成も検討しましたが、管理者サイトのみ更新など、片一方のみビルド〜デプロイみたいなことができなそうだったので、リポジトリ毎分けるようにしました。
- 一般ユーザー向けサイトで追加したAPIやFunctiionを、管理者サイトのフロントエンドから利用するとき、一手間必要でした。具体的には下記。
aws-export.jsを一般ユーザーサイトから管理者サイトへコピーしてくるschema.jsonを一般ユーザーサイトから管理者サイトへコピーしてくる- 以下のコマンドで最新の
schema.jsonが取得できそうであるが、エラーとなったので手作業で頑張ってた $ aws appsync get-introspection-schema --api-id <対象の AppSync の API ID> --format JSON schema.json
- 以下のコマンドで最新の
amplify codegenを叩き、API.tsやmutations.tsやqueries.ts などを生成する
