読んで学ぶ Amplify Gen2 / Amplify と CDK の関係を紐解く #jawsug_tokyo

JAWS-UG東京 Presents 400 での登壇資料

https://jawsug.connpass.com/event/348840/

Transcript

1. 読んで学ぶ Amplify Gen2 Amplify と CDK の関係を紐解く JAWS-UG東京 Presents 400 2025/04/23 Kihara, Takuya (@tacck) JAWS-UG東京 Presents 400 / #jawsug_tokyo 1
2. 2 Kihara, Takuya 木原 卓也 / @tacck / Sapporo, Japan CO-OP Sapporo 生活協同組合コープさっぽろ Software Engineer / Flutter, TypeScript, Vue.js, React Amplify Japan User Group 運営メンバー ゆるWeb勉強会@札幌 主催 AWS Community Builder Since Q2 2021 / Category: Front-end Web and Mobile Community 好きなフィギュアスケートの技 スプレッド・イーグル JAWS-UG東京 Presents 400 / #jawsug_tokyo
3. 今日のお話 ▪ 最初にお伝えすること ▪ 確認していくこと ▪ 前提 ▪ Amplify Gen2 概要 ▪ AI Kit Generation のデプロイの流れを読んでみよう ▪ おまけ JAWS-UG東京 Presents 400 / #jawsug_tokyo 3
4. 最初にお伝えすること ▪ 私がやったこと – Amplify と CDK がどのように連携しているか、 コードレベルで知る。 ▪ 聴いた方にこうなって欲しいこと – 気になった OSS のコードを読むきっかけになって欲しい。 ▪ だいぶ抜粋した話になるので、ぜひ Amplify / CDK のコードも 読んでみてください。 JAWS-UG東京 Presents 400 / #jawsug_tokyo 4
5. 確認していくこと ▪ CLI コマンド (ampx) としての実装 – オプションに応じた処理の呼び出し – デプロイ手段として CDK の呼び出し ▪ Amplify backend.ts / resource.ts と CDK のリソースの関係 – CDK 自体はどんな仕組み (概要) – Amplify から CDK へのリソース変換 (の一部) JAWS-UG東京 Presents 400 / #jawsug_tokyo 5
6. 前提 ▪ AWS Amplify Gen2 でプロジェクトを作ったことがある – AI Kit のプロジェクトを作ったことがあるとより良い。 ▪ AWS CDK でプロジェクトを作ったことがある ▪ TypeScript の概要がわかる JAWS-UG東京 Presents 400 / #jawsug_tokyo 6
7. Amplify Gen2 概要 JAWS-UG東京 Presents 400 / #jawsug_tokyo 7
8. Amplify Gen2 概要 ▪ AWS CDK との連携が改善。 ▪ これにより、ホットデプロイを活用した Sandbox が誕生。 ▪ Webフロントエンドの場合、 TypeScript のみで開発可能。 – リソースを TypeScript で定義。 – CDK リソースを意識せずにそのままデプロイ。 – CDK リソースの追加も可能。 JAWS-UG東京 Presents 400 / #jawsug_tokyo 8
9. AI Kit Generation の デプロイの流れを 読んでみよう JAWS-UG東京 Presents 400 / #jawsug_tokyo 9
10. AI Kit の generation をデプロイ ▪ 今回は AI Kit の generation をデプロイするためにやること – リソースの実装 – Amplify のデプロイコマンド実行 (git push) – 見えない力による CDK リソース生成 – CDKでクラウドへデプロイ JAWS-UG東京 Presents 400 / #jawsug_tokyo 10
11. AI Kit の generation をデプロイ ▪ 今回は AI Kit の generation をデプロイするためにやること – リソースの実装 – Amplify のデプロイコマンド実行 (git push) – 見えない力による CDK リソース生成 – CDKでクラウドへデプロイ JAWS-UG東京 Presents 400 / #jawsug_tokyo 11 CDKリソースへ変換 CLIコマンドとして動作 CDKの実行 Amplifyリソースの解釈 AppSync Bedrock 呼び出し
12. CDK のデプロイの概要 ▪ いったん、CDK CLI でのデプロイの概要から。 JAWS-UG東京 Presents 400 / #jawsug_tokyo 12
13. CDK のデプロイの概要 cdk deploy を実行したら ▪ 子プロセスで cdk.json の app プロパティが実行される JAWS-UG東京 Presents 400 / #jawsug_tokyo 13 cdk.json
14. CDK のデプロイの概要 cdk deploy を実行したら ▪ 子プロセスで cdk.json の app プロパティが実行される – bin/foo-cdk.ts で cdk.App が生成され – lib/foo-cdk-stack.ts で cdk.Stack が生成される。 ▪ Stack に各種リソースを格納する。 JAWS-UG東京 Presents 400 / #jawsug_tokyo 14 bin/foo-cdk.ts lib/foo-cdk-stack.ts
15. CDK のデプロイの概要 cdk deploy を実行したら ▪ 子プロセスで cdk.json の app プロパティが実行される – bin/foo-cdk.ts で cdk.App が生成され – lib/foo-cdk-stack.ts で cdk.Stack が生成される。 ▪ Stack に各種リソースを格納する。 – 実行結果として cdk.out が出力され、 CloudAssembly クラスの オブジェクトが得られる。 ▪ cdk.out と CloudAssembly を使って deploy が実行される JAWS-UG東京 Presents 400 / #jawsug_tokyo 15
16. Amplify Gen2 でデプロイ ▪ 関連コード間の流れを見てみる JAWS-UG東京 Presents 400 / #jawsug_tokyo 16
17. JAWS-UG東京 Presents 400 / #jawsug_tokyo 17
18. まずは読み始めのポイント ▪ CLI コマンド (ampx) で動くので、 ここから読み始めるとわかりやすい。 JAWS-UG東京 Presents 400 / #jawsug_tokyo 18
19. JAWS-UG東京 Presents 400 / #jawsug_tokyo 19
20. CLI コマンド (ampx) としての実装 読み始め ▪ まずはコマンドのエントリーポイント ▪ yargs を使ったオプション解釈 ▪ 該当するオプションの handler を実行 (PipelineDeployCommand) JAWS-UG東京 Presents 400 / #jawsug_tokyo 20
21. CLI コマンド (ampx) としての実装 デプロイ手段として CDK の呼び出し ▪ デプロイ手段の生成 → createPipelineDeployCommand ▪ BackendDeployerFactory / CDKDeployer によって、 CDKによるデプロイが実装される。 ▪ 呼び出しは抽象化されているので、 CDK以外のデプロイ手段も 使えるようになる (ロマン)。 JAWS-UG東京 Presents 400 / #jawsug_tokyo 21
22. この時点で CDK Toolkit の準備 ▪ BackendDeployerFactory から 呼び出している。 ▪ Toolkit と CloudAssemblySourceBuilder を 呼び出し。 JAWS-UG東京 Presents 400 / #jawsug_tokyo 22
23. Amplify リソースの読み込み ▪ コマンドとして Amplify リソースを読み込む。 JAWS-UG東京 Presents 400 / #jawsug_tokyo 23
24. JAWS-UG東京 Presents 400 / #jawsug_tokyo 24
25. Amplify リソースの読み込み ▪ CDKDeployer から tsx の tsImport を呼び出して、 JAWS-UG東京 Presents 400 / #jawsug_tokyo 25
26. Amplify リソースの読み込み ▪ CDKDeployer から tsx の tsImport を呼び出して、 プロジェクトのリソースを 読み込み。 ▪ 先に見た、 cdk.json の app プロパティ実行に相当。 – data/resource.ts 内で Data カテゴリの型を解決。 JAWS-UG東京 Presents 400 / #jawsug_tokyo 26
27. Amplify リソースの読み込み ▪ CDKDeployer から tsx の tsImport を呼び出して、 プロジェクトのリソースを 読み込み。 ▪ 先に見た、 cdk.json の app プロパティ実行に相当。 – data/resource.ts 内で Data カテゴリの型を解決。 ▪ CloudAssembly の生成準備。 JAWS-UG東京 Presents 400 / #jawsug_tokyo 27
28. Amplify リソースを CDK リソースへ ▪ 読み込んだ Amplify リソースを CDK リソースへ変換していく。 ▪ 今回は AI Kit Generation について見ていく。 – Data カテゴリなので AppSync を使って Bedrock と連携 ▪ AppSync のスキーマ作成 ▪ スキーマを Bedrock 呼び出しに必要な AppSync の CDK リソースへ変換 JAWS-UG東京 Presents 400 / #jawsug_tokyo 28
29. JAWS-UG東京 Presents 400 / #jawsug_tokyo 29
30. Amplify リソースを CDK リソースへ 準備編 ▪ backend.ts の defineBackend から JAWS-UG東京 Presents 400 / #jawsug_tokyo 30
31. Amplify リソースを CDK リソースへ 準備編 ▪ backend.ts の defineBackend から 各種 Factory などを通して CDK の Stack 作成処理へ。 JAWS-UG東京 Presents 400 / #jawsug_tokyo 31
32. Amplify リソースを CDK リソースへ 準備編 ▪ backend.ts の defineBackend から 各種 Factory などを通して CDK の Stack 作成処理へ。 ▪ CDK の Stack にたどり着く。 JAWS-UG東京 Presents 400 / #jawsug_tokyo 32
33. JAWS-UG東京 Presents 400 / #jawsug_tokyo 33
34. Amplify リソースを CDK リソースへ カテゴリ別処理 ▪ 各カテゴリのリソースの処理開始。 JAWS-UG東京 Presents 400 / #jawsug_tokyo 34
35. Amplify リソースを CDK リソースへ カテゴリ別処理 ▪ 各カテゴリのリソースの処理開始。 ▪ Dataカテゴリ: AppSync の GraphQL Schema へ変換。 JAWS-UG東京 Presents 400 / #jawsug_tokyo 35
36. Amplify リソースを CDK リソースへ カテゴリ別処理 ▪ 各カテゴリのリソースの処理開始。 ▪ Dataカテゴリ: AppSync の GraphQL Schema へ変換。 JAWS-UG東京 Presents 400 / #jawsug_tokyo 36 地道な文字列変換によって GraphQL Schema を作っている。 packages/data-schema/src/SchemaProcessor.ts
37. JAWS-UG東京 Presents 400 / #jawsug_tokyo 37
38. Amplify リソースを CDK リソースへ AI Kit Generation ▪ Bedrock を呼び出すための CDK リソース変換。 ▪ ここはコードを少し深掘り。 JAWS-UG東京 Presents 400 / #jawsug_tokyo 38
39. Amplify リソースを CDK リソースへ AI Kit Generation のリソース ▪ Webコンソールで確認したものの一部 ▪ AppSync データソース – GenerationBedrockDataSourceGenerateSummaryDataSource ▪ 関数 – QueryGenerateSummaryDataResolverFn JAWS-UG東京 Presents 400 / #jawsug_tokyo 39
40. ▪ AppSync データソース – GenerationBedrockDataSourceGenerateSummaryDataSource JAWS-UG東京 Presents 400 / #jawsug_tokyo 40
41. Webコンソール 戻り値の型がcdk.aws_appsync.HttpDataSource ちゃんとここでリソース作っている
42. JAWS-UG東京 Presents 400 / #jawsug_tokyo 42 Webコンソール GenerationBedrockDataSource GenerateRecipeDataSource
43. Webコンソール
44. ▪ 関数 – QueryGenerateSummaryDataResolverFn JAWS-UG東京 Presents 400 / #jawsug_tokyo 44
45. JAWS-UG東京 Presents 400 / #jawsug_tokyo 45 packages/amplify-graphql-generation- transformer/src/resolvers/invoke- bedrock.ts
46. JAWS-UG東京 Presents 400 / #jawsug_tokyo 46 packages/amplify-graphql-generation- transformer/src/resolvers/invoke-bedrock- resolver-fn.template.js
47. JAWS-UG東京 Presents 400 / #jawsug_tokyo 47 packages/amplify-graphql-generation- transformer/src/resolvers/invoke-bedrock- resolver-fn.template.js 現在 AI Kit Generation は Cloude のみ対応。 ここのフォーマットを切り替えできれば、 他のモデルも使えるかも?
48. CDK でデプロイ ▪ CDK Toolkit で deploy JAWS-UG東京 Presents 400 / #jawsug_tokyo 48
49. JAWS-UG東京 Presents 400 / #jawsug_tokyo 49
50. CDK でデプロイ ▪ 今まで読み込んだリソースを CloudAssembly へ。 JAWS-UG東京 Presents 400 / #jawsug_tokyo 50
51. CDK でデプロイ ▪ 今まで読み込んだリソースを CloudAssembly へ。 ▪ synth して deploy 。 JAWS-UG東京 Presents 400 / #jawsug_tokyo 51
52. デプロイ完了 ▪ お疲れ様でした JAWS-UG東京 Presents 400 / #jawsug_tokyo 52
53. CDK の呼び出しでの注意 ▪ CDK Toolkit を使うように最新のコードでは実装されているが、 今時点ではまだ利用されていない。 ▪ ただ、今回見た流れは大筋変わらないはずなので、 今後のリリースに注目しておいてください。 JAWS-UG東京 Presents 400 / #jawsug_tokyo 53
54. まとめ ▪ コード読むの楽しい！ ▪ Amplify や CDK のコードが成長する中で、どのように構造が変化しているか、 どういう抽象化を取り入れているか、を見てみると、 それぞれのプロダクトの特徴が見えてきそう。 – Amplify は デプロイ方法、 機能カテゴリ、などの抽象化 etc… – CDK は Toolkit 化による CLI と 機能の分離 etc… JAWS-UG東京 Presents 400 / #jawsug_tokyo 54
55. おまけ JAWS-UG東京 Presents 400 / #jawsug_tokyo 55
56. CDKにコミット (ドキュメント) ▪ 今回のコードリーディングの流れで、 ドキュメント(README)の修正をコミットできました。 ▪ 読んでいたら良いことあるかも? JAWS-UG東京 Presents 400 / #jawsug_tokyo 56 https://github.com/aws/aws-cdk-cli/issues/296
57. 宣伝 JAWS-UG東京 Presents 400 / #jawsug_tokyo 57
58. Amplify Boost Up #08 Amplify AI Kit オンライン ハンズオン JAWS-UG東京 Presents 400 / #jawsug_tokyo 58 https://aws-amplify-jp.connpass.com/event/350962/ オンラインでやります！ “Deep Search” チャットアプリを作りましょう！
59. END JAWS-UG東京 Presents 400 / #jawsug_tokyo 59