Amplify Gen2の 新機能と実践的な使用例 AWS Amplify Gen 2 Festival in Japan/New features and practical use cases in Amplify Gen2

Transcript

1. Amplify Gen2の 新機能と実践的な使用例 AWS Amplify Gen 2 Festival in Japan 2024-06-19 株式会社永和システムマネジメント　村上雅彦 (a.k.a @fossamagna)
2. 村上 雅彦 株式会社永和システムマネジメント Amplify Japan User Group 運営メンバー AWS Community Builder (Front-End Web & Mobile since 2022) GitHub: https://github.com/fossamagna X(旧Twitter): https://x.com/fossamagna 自己紹介
3. • AWS CDKをベースとする次世代のAmplifyのバックエン ド構築ツール • TypeScriptによるバックエンド定義を提供 • 開発者毎の独立したsandbox環境を提供 • GitのブランチとAWS環境を1:1でマッピング Amplify Gen2の機能
4. • Amplify Gen2のSandbox環境 • Amplify Gen2のCDKカスタムリソース Amplify Gen2の使用例を紹介します
5. • 開発者毎の独立した sandbox環境を提供 • npx ampx sandboxコマン ド一発で環境構築完了 • hot swapデプロイ対応で 迅速にデプロイ可能 Amplify Gen2 sandbox environments https://docs.amplify.aws/react/how-amplify-works/concepts/#faster-local-development
6. • sandbox環境はとっても便利 • でも、実際に利用して困った点も あった • 困った時にどう対応したかを紹 介 Amplify Gen2 sandbox environments
7. sandbox環境が共有されてしまう問題 • VSCodeのdevcontainerを利用した時に発生 • 全員のsandbox環境の名前が同じになってしまう Amplify Gen2 sandbox environmentsで困ったこと、その1 https://docs.amplify.aws/react/how-amplify-works/concepts/#faster-local-development
8. 問題の原因： • devcontainer上のユーザー名が全員同じだったためサンドボックス 環境も同じ名前になり共有されてしまった • サンドボックス名は amplify-<app-name>-<$(whoami)>-sandbox 対応： • npx ampx sandboxコマンドの--identifierオプションでホストマシン 側のユーザー名を指定して開発者毎に別々の名前になるようにした Amplify Gen2 sandbox environmentsで困ったこと、その1 ※名前付きサンドボックス環境 https://docs.amplify.aws/react/deploy-and-host/sandbox-environments/features/#work-with-multiple-named-sandboxes
9. デプロイされたAWSリソース探すの大変問題 Amplify Gen2 sandbox environmentsで困ったこと、その2 https://docs.amplify.aws/react/deploy-and-host/sandbox-environments/setup/#manage-sandbox-environments • Amplifyの管理コンソールではsandbox環境は1行で表示されるだけで、sandbox内 のAWSリソースは確認できない。
10. デプロイされたAWSリソース探すの大変問題 Amplify Gen2 sandbox environmentsで困ったこと、その2 • 例えば、AppSyncのAPIも名前が同じで探しづらい。ランダム値を含むエンドポイント URLを手掛かりにして探すしかない。
11. 対応：sandboxのAWSリソースを確認できるVSCode拡張を作成！ Amplify Gen2 sandbox environmentsで困ったこと、その2 • 自分のsandbox環境のAWSリソー スにだけをツリー表示 • リソースを選択してブラウザでAWS マネージメントコンソール可能 • https://marketplace.visualstu dio.com/items?itemName=fo ssamagna.amplify-backend-v scode&ssr=false#overview
12. Amplify Gen2の CDKカスタムリソース
13. • Amplify Gen2のバックエンドとして auth, data, function, storageが 提供されている • Amplify Gen2はAWS CDKベース なので任意のCDK Constructを利 用してカスタマイズ可能 ◦ https://docs.amplify.aws/ge n2/build-a-backend/add-aw s-services Amplify Gen2はCDKアプリ
14. • Amplify Gen2のfunctionは Node.jsランタイムのみサポート • CDKを利用して別ランタイムをデプロ イすることも可能 • ただし、Amplify Consoleからデプ ロイしようとすると失敗する • Amplify Consoleではdockerイ メージをビルドできない。 // amplify/custom/docker/resource.ts export class DockerImageLambda extends Construct { constructor(scope: Construct, id: string, props: Props) { new lambda.DockerImageFunction(this, 'DockerImageFunction', { code: lambda.DockerImageCode.fromImageAsset('image-handler'), }); } } // amplify/backend.ts new DockerImageLambda(backend.createStack('Docker'); , 'Docker', {}); LambdaでNode.js以外を利用する
15. • Amplify Gen2は任意のCI/CDサービスからデプロイす ることが可能 • バックエンドはdockerのイメージがビルドできる環境で行 い、Amplify ConsoleでフロントエンドをAmplify Hostingにデプロイするという連携が可能 • 今回はバックエンドのデプロイにAWS Codepipelineを 利用した カスタムパイプライン https://docs.amplify.aws/react/deploy-and-host/fullstack-branching/custom-pipelines/
16. カスタムパイプライン https://docs.amplify.aws/react/deploy-and-host/fullstack-branching/custom-pipelines/
17. • sandbox環境でより迅速な開発が可能になった • Amplify Gen2でCDKベースになりカスタマイズしすくなった • カスタムパイプラインを利用するとDockerイメージのビルドにも対応でき る • カスタムパイプラインにより、チームに合わせたデプロイのワークフローを 組むこともできる • みなさんもAmplify Gen2を使いましょう！ まとめ