Amplify Gen2でPoC開発：チーム開発に導入してみての感想と効率アップTips

# はじめに
本記事は```Amplify Gen2を取り入れてみたい方```に向けて執筆しました。、実際にAmplify Gen2を3ヶ月ほどPoCで使用した経験とAmplify Gen2 FestivalやAWS Summitに参加して学んだノウハウについて紹介します。
```はじめてAmplifyを扱う方```向けの記事も後日書こうと思います（意思表明）

# PoCで使ってみてのどうだった？
Amplify Gen2を3ヶ月ほどPoCで使ってみましたが、```この先全部Amplifyでいいんじゃないか？```と思うほど良い開発体験ができました。そう感じた理由を4つ紹介します。

### １. CICDの構築が1分で完了
これ、本当に1分でできます。PoCでは早期に価値検証を行いたいため、開発環境やCICDの構築に時間をかけたくありません。Amplify Gen2ではフルスタックGitデプロイメントを採用しているため、コンソール画面でGit repositoryと接続するだけでパイプラインが完成します。さらに、ブランチに紐づいた環境が自動作成され、URLが払い出されます。加えて、ブランチへのpushを検知してビルドとデプロイを行ってくれるため、設定が完了したらそのURLをチームに共有するだけでレビューやデモの準備が完了します。

https://docs.amplify.aws/react/deploy-and-host/fullstack-branching/branch-deployments/

### ２．ローカル開発も爆速だぞ！
Gen2ではローカル開発用に開発者それぞれにsandbox環境が準備されます。これにより、他のチームメンバーを気にすることなくリソースの追加・削除を行うことができます。
また、CDKベースになったため、Lambdaコードの変更などを検知して、[Hot swapping](https://docs.amplify.aws/react/deploy-and-host/sandbox-environments/setup/#:~:text=hot%20swap%20capability%20of%20the%20AWS%20Cloud%20Development%20Kit%20(CDK).)してくれるため都度デプロイすることなくバックエンドの動作確認ができ、爆速で開発が進められます。

https://docs.amplify.aws/react/deploy-and-host/sandbox-environments/setup/

### ３．AWSリソースを柔軟に扱える
CDKベースになったため、CDKで扱えるリソースは基本的にGen2で扱えます。
そのため、IAM権限周りや追加で必要なリソースを柔軟に扱うことができ、PoCで急遽AWSリソースを追加したい場合でもCDKの知識があれば爆速で追加することできます。

### ４．生成AI開発もできる！
Gen2でBedrockを呼び出すことで簡単に生成AI開発が行えます。
AWS公式がチュートリアルを公開してくれているので、そちらを参考にすれば簡単に自分のアプリに生成AIを取り入れることができます。

https://aws.amazon.com/jp/blogs/news/use-generative-ai-and-next-js-with-aws-amplify-to-build-a-fullstack-recipe-generator/



# Gen2をさらに便利にするTips
### １．AWS Amplify Backendを使う
VSCodeを使っている方には、AWS Amplify Backendが便利です！Gen2のsandbox環境で作成されたリソースはAWSコンソール上で探すことが困難ですが、この拡張機能を使えばブラウザのAWSコンソールで任意のAWSリソースページを開くことができます。

https://marketplace.visualstudio.com/items?itemName=fossamagna.amplify-backend-vscode

### ２．複数プロファイル・複数名前付きsandboxを使う
ローカルに複数のAWSプロファイルが存在する場合は```--profile プロファイル名```でプロファイルを切り替えられます。
また、sandboxの環境の名前は```--identifier```で上書きすることができます。sandboxの名前はローカルマシンのユーザー名に基づいて命名されるため、devcontainerなどで開発環境を共有している場合はエラーとなります。その場合は```--identifier```で名前を上書きすることで回避することができます。

### ３．amplify_outputs.jsonをliveshareで共有する
amplify_outputs.jsonはバックエンド環境の情報をamplifyが管理するためのファイルです。通常gitignoreされるため、liveshareのゲストには見られませんが、プロジェクトファイルに.vsls.jsonを作成し、以下のように設定すれば共有できます。

``` .vsls.json
{
    "$schema": "http://json.schemastore.org/vsls",
    "gitignore":"exclude",
    "excludeFiles":[
        "!node_modules"
    ]
}
```

:::note warn
ゲストもamplify_outputs.jsonを編集できるため、変更に気付けないリスクがありますので注意してください
:::

https://learn.microsoft.com/ja-jp/visualstudio/liveshare/reference/security#controlling-file-access-and-visibility

# 逆にイマイチだったところ
### １．Amplifyのドキュメントだけだと解決できないことがある
AmplifyはAWSをリソースを簡単に扱うことができますが、裏側はAWSリソースで成り立っています。そのため、AWSについての基本的な知識は持っておかないとAmplifyのドキュメントだけでは解決できないこともあります。
例えば、リアルタイムイベントをSubscribeする場合、ドキュメントではobserveQueryやsubscribeを使うように書かれています。しかしDataの裏側はAppSyncなため、Lambdaなどで直接DynamoDBを更新するといったようなイベントは監視することができません。
このような場合はAppSyncのドキュメント等を確認する必要があります。

https://docs.amplify.aws/react/build-a-backend/data/subscribe-data/

### ２．sandboxリソースをAmplifyコンソール上で確認できない。
これは個人的に一番改善してほしい点です。
AmplifyコンソールはGen2で一新され、環境ごとのDynamoDBやS3がAmplifyコンソールから確認することができるようになりましたが、sandbox環境はサンドボックス名しか確認することができません。
先述したようにAWS Amplify Backendを使うか、amplify_outputs.jsonを参考に自分でリソースを探すといった必要があります。

https://docs.amplify.aws/react/deploy-and-host/sandbox-environments/setup/#manage-sandbox-environments

### ３．GitHubのリンクからビルド結果に直接とべない
GitHub上でAmplifyのワークフローが失敗した場合Amplifyコンソールへのリンクが貼られるのですが、なぜかアプリ一覧へのリンクとなっており、ワークフローに直接遷移することができません。細かいですが、地味に不便だと感じました。

# まとめ
Amplify Gen2は、次世代のアプリケーション開発において非常に強力なツールです。実際にPoC開発で試してみた結果、その便利さと効率性を実感しました。この記事が皆さんの開発に少しでも役立てば幸いです。ぜひ、Amplify Gen2を試してみてください！

https://docs.amplify.aws/react/