🍮

Amplify Gen2(preview)でAPI Gateway + Lambdaを構築する

2024/02/01に公開

以前こちらの記事の中で、Amplify(Gen1)を使ってAPI Gateway+Lambda を構築しました。
https://zenn.dev/ncdc/articles/ebbeb4cecaa838
今回はAmplify Gen2(preview)を使った構築を試してみます。

ソースコード

以前の記事と同様に、コードを触りたい人はこちらのGitHubを参照してください。

https://github.com/k-ibaraki/aws-lambda-apigw-sample

アーキテクチャ

以前構築したものと同様に、Amazon API Gateway + AWS Lambda で超シンプルなサーバレスAPIを作ります。

Amplify Gen2のドキュメント

https://docs.amplify.aws/gen2/

作成手順メモ

実際に作成した際の手順を簡単に記載します。

Amplify Gen2のバックエンドの初期化

以下のコマンドでAmplify Gen2のバックエンドの初期構築ができます。

npm create amplify@latest

完了すると、amplifyディレクトリやpackage.jsonなどが生成されます。

AuthとDataを削除

amplifyディレクトリ配下に、dataディレクトリとauthディレクトリが作られています。
dataはAppsync+DynamoDB、authはCognitoです。
今回は両方とも作らないので消し去りました。また、backend.tsdefineBackendの引数にも指定されているので、こちらも消しました。

Lambdaの定義

次にLambdaを定義しました。これに関しては、ソースコードを見ていただいたほうが早いと思います。

  • 関数のコード

https://github.com/k-ibaraki/aws-lambda-apigw-sample/blob/2024-01-31/AmplifyGen2/ibaraki-amplify-gen2-api/amplify/functions/ibaraki-sample-lambda/index.ts

  • リソースの定義

https://github.com/k-ibaraki/aws-lambda-apigw-sample/blob/2024-01-31/AmplifyGen2/ibaraki-amplify-gen2-api/amplify/functions/ibaraki-sample-lambda/resource.ts

  • バックエンドにLambdaを追加

https://github.com/k-ibaraki/aws-lambda-apigw-sample/blob/2024-01-31/AmplifyGen2/ibaraki-amplify-gen2-api/amplify/backend.ts#L3-L7

API Gatewayの定義

前述のように2024/01時点のAmplify Gen2(preview)では、API Gatewayを作る機能を見つけることができませんでした。ですが、Amplify Gen2ではCDKを利用して自由にリソースの追加ができます。
backend.tsにAPI Gatewayを作成するCDKのコードを書きました。Stackの定義の仕方が一般的なCDKの書き方と差異があり少し戸惑いましたが、ドキュメントを読めばだいたいの書き方は理解できました。ただ、backend.tsに直接書くより別ファイルに分割したほうが良さそうに感じるので、カスタムリソースのファイル構成は要検討かなと思いました。
https://github.com/k-ibaraki/aws-lambda-apigw-sample/blob/main/AmplifyGen2/ibaraki-amplify-gen2-api/amplify/backend.ts

Sandboxについて

Amplify Gen2では、開発中のbackendリソースはユーザー毎にSandboxとして作成するようになっています。
以下のコマンドで、AWS上にAPI Gateway + Lambdaを構築しました。

npx amplify sandbox --profile {aws-profile}

なお、ステージングや本番環境などの長期的に使用する環境は、ローカルPCからではなくGitHubレポジトリと直接連携してCI/CDで構築する前提の設計になっているようです。たぶん。

SandboxのLiveReload

npx amplify sandbox実行中は、ソースコードを書き換える度にAWS環境に再デプロイが走ります。個人的にはインフラ環境のLiveReloadはかなり衝撃的でした。

便利な機能ではありますが、毎回AWS環境を作り直されたくない場合はctrl + cで停止させましょう。停止させる際に次のようなメッセージが表示されます。

? Would you like to delete all the resources in your sandbox environment (This cannot be undone)?

yで答えるとSandbox環境が削除されてしまいますので、消したくないときはnで答えましょう。(デフォルトはnです)

Sandboxの削除

前述の選択肢以外で能動的にSandboxのリソースを削除したい時は以下のコマンドを実施してください。

npx amplify sandbox delete --profile {aws-profile}

Amplify Gen2に触ってみた感想

Amplify Gen1と比べてGen2は、バックエンドが格段に書きやすくなっていると感じました。特にAmplify配下のディレクトリ構成が分かりやすくなっているのが良いですね。
ただし、preview時点では必要な機能が揃っていない印象ですので、本番で使うのは正式版が出てからかなと思います。特に次の2つの機能が無いのが致命的に感じます。

  • プルリクエストに対してプレビュー環境を作る機能(特にフロントエンドに対しては欲しい)
    • Amplifyのフロントエンド開発において最も便利な機能の一つだと思っているので、ないと辛いです
  • amplifyconfiguration.jsonの出力項目をカスタマイズできない。つまりバックエンドからフロントエンドへ連携する情報を追加できない
    • 標準機能で生成できるリソースが足りていないことはCDKを書けばよいので問題がないのですが、CDKで独自に追加したリソース情報を出力することができません
    • バックエンドの構築結果を手動でフロントエンドに連携する必要があり、不便です

これらはAmplifyのissueに要望が上がっていますので正式版では解消されると信じています。
正式版がでたらAmplify Gen2を積極的に使っていきたいです。

(2024/03/14)追記

いつの間にかAmplify(Gen2)のドキュメントにREST APIの項目が追加されていますね。CDKで自力で作っての方針みたいですね。
また、致命的に足りないと書いた出力項目のカスタマイズ機能が無事に追加されたようです。

https://docs.amplify.aws/gen2/build-a-backend/add-aws-services/rest-api/

NCDCエンジニアブログ

Discussion