Amplifyをゼロから１ヶ月ほど触ってみました。
やったこととしては、Amplifyを使ってバックエンドをほぼ丸投げし、フロントエンドにフォーカスしたアプリケーションを作ることです。
わかってしまえば簡単なのですが馴染むまでは色々と詰まるところがあったので、ザックリ振り返りとして残しておこうと思います。
全ての始まり。AWSコンソールからBuild an app
CLIでも出来るのですが最初に調べた方法がこの方法だったのと、今後の手順も一番わかりやすいかなと思ったのでこの方法がおすすめです。
上記手順により、Amplify StudioというGUIツールがブラウザで利用できるようになります。
初めはそもそもAmplify Studioって何状態から始めていたので、流行りのノーコードかなんかなのかと思っていたくらいでした。
Amplify Studioとは簡単にいうと、最近リリースされたばかりで、AWSのあらゆるツールと直感的に関連付けて小難しいロジック部に触れなくても爆速でアプリが作れますよという感じ。
そしてAmplify Studioの目玉？としては、Figmaでデザインされたコンポーネントを取り込んでreactやvueのコンポーネントパーツとしてソースコードに落とし込むことができるという機能。
最近の記事ではここばかりが着目されているので、Amplify自体を触れてこなかった身としてはノーコードなのかなとか思ってしまっていたということでした。
そうではなくて、様々な開発を加速させる全部入りキットみたいな立ち位置というのが正しい気がします。
AmplifyではDataModelやAuth、functionといった機能がありますが、中身はAWSのAmazon DynamoDBやCognito, Lambdaといった既存のサービスとなります。
知らなくてもできるよっていうのは便利な反面詰まると怖い部分で、実際どういうことなのって部分では色々調べる時間は必要でした。
Local setup instructions
前置きが長くなりましたが、Amplify Studioを開き左上のLocal setup instructionsという部分をクリックすると
amplify pull --appId *************** --envName stagingとamplifyの環境をアプリに持ってくるためのコマンドが表示されます。
これをアプリに持ってくるためには、reactを例にすると、まずは通常と同じようにcreate-react-appでアプリケーションを作成します。
その後、amplify CLIをパッケージとしてインストール
@aws-amplify/cliその後先程のamplify pull ~をすることで、新規で作ったアプリケーションとAmplifyの環境が接続される状態になります。
この過程はCLIでもamplify init などから始めることもできますが、冒頭で書いたように最もわかりやすいかなと思ったのでこの方法で残してあります。
amplify pushやamplify pull
前項でアプリがamplifyと同期した状態となりましたが、この後は大きく２つの進め方があると思っています。１。1.Amplify Studioを使ってGUIでモリモリ作っていく
2. コードベースで作っていったものをAmplifyに教え込む
どちらも正しい方法で、クラウドの状態を取り込むときはamplify pullを。
ローカルで行った変更をクラウドに適用させたいときはamplify pushを使います。
amplify addやamplify update
これは最初正直少し意味分かっていなかったのですが、上記と似たような感じとなり
例えば認証機能を使いたい場合なんかも、AmplifyStudio経由でAuthを追加したものをpullすればamplify add authの代わりになるし、コマンドでamplify add authをしてからamplify pushをすればクラウドに適用されます。
GUIでぱぱっとやると簡単で便利ですが、機能追加時に細かいこと色々設定できるのはコマンドの方でした。
GUIで追加した場合もamplify update ~で変更できるので、先ずは触ってみてって感じがいいかも。
GraphQLとDataStore
AmplifyStudioが提供するDataStoreをアプリ側からインポートすると、DataModelの作成、更新、削除ができるようになります。リレーションもできます。
え、GraphQL書かなくていいのでは？と思いましたが、細かい部分ではGraphQLの方がやはり便利。
とはいえめちゃくちゃ直感的に使えるので簡単なアプリだと活用できそう。
ちなみにGraphQLのSchemaに基づいたクエリを一括で生成してくれるamplify codegenというコマンドがとても便利だった。
Lambdaとfuncrion
Amplifyではfunctionという機能を追加することで、Lambda関数を定義し、DBが更新されたタイミングや、APIを叩いたタイミングをトリガーに発動させたり、定期実行する処理を追加したりできる。
Lambdaを使ってSESの機能を使うというケースで実装を行いましたが、GraphQLのSchemaにfunctionの定義をtype Queryという形で追加してあげるだけでAPIを使うようにLambdaを呼び出すことができるというのが分かったのが感動モノでした。
別記事に惑わされAPIGatewayの設定をせっせと調べていて時間を浪費しましたが、そんなものは必要なかったというオチ。
(Lambdaの方にSESへの認証権限を追加したりと他にもハマるポイントはありましたが)
この辺りは単純に触っていて楽しかったのでもう少し時間ができたら深掘りしてみたいと思った。
最後に
自分の優秀さが劣っていただけというのは置いておいて、普通にフロントアプリとバックエンドのアプリをdockerとかで作るのと、amplifyで作るのとで比較してみると、結果としては同じくらいの期間はかかってしまったかなという感じ。ただ大半をAWSの学習に費やしていたので、次もやるなら半分くらいの時間でできそう。(でも個人的には今はnext + Vercelが最強かなと思っちゃう)
