はじめに
こんにちは。この記事は、Insurtechラボ12月アドベントカレンダー23日目の記事として書いています。
先日Amplify Gen2が発表されました。日頃Amplifyを使って開発をしている自分としては見逃せないニュースだと思ったので、この機会に調べたことを記事にしておきたいと思います。
そもそもGen1とは？
従来Amplifyでは、Amplify StudioやCLI(amplify add api等)を使ってバックエンドのリソースを作成していました。これがGen1だそうです。
CLIは対話型になっていて幾つか回答した後は、裏でCloudFormationが頑張ってリソースの作成をしてくれます。
凝った設定にしないのであれば、それだけでAPIやLambdaを利用できるためかなり楽できます。またFigmaで作成したデザインをそのままReactのコンポーネントとして取得する機能を備えており、試行錯誤しながら使っています。(そのあたりについては他の方が以前投稿されているので載せておきます)
Gen2は何が変わった？
TypeScriptを使用したリソース作成
Amplify Gen2ではCLIを使ったデプロイ方法は撤廃され、TypeScriptを使用するようです。
以下のコードはTypeScriptで定義したAppSyncの設定です。
↑ではスキーマをエクスポートしているのですが、これをアプリ側のロジックにインポートすることでそのままGraphQLでAPIを呼び出すことができます。(codegenせず呼び出せるようになった)
※ 2023/12時点ではData (AppSync+DynamoDB),Auth(Cognito)以外はCDKを使って設定する必要がありそうです。
サンドボックス環境を使った開発
開発中にバックエンドの設定を修正する為、都度デプロイするのではなく
バックエンドリソースをサンドボックス環境としてAWS上に構築しておいてリアルタイムで設定を変更しながらフロントの開発を行えるようになりました。
実際に体験するまでよくわからなかったのですが、「おぉ！」と唸ってしまうような速度でバックエンドの設定が書き換えることができるので、毎回amplify pushでデプロイし直して。。。のようなことがなくなるためリードタイムがかなり短くなったのではないでしょうか。
サンドボックス環境の初回構築が5分ほど、2回目以降はかかっても10秒程でバックエンドの更新ができました🙌
Figmaプラグインを利用したコード化
Amplify Gen1ではAmplify Studioを経由してReactコンポーネントを生成していました。
Figma to Amplify Studioで様々な制約があり頭を悩ませていたのですが
Gen2ではFigmaの開発者モードからAmplify UI Builderというプラグインを利用してコードを生成する方法に変わりました!
ただ、実際に使ってみたのですが、プラグインを起動したタイミングで無限ロード編に突入していまいコードを生成することができず断念。。。今後のアップデートに期待ってやつですかね。
他にも色々(CustomPipeline, Custom resources, SSR機能…)
参考
公式ドキュメント https://docs.amplify.aws/gen2
終わりに
GAまでにまだまだ変更がありそうですが、自分のいるチームがビジョンとして掲げている「爆速開発」にも色々な良い影響がありそうだなと思いました。
Gen1のプロダクトをGen2に移行するための方法も匂わせているので、既存のプロダクトたち含めより良くなるといいですね!
