第162回 雲勉 比較して学ぶ AWS Amplify Gen 2

下記、勉強会での資料です。
https://youtu.be/870qwL5hbjI

Transcript

1. 第162回 雲勉 比較して学ぶ 
 AWS Amplify Gen 2 

2. 講師自己紹介 2
 ▪ 小巻 玖美
 • アジャイル事業部 第一開発セクション • 2023年1月〜 アイレットで開発エンジニア • ご質問は YouTubeのコメント欄で受け付けております。
 後日回答させていただきます！
 

3. この動画の対象
 3
 ① AWS Amplify について聞いたことがない（初級） ② AWS Amplify は少し触ったことがあり、なんとなくは出来ることを知って いる（初級〜中級） ③ AWS Amplify を普段使っており、⼤体のことは知っている(中〜上級） 本動画は②の⽅を対象にしています
4. アジェンダ
 4
 1. AWS Amplify とは 2. AWS Amplify Gen 1 と Gen 2 3. チュートリアルを通して AWS Amplify Gen 2 を知る 4. チュートリアルで作成したアプリケーションを改良する 5. まとめ
5. 1. AWS Amplify とは 
 5
6. AWS Amplify について
 6
 サーバーレスなWeb‧モバイルアプリケーションの開発‧運⽤を効率化するフレームワーク アプリケーションからAPI接続や認証処理の追加がアプリケーション側で簡単に実装可能 AWS Amplify とは？ https://aws.amazon.com/jp/builders-flash/202411/awsgeek-aws-amplify-gen2/ 主な機能 (以下を作成‧管理可能) - 認証 (Auth) - API - データベース - ホスティング - ストレージ - 関数
7. AWS Amplify Gen 1 と Gen 2
 7
 AWS Amplify には Gen 1 と Gen 2 の2つのバージョンがある Gen 2 は 2024年5⽉ にGAされた Gen 1 Gen 2
8. AWS Amplify Gen 1 と Gen 2
 8
 Gen 2 がリリースされている今でも、AWS Amplify のコンソール上からGen 1のアプリケーションを⽴ ち上げることは可能 新しくアプリケーションを 作成する場合は、 Gen 2 の利用が推奨されている
9. Gen 1 でも便利だったが、課題も多くあった 9
 AWS Amplify (今のGen 1) がリリースされたのは 2017 年 アプリケーションの初期⽴ち上げの速さに感動 基本的には amplify init, amplify add, amplify push でリソースが簡単に作成できる Gen 1 はCLIコマンドで Amplifyプロジェクトを立ち上げる
10. Gen 1 でも便利だったが、課題も多くあった 10
 2020 年には Amplify Studio がリリース、2021 年には Figma から React のコード⽣成機能などが発表 された
11. Gen 1 でも便利だったが、課題も多くあった 11
 プレビューも便利な機能の1つ ‧プレビュー機能：プルリクエスト(ブランチ)単位での動作確認⽤の環境を作成し、レビューできる マージ先のブランチのプレビューを 有効にする
12. Gen 1 でも便利だったが、課題も多くあった 12
 プレビューも便利な機能の1つ ‧プレビュー機能：プルリクエスト(ブランチ)単位での動作確認⽤の環境を作成し、レビューできる ⾃動でビルドされ プレビューのURLが⽣成される
13. Gen 1 でも便利だったが、課題も多くあった 13
 1. 開発速度 2. Amplify CLI のエラーがわかりづらい 3. 要件が加わると、変更が⾟い 課題
14. Gen 1 の課題 14
 バックエンドの修正を⾏い、動作確認を⾏うには都度デプロイする必要あり また Gen 1 では、⼀部の変更でもフルビルドされてしまう 1. 開発速度 Schema定義 ビルド リソース数によっては10分弱 動作確認
15. Gen 1 の課題 15
 Gen 1 のデプロイは Amplify CLI で⾏われる デプロイに失敗した場合のエラーが分かりづらく、何が問題でエラーが発⽣しているのか 調査に時間がかかることがある → 後の 「Gen 2 になって嬉しいこと」の部分で詳しく 2. Amplify CLI のエラーがわかりづらい
16. Gen 1 の課題 16
 Gen 1では、カスタマイズが⾏いづらかった 3. 要件が加わると、変更が⾟い • AWS Amplify で作成したリソースに設定を追加したい場合、CLIから作成することが できず、⾃分でオーバーライドする記述を JSON や TypeScript などを利⽤して 記述する必要がある
17. Gen 1 の課題 17
 どのファイルが設定値なのかわかりづらい 3. 要件が加わると、変更が⾟い • バックエンドリソースを作成する JSON ファイルが複 数作成されており、ファイル毎に何を作成しているの かわかりづらかった ＝ ファイルの役割を理解する必要があった
18. Gen 1 の課題 18
 そんな中で Gen 2 が登場
19. Gen 2 になって、何が嬉しい？ 19
 バックエンドのTypeScript記述 Gen 2からは Amazon DynamoDB や AWS AppSync などの作成を、TypeScriptで記述 できるように Gen 1 Gen 2 schema.graphql resource.ts
20. Gen 2 になって、何が嬉しい？ 20
 バックエンドのTypeScript記述 Gen 2からは Amazon DynamoDB や AWS AppSync などの作成を、TypeScriptで記述 できるように Gen 1 Gen 2 schema.graphql resource.ts 補完が効かず、記法が間違っていたとしても デプロイしてみないと間違いに気づけない
21. Gen 2 になって、何が嬉しい？ 21
 バックエンドのTypeScript記述 間違えている例：
22. Gen 2 になって、何が嬉しい？ 22
 バックエンドのTypeScript記述 間違えている例： 括弧が不要
23. Gen 2 になって、何が嬉しい？ 23
 バックエンドのTypeScript記述 間違えている例： どこでNameが必要なのか分かりづらい
24. Gen 2 になって、何が嬉しい？ 24
 バックエンドのTypeScript記述 Gen 2 では型補完が効いているため、⽂法ミスにすぐに気づくことができる a.string() が正解
25. Gen 2 になって、何が嬉しい？ 25
 Gen 1 Gen 2 バックエンドのTypeScript記述： ディレクトリも⾒やすい
26. Gen 2 になって、何が嬉しい？ 26
 Sandbox機能 • Gen 1 でも、Sandboxという⽤語は使われていた • ただこの機能は Amplify CLI でバックエンドの環境を⾃分で追加することで、 別のバックエンド環境を作れる機能だった 開発するたびに バックエンド環境の切り替えが必要 https://docs.amplify.aws/gen1/react/tools/cli/teams/sandbox/
27. Gen 2 になって、何が嬉しい？ 27
 Sandbox機能 AWSコンソールから「サンドボックスを管理」に遷移しても、表⽰されない
28. Gen 2 になって、何が嬉しい？ 28
 Sandbox機能 Gen 2 では、コマンド1つで開発者毎にサンドボックスが作成される → ローカル開発は ホットリロード で快適にバックエンド開発が可能 https://docs.amplify.aws/react/how-amplify-works/concepts/
29. 3. チュートリアルを通して AWS Amplify Gen 2 を知る 
 29
30. チュートリアルを通して AWS Amplify Gen 2 を知る
 30
 実際にチュートリアルを⾏うことで、Amplify Gen 2 の理解を深める Gen 2 のチュートリアルを通して学んでみる https://docs.amplify.aws/react/start/quickstart/
31. チュートリアルを通して AWS Amplify Gen 2 を知る
 31
 テンプレートリポジトリから、AWS Amplify ⽤のリポジトリを作成する 1. AWS Amplify と接続するリポジトリを⽤意する https://github.com/aws-samples/amplify-vite-react-template
32. チュートリアルを通して AWS Amplify Gen 2 を知る
 32
 AWS Amplifyコンソールから「新しいアプリを作成」を選択し、GitHubを選択 2. AWSコンソール上からデプロイ
33. チュートリアルを通して AWS Amplify Gen 2 を知る
 33
 作成したリポジトリを選択する 2. AWSコンソール上からデプロイ
34. チュートリアルを通して AWS Amplify Gen 2 を知る
 34
 2. AWSコンソール上からデプロイ ビルドの設定
35. チュートリアルを通して AWS Amplify Gen 2 を知る
 35
 2. AWSコンソール上からデプロイ
36. チュートリアルを通して AWS Amplify Gen 2 を知る
 36
 2. AWSコンソール上からデプロイ
37. チュートリアルを通して AWS Amplify Gen 2 を知る
 37
 3. ローカル開発準備 デプロイが完了したら、対象のブランチを選択
38. チュートリアルを通して AWS Amplify Gen 2 を知る
 38
 3. ローカル開発準備 デプロイされたバックエンドリソースから amplify_outputs.json をダウンロード
39. チュートリアルを通して AWS Amplify Gen 2 を知る
 39
 3. ローカル開発準備 作成したリポジトリをクローン
40. チュートリアルを通して AWS Amplify Gen 2 を知る
 40
 3. ローカル開発準備 ダウンロードした amplify_outputs.json は、プロジェクトのルートに配置
41. チュートリアルを通して AWS Amplify Gen 2 を知る
 41
 4. ローカル起動 ローカルでアプリケーションを確認する
42. チュートリアルを通して AWS Amplify Gen 2 を知る
 42
 5. 削除機能追加 初期の状態では作成と取得のみ 実装されているため、以下追加 • 削除⽤の関数 • イベントハンドラー
43. チュートリアルを通して AWS Amplify Gen 2 を知る
 43
 5. 削除機能追加 実装⾃体はこれで完了
44. チュートリアルを通して AWS Amplify Gen 2 を知る
 44
 5. 削除機能追加 client.models.Todo で Todo テーブルへの操作が⾏えるようになっている
45. チュートリアルを通して AWS Amplify Gen 2 を知る
 45
 5. 削除機能追加 Todo モデルへの参照は、 ../amplify/data/resource の import 部分
46. チュートリアルを通して AWS Amplify Gen 2 を知る
 46
 5. 削除機能追加 Todo モデルへの参照は、 ../amplify/data/resource の import 部分
47. チュートリアルを通して AWS Amplify Gen 2 を知る
 47
 5. 削除機能追加 Todo モデルへの参照は、 ../amplify/data/resource の import 部分
48. チュートリアルを通して AWS Amplify Gen 2 を知る
 48
 6. サンドボックスを使う ローカル実⾏しながら、 別のターミナルで npx ampx sandbox を実⾏する
49. チュートリアルを通して AWS Amplify Gen 2 を知る
 49
 6. サンドボックスを使う 作成されたサンドボックスのリソースは AWS CloudFormation から確認可能
50. チュートリアルを通して AWS Amplify Gen 2 を知る
 50
 7. 作成した機能をデプロイする サンドボックスで動作確認が出来たら、mainブランチに変更を反映する mainブランチへ変更をプッシュすると、⾃動でデプロイが⾏われる
51. 4. チュートリアルで作成したアプリケーションを改良する 
 51
52. チュートリアルで作成したアプリケーションを改良する 52
 ブランチの追加 接続するブランチを追加することで、作業中のブランチをホスティングできる
53. チュートリアルで作成したアプリケーションを改良する 53
 WAFの有効化 Amplify コンソール上から AWS WAF (Web Application Firewall) が設定可能 2025年3⽉にGAされた
54. チュートリアルで作成したアプリケーションを改良する 54
 必要な情報だけクエリする 呼び出し側で取得したいフィールドを selection set に指定することで、必要な情報だけクエリ可能
55. 5. まとめ 
 55
56. まとめ
 56
 • AWS Amplify は様々な機能があり、初期⽴ち上げが爆速で可能 • AWS Amplify Gen 2 はよりコードファーストの開発体験で、 開発しやすくなった • ただ、カスタマイズを⾏う時に⼯夫が必要になることは Gen 1 で もGen 2 でも同じように発⽣する Gen 1 から Gen 2 への移⾏は まだ推奨されていないので注意