入門 AWS Amplify Gen2 / Introduction to AWS Amplify Gen2

Transcript

1. 入門 AWS Amplify Gen2
 Genki Ogasawara
 2024.4.4 #cm_sapporo_study

2. 自己紹介
 Genki （小笠原 元気）
 所属：北海道ガス株式会社
 ロール：JTC 内製開発チームのテックリード（自称）
 趣味：旅行・筋トレ
 最近興味があること：DevOps, SRE
 
 @geivk
3. アジェンダ
 2 4 3 AWS Amplify
 とは？
 AWS Amplify Gen2
 の新機能
 Amplify Gen2 入門
 (DEMOあり)
 1 今後やりたいこと
 まとめ

4. アジェンダ
 2 4 3 AWS Amplify
 とは？
 AWS Amplify Gen2
 の新機能
 Amplify Gen2 入門
 (DEMOあり)
 1 今後やりたいこと
 まとめ

5. AWS Amplify とは？
 フルスタックのウェブアプリケーションとモバイ ルアプリケーションを数時間で構築します。開 始もスケールも簡単です。
 Amplify には、AWS でフルスタックのウェブアプリや
 モバイルアプリを構築するために必要なものがすべて
 揃っています。フロントエンドの構築とホスティング、
 認証やストレージなどの機能の追加、リアルタイムの
 データソースへの接続、デプロイと数百万人のユーザーへの
 拡張が可能です。
 
 Amplify.js
 Hosting
 CLI
 Build UI
 AWS Amplify
 引用元：https://aws.amazon.com/jp/amplify/

6. AWS Amplify とは？
 フルスタックのウェブアプリケーションとモバイ ルアプリケーションを数時間で構築します。開 始もスケールも簡単です。
 ◆ 個人的に好きなポイント
 ・CI/CD がついていて簡単に設定できる
 ・バックエンドの追加が簡単
 amplify.yml
7. AWS Amplify とは？
 フルスタックのウェブアプリケーションとモバイ ルアプリケーションを数時間で構築します。開 始もスケールも簡単です。
 ◆ 個人的に好きなポイント
 ・CI/CD がついていて簡単に設定できる
 ・バックエンドの追加が簡単
 CLI
 amplify add auth
 Amazon Cognito
 AppSync
 API Gateway
 amplify add api

8. アジェンダ
 2 4 3 AWS Amplify
 とは？
 AWS Amplify Gen2
 の新機能
 Amplify Gen2 入門
 (DEMOあり)
 1 今後やりたいこと
 まとめ

9. Amplify Gen2 における新機能のアプローチ
 開発者体験の改善
 バックエンドの生成方法の透明性 を高め、ローカル開発時に実装の カスタマイズや問題のデバッグを 行いたい。より素早くイテレーショ ンを回し、ローカル開発中にチー ムメンバーの環境に干渉すること なく変更を検証したい。 
 オンボーディング
 Amplify と AWS にオンボーディン グする新規開発者が、すでに使い 慣れたツール (TypeScript と Git) を使って作業を進められるよう、コ ンセプト数を削減したい。デプロイ されたクラウドリソースをビルトイ ンで管理したい。
 デプロイメント
 下位環境から上位環境へコード 変更をマージする際、本番ロー ルアウトを確実に行いたい。ま た、チームの運用方法を反映し たデプロイメント・ワークフローに より、チームの希望に基づいて コードを柔軟に整理したい。 
 
 引用元：https://aws.amazon.com/jp/blogs/news/introducing-amplify-gen2/
10. Amplify Gen2 における新機能のアプローチ
 開発者体験の改善
 バックエンドの生成方法の透明性 を高め、ローカル開発時に実装の カスタマイズや問題のデバッグを 行いたい。より素早くイテレーショ ンを回し、ローカル開発中にチー ムメンバーの環境に干渉すること なく変更を検証したい。 
 オンボーディング
 Amplify と AWS にオンボーディン グする新規開発者が、すでに使い 慣れたツール (TypeScript と Git) を使って作業を進められるよう、コ ンセプト数を削減したい。デプロイ されたクラウドリソースをビルトイ ンで管理したい。
 デプロイメント
 下位環境から上位環境へコード 変更をマージする際、本番ロー ルアウトを確実に行いたい。ま た、チームの運用方法を反映し たデプロイメント・ワークフローに より、チームの希望に基づいて コードを柔軟に整理したい。 
 
 引用元：https://aws.amazon.com/jp/blogs/news/introducing-amplify-gen2/
 クラウド
 サンドボックス
 CDK L3
 コンストラクト
 フルスタック Git ブランチ
 ファイルベース の規約
 CDK による
 バックエンド
 拡張
 カスタム
 パイプライン
 モノレポ / 
 マルチレポ
 サポート

11. アジェンダ
 2 4 3 AWS Amplify
 とは？
 AWS Amplify Gen2
 の新機能
 Amplify Gen2 入門
 (DEMOあり)
 今後やりたいこと
 まとめ
 1
12. クラウドサンドボックス機能
 ◆ Gen1 の場合
 実は Gen1 でもクラウドサンドボックス
 機能があったらしい
 amplify init で各ユーザーサンドボックス
 環境を作成することができる
 PRODUCTION
 SANDBOX
 (DEVUSER1)
 SANDBOX
 (DEVUSER2)
 amplify init
 amplify push
 amplify init
 amplify push

13. クラウドサンドボックス機能
 ◆ 分離されたサンドボックス
 開発中に開発者ごとに分離された専用のバッ クエンドが作成される
 ◆ 自動的な同期とデプロイ
 バックエンドのコードを修正すると watch され ているため自動デプロイされる
 また、開発を中断する時にはその環境ごと消 すことができる
 PRODUCTION
 SANDBOX
 (DEVUSER1)
 SANDBOX
 (DEVUSER2)
 npx amplify sandbox —profile DEVUSER1
 npx amplify sandbox —profile DEVUSER2

14. クラウドサンドボックス機能
 ◆ 分離されたサンドボックス
 開発中に開発者ごとに分離された専用のバッ クエンドが作成される
 ◆ 自動的な同期とデプロイ
 バックエンドのコードを修正すると watch され ているため自動デプロイされる
 開発を中断する時にはその環境ごと
 消すことができる
 SANDBOX
 (DEVUSER1)
 Lambda 関数を追加
 プロパティを追加

15. DEMO󰳕
16. フルスタックの Git ブランチ
 ◆ Gen1: 各環境にデプロイするコマンド
 amplify add env prod
 amplify env checkout prod
 amplify push
 DEV
 PRODUCTION
 CLI

17. フルスタックの Git ブランチ
 ◆ Gen1: 各環境にデプロイするコマンド
 amplify add env prod
 amplify env checkout prod
 amplify push
 ◆ Gen2: コンソールで紐付け
 一度紐づければ、git push ベースで更新
 普段やっているコマンドベースでの
 バックエンドデプロイが可能になった

18. バックエンドのデプロイ
 ◆ バックエンドのデプロイ
 従来: amplify add auth
 → amplify/auth/resource.ts に CDK L3
 コンストラクトを記述し git push
 これまでは CLI ベースの追加だったが
 バックエンドのリソースを IaC 化し
 デプロイもよりわかりやすくなった
 カスタムリソースも amplify/ 以下に CDKで追 加できるようになった
 引用元　https://aws.amazon.com/jp/blogs/news/introducing-amplify-gen2/

19. アジェンダ
 2 4 3 AWS Amplify
 とは？
 AWS Amplify Gen2
 の新機能
 Amplify Gen2 入門
 (DEMOあり)
 今後やりたいこと
 まとめ
 1
20. 自分のチームの開発環境
 ◆ 開発ツール
 AWS CDK + AWS Amplify (Gen1)
 Amazon CodeCatalyst
 ・Amplify リソースと CDK をまとめたい
 ・Amplify CLI が自分しかわからない
 ・開発者各々のサンドボックスが欲しい
 
 
 AWS Amplify(CLI)
 AWS CDK
 Hosting
 Backend
 AWS Resource
 repo
 (Backend)
 Cognito, IAM Group
 repo
 (Frontend)
 Amazon CodeCatalyst

21. monorepo
 or
 multi-repo
 自分のチームの開発環境（予想）
 ◆ 開発ツール
 AWS CDK + AWS Amplify (Gen1)
 Amazon CodeCatalyst
 ・Amplify リソースと CDK をまとめたい
 ・Amplify CLI が自分しかわからない
 ・開発者各々のサンドボックスが欲しい
 フロントエンドに関わる
 AWS リソースを Amplify Gen2から
 デプロイするようにしたい！
 AWS Amplify Gen2 (CLI)
 Hosting
 Amazon CodeCatalyst
 Backend
 (API + Lambda)
 (Backend)
 Cognito, IAM Group
 (Frontend)
 サンドボックスが作れる！ 

22. monorepo
 or
 multi-repo
 自分のチームの開発環境（予想）
 ◆ 開発ツール
 AWS CDK + AWS Amplify (Gen1)
 Amazon CodeCatalyst
 ・Amplify リソースと CDK をまとめたい
 ・Amplify CLI が自分しかわからない
 ・開発者各々のサンドボックスが欲しい
 スタックのリソース数の上限も
 課題になっているのでスタック分割する
 
 AWS Amplify Gen2 (CLI)
 Hosting
 Amazon CodeCatalyst
 Backend
 (API + Lambda)
 (Backend)
 Cognito, IAM Group
 (Frontend)
 AWS CDK
 Others

23. まとめ
 ・Amplify Gen2 の所感
 Gen1 より認知負荷が下がった気がする
 より使いやすくなり開発者体験が上がりそう
 特に、Sandbox 環境が手軽に作れるのがいい
 GA されたらプロダクトに導入したい