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

Amplify Gen2の新機能と実践的な使用例 AWS Amplify Gen 2 Festival in Japan
2024-06-19 株式会社永和システムマネジメント　村上雅彦 (a.k.a @fossamagna)

村上雅彦株式会社永和システムマネジメント Amplify Japan User Group 運営メンバー AWS Community
Builder (Front-End Web & Mobile since 2022) GitHub: https://github.com/fossamagna X(旧Twitter): https://x.com/fossamagna 自己紹介

• AWS CDKをベースとする次世代のAmplifyのバックエンド構築ツール • TypeScriptによるバックエンド定義を提供 • 開発者毎の独立したsandbox環境を提供 • GitのブランチとAWS環境を1:1でマッピング
Amplify Gen2の機能

• Amplify Gen2のSandbox環境 • Amplify Gen2のCDKカスタムリソース Amplify Gen2の使用例を紹介します

• 開発者毎の独立した sandbox環境を提供 • npx ampx sandboxコマンド一発で環境構築完了 • hot
swapデプロイ対応で迅速にデプロイ可能 Amplify Gen2 sandbox environments https://docs.amplify.aws/react/how-amplify-works/concepts/#faster-local-development

• sandbox環境はとっても便利 • でも、実際に利用して困った点もあった • 困った時にどう対応したかを紹介 Amplify Gen2
sandbox environments

sandbox環境が共有されてしまう問題 • VSCodeのdevcontainerを利用した時に発生 • 全員のsandbox環境の名前が同じになってしまう Amplify Gen2 sandbox environmentsで困ったこと、その1 https://docs.amplify.aws/react/how-amplify-works/concepts/#faster-local-development

問題の原因： • 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

デプロイされた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リソースは確認できない。

デプロイされたAWSリソース探すの大変問題 Amplify Gen2 sandbox environmentsで困ったこと、その2 • 例えば、AppSyncのAPIも名前が同じで探しづらい。ランダム値を含むエンドポイント URLを手掛かりにして探すしかない。

対応：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

Amplify Gen2の CDKカスタムリソース

• 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アプリ

• 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以外を利用する

• Amplify Gen2は任意のCI/CDサービスからデプロイすることが可能 • バックエンドはdockerのイメージがビルドできる環境で行い、Amplify ConsoleでフロントエンドをAmplify Hostingにデプロイするという連携が可能 •
今回はバックエンドのデプロイにAWS Codepipelineを利用したカスタムパイプライン https://docs.amplify.aws/react/deploy-and-host/fullstack-branching/custom-pipelines/

カスタムパイプライン https://docs.amplify.aws/react/deploy-and-host/fullstack-branching/custom-pipelines/

• sandbox環境でより迅速な開発が可能になった • Amplify Gen2でCDKベースになりカスタマイズしすくなった • カスタムパイプラインを利用するとDockerイメージのビルドにも対応できる • カスタムパイプラインにより、チームに合わせたデプロイのワークフローを
組むこともできる • みなさんもAmplify Gen2を使いましょう！まとめ

Amplify Gen2の新機能と実践的な使用例 AWS Amplify Gen 2 Fes...

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

MURAKAMI Masahiko

More Decks by MURAKAMI Masahiko

Other Decks in Technology

Featured

Transcript