AWS Amplify Gen 2 GA記念 ~Gen1との違いを確認

AWS Amplify Gen 2 Festival in Japan での登壇資料
https://aws-startup-lofts.com/apj/loft/tokyo/event/6d2fddef-12a9-46ec-9bc6-d93db087a5b3

Transcript

1. AWS Amplify Gen 2 GA記念 ~Gen1との違いを確認 AWS Amplify Gen 2 Festival in Japan 2024/06/19 tacck (Kihara, Takuya) 1
2. 2 木原 卓也 Kihara, Takuya / @tacck 生活協同組合コープさっぽろ デジタル推進本部システム部 Amplify Japan User Group 運営メンバー ゆるWeb勉強会@札幌 主催 AWS Community Builder Since Q2 2021 / Category: Front-end Web and Mobile 好きなフィギュアスケートの技 スプレッド・イーグル
3. 本日話すこと • AWS Amplify Gen1 と Gen2 の変更ポイント ◦ リソース追加方法の違い ◦ 立ち位置の変化 ◦ 立ち位置の変化からみる個人的見解 3
4. AWS Amplify Gen1 と Gen2 の リソース追加方法の違い 4
5. Menu をベースに機能一覧比較 Gen 2 for Gen 1 customers https://docs.amplify.aws/react/start/migrate-to-gen2/ ここに機能一覧比較が詳しく載っている。 大まかにメニューにある機能レベルで比較してみる。 5
6. Gen1 Gen2 Item setup Item setup Authentication amplify add auth Authentication amplify/auth/resource.ts / CDK API (GraphQL) More features / DataStore amplify add api Data amplify/data/resource.ts / CDK Storage amplify add storage Storage amplify/storage/resource.ts / CDK Functions amplify add function Functions amplify/functions/[function_name]/r esource.ts / CDK API (REST) amplify add api Add any AWS Service API (REST) amplify/functions/[function_name]/r esource.ts / CDK More features AI/ML Predictions amplify add predictions AI/ML Predictions CDK Analytics amplify add analytics Analytics CDK Geo amplify add geo Geo CDK In-App Messaging amplify add notifications In-App Messaging CDK Interactions amplify add interactions # LexV1 Interactions By hand # LevV2 PubSub By hand PubSub By hand - - - Deletion protection and Backup resources CDK Tools / CLI Custom AWS resources amplify add custom / CDK Custom resources CDK (Each features) amplify override [feature] / CDK Overriding resources CDK 6
7. 差分を確認 (ex. Authentication) Authentication で比較するが、基本どの機能も同じ。 7
8. 8 Gen1 Gen2
9. 9 Gen1 Gen2 CLIによるリソース管理 CDKによるリソース管理
10. AWS Amplify Gen1 と Gen2 の 立ち位置の変化 10
11. 機能的な面 できることそのものに大きな差は無い。 「やり方」が変わった。 • CDKに+TypeScript によるリソース管理 ◦ TypeScript ベースのリソース定義・拡張 ◦ CDKのホットデプロイによる高速な Snadbox 環境 ◦ Functions (AWS Lambda) も TypeScript で書ける Webフロントエンド開発なら、「すべて」 TypeScript で完結可能。 11
12. AWS Amplify の立ち位置の変遷 Gen1 から Gen2 になったときに、どのように立ち位置が変わって行ったか。 12
13. AWS Amplify の立ち位置の変遷 • mBaaS (Mobile Backend as a Service) ◦ モバイル向けのバックエンド機能提供サービス ▪ 認証、DB、ストレージ、ホスティング、など。 • 最近は Web フロントエンドを中心とした機能追加が目立っていた ◦ Amplify Studio ◦ Next.js 対応 ◦ SSR アダプター • バックエンドの開発の必要性も高まり、 フロントエンドとバックエンドを一体で開発する必要がでてきた。 13
14. AWS Amplify の歴史の一部 14 2015年10月 AWS Mobile HUB 発表 2018年11月 AWS Amplify 発表 2020年12月 AWS Fargate 対応 2021年05月 Next.js の SSR に対応 2021年07月 Next.js 10 & 11 に対応 2021年12月 Amplify Studio 発表 2022年11月 Next.js 12 & 13 に対応 2023年11月 SSR アダプター対応 https://docs.aws.amazon.com/amplify/latest/userguide/document-history.html
15. AWS Amplify Gen1 と Gen2 の 立ち位置の変化からみる 個人的見解 15
16. 技術領域をざっくり Web Application Backend Auth Data Storage API Hosting Smartphone Application Developer Tools Technique Frontend Backend Infrastructure CLI npm vite etc… IaC AWS CDK etc… IaC AWS CloudFormation etc… 16
17. AWS Amplify Gen1 のターゲット (個人の感想) Web Application Backend Auth Data Storage API Hosting Smartphone Application Developer Tools Technique Frontend Backend Infrastructure CLI npm vite etc… IaC AWS CDK etc… IaC AWS CloudFormation etc… 17
18. AWS Amplify Gen1 のターゲット (個人の感想) Web Application Backend Auth Data Storage API Hosting Smartphone Application Developer Tools Technique Frontend Backend Infrastructure CLI npm vite etc… IaC AWS CDK etc… IaC AWS CloudFormation etc… フロントエンドエンジニアが 必要に迫られてバックエンドもやる。 システムの中心はフロントエンド。 18
19. AWS Amplify Gen1 のターゲット (個人の感想) Web Application Backend Auth Data Storage API Hosting Smartphone Application Developer Tools Technique Backend Infrastructure CLI npm vite etc… IaC AWS CDK etc… IaC AWS CloudFormation etc… フロントエンドエンジニアが 必要に迫られてバックエンドもやる。 システムの中心はフロントエンド。 ツールとしてCLIを使い慣れているので、 Amplify CLI も受け入れられる。 Frontend 19
20. AWS Amplify Gen1 のターゲット (個人の感想) Web Application Backend Auth Data Storage API Hosting Smartphone Application Developer Tools Technique Backend Infrastructure CLI npm vite etc… IaC AWS CDK etc… IaC AWS CloudFormation etc… バックエンドエンジニアにとっては、 バックエンドでできることが少ない。 システムの中心はフロントエンド。 Frontend 20
21. AWS Amplify Gen1 のターゲット (個人の感想) Web Application Backend Auth Data Storage API Hosting Smartphone Application Developer Tools Technique Backend Infrastructure CLI npm vite etc… IaC AWS CDK etc… IaC AWS CloudFormation etc… バックエンドエンジニアにとっては、 バックエンドでできることが少ない。 Frontend バックエンドリソースを CDKで管 理したい。 細かく調整したい。 21
22. 技術領域をざっくり Web Application Backend Auth Data Storage API SSR Hosting Smartphone Application Developer Tools Technique Frontend Backend Infrastructure CLI npm vite etc… IaC AWS CDK etc… IaC AWS CloudFormation etc… 22
23. AWS Amplify Gen2 のターゲット (個人の感想) Web Application Backend Auth Data Storage API SSR Hosting Smartphone Application Developer Tools Technique Frontend Backend Infrastructure CLI npm vite etc… IaC AWS CDK etc… IaC AWS CloudFormation etc… 23
24. AWS Amplify Gen2 のターゲット (個人の感想) Web Application Backend Auth Data Storage API SSR Hosting Smartphone Application Developer Tools Technique Frontend Backend Infrastructure CLI npm vite etc… IaC AWS CDK etc… IaC AWS CloudFormation etc… BFF (Backend for Frontend) 24
25. AWS Amplify Gen2 のターゲット (個人の感想) Web Application Backend Auth Data Storage API SSR Hosting Smartphone Application Developer Tools Technique Frontend Backend Infrastructure CLI npm vite etc… IaC AWS CDK etc… IaC AWS CloudFormation etc… BFF (Backend for Frontend) フロントエンドとバックエンドを 一体として開発する BFFの領 域。 フロントエンド技術で対応。 25
26. AWS Amplify Gen2 のターゲット (個人の感想) Web Application Backend Auth Data Storage API SSR Hosting Smartphone Application Developer Tools Technique Frontend Backend Infrastructure CLI npm vite etc… IaC AWS CDK etc… IaC AWS CloudFormation etc… BFF (Backend for Frontend) フロントエンドとバックエンドを 一体として開発する BFFの領 域。 フロントエンド技術で対応。 CLIでベースプロジェクト作成・開 発、CDKでリソース管理。 いいとこ取り。 26
27. まとめ 27
28. まとめ • AWS Amplify Gen2 とは 『Webフロントエンドとバックエンドを 　「フロントエンド」中心に開発するためのツール』 ◦ BFF (Backend for Frontend) の領域に対応BFF (Backend for Frontend) • 個人的にはフロントエンド・バックエンドの区別なく開発するので、 今回の進化は大歓迎。 28
29. スマホアプリの開発にとってはどうか? • React Native にとっては、言語統一できるのでプラスに働くはず。 • 他の言語でも、Dataの型がスマホアプリで使える。(Flutterで確認) ◦ この辺りをもっと確認して、アピールしたい。 29
30. 個人的な希望 • Amplify Studio Gen2 ! ◦ Amplify Studio の簡易的な管理機能を使いたい。 ▪ Console でモデル操作など可能だが、 AWSアカウントベース。 ▪ 操作させるユーザーを独自で制御したい。 ◦ Figma to React Component が使いたい。 ▪ Figma の開発者モードで補完は可能だが有料。 30
31. 宣伝 31
32. Amplify Boost Up #06 32 https://aws-amplify-jp.connpass.com/event/321534/ 2024/07/31 (水) ハイブリッド開催!! Amplify Gen2 の楽しさをお伝えします!!
33. End 33