Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
第162回 雲勉 比較して学ぶ AWS Amplify Gen 2
Search
iret.kumoben
June 09, 2025
Technology
0
74
第162回 雲勉 比較して学ぶ AWS Amplify Gen 2
下記、勉強会での資料です。
https://youtu.be/870qwL5hbjI
iret.kumoben
June 09, 2025
Tweet
Share
More Decks by iret.kumoben
See All by iret.kumoben
第176回 雲勉 VPC 間サービス接続を考える!Private Service Connect 入門
iret
0
12
第175回 雲勉 Amazon ECS入門:コンテナ実行の基本を学ぶ
iret
0
32
第174回 雲勉 Google Agentspace × ADK Vertex AI Agent Engineにデプロイしたエージェントを呼び出す
iret
0
33
第173回 雲勉 ノーコードで生成 AI アプリを構築!Google Cloud AI Applications(旧 Vertex AI Agent Builder)入門
iret
0
50
第170回 雲勉 Lyria が切り拓く音楽制作の未来
iret
1
29
第169回 雲勉 AWS WAF 構築 RTA
iret
0
36
第168回 雲勉 JITNAの使い方とハマったポイントについて語る回
iret
0
45
第167回 雲勉 エージェント開発を加速する Agent Development Kit 入門
iret
1
55
第166回 雲勉 コードを読んで理解する AWS Amplify Gen2 Backend
iret
0
47
Other Decks in Technology
See All in Technology
Rust In Python
lycorptech_jp
PRO
3
310
新卒QAエンジニアの成長戦略
qatonchan
0
180
SSG の限界を破る、再ビルド不要なサイト
reyalka
1
520
金融サービスの成長を支える “本人確認フロー” の改善と取り巻く環境の変化 / iOSDC Japan 2025
nakamuuu
1
110
カスタムUIを作る覚悟 / The determination to create a custom UI
matsuji
2
1.6k
今日から始めるpprof / Pprof workshop for beginners
ymotongpoo
2
160
組織規模に応じたPlatform Engineeringの実践
hacomono
PRO
0
240
AIエージェントがアプリケーション開発の未来を変える
nagix
3
1k
20250924_LT2本やる.pdf
foursue
0
570
AI Agent Dojo #1: watsonx OrchestrateAI エージェント体験
oniak3ibm
PRO
0
160
低リスクで小学生男児を鍵っ子にする 俺の勉強会#4
inakaphper
0
190
AIがコード書きすぎ問題にはAIで立ち向かえ
jyoshise
13
10k
Featured
See All Featured
Large-scale JavaScript Application Architecture
addyosmani
513
110k
Designing for humans not robots
tammielis
254
25k
Balancing Empowerment & Direction
lara
4
660
Principles of Awesome APIs and How to Build Them.
keavy
127
17k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Visualization
eitanlees
148
16k
Speed Design
sergeychernyshev
32
1.1k
The Art of Programming - Codeland 2020
erikaheidi
56
13k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
35
3.2k
Docker and Python
trallard
46
3.6k
GraphQLの誤解/rethinking-graphql
sonatard
72
11k
Transcript
第162回 雲勉 比較して学ぶ AWS Amplify Gen 2
講師自己紹介 2 ▪ 小巻 玖美 • アジャイル事業部 第一開発セクション • 2023年1月〜
アイレットで開発エンジニア • ご質問は YouTubeのコメント欄で受け付けております。 後日回答させていただきます!
この動画の対象 3 ① AWS Amplify について聞いたことがない(初級) ② AWS Amplify は少し触ったことがあり、なんとなくは出来ることを知って
いる(初級〜中級) ③ AWS Amplify を普段使っており、⼤体のことは知っている(中〜上級) 本動画は②の⽅を対象にしています
アジェンダ 4 1. AWS Amplify とは 2. AWS Amplify Gen
1 と Gen 2 3. チュートリアルを通して AWS Amplify Gen 2 を知る 4. チュートリアルで作成したアプリケーションを改良する 5. まとめ
1. AWS Amplify とは 5
AWS Amplify について 6 サーバーレスなWeb‧モバイルアプリケーションの開発‧運⽤を効率化するフレームワーク アプリケーションからAPI接続や認証処理の追加がアプリケーション側で簡単に実装可能 AWS Amplify とは? https://aws.amazon.com/jp/builders-flash/202411/awsgeek-aws-amplify-gen2/
主な機能 (以下を作成‧管理可能) - 認証 (Auth) - API - データベース - ホスティング - ストレージ - 関数
AWS Amplify Gen 1 と Gen 2 7 AWS Amplify
には Gen 1 と Gen 2 の2つのバージョンがある Gen 2 は 2024年5⽉ にGAされた Gen 1 Gen 2
AWS Amplify Gen 1 と Gen 2 8 Gen 2
がリリースされている今でも、AWS Amplify のコンソール上からGen 1のアプリケーションを⽴ ち上げることは可能 新しくアプリケーションを 作成する場合は、 Gen 2 の利用が推奨されている
Gen 1 でも便利だったが、課題も多くあった 9 AWS Amplify (今のGen 1) がリリースされたのは 2017
年 アプリケーションの初期⽴ち上げの速さに感動 基本的には amplify init, amplify add, amplify push でリソースが簡単に作成できる Gen 1 はCLIコマンドで Amplifyプロジェクトを立ち上げる
Gen 1 でも便利だったが、課題も多くあった 10 2020 年には Amplify Studio がリリース、2021 年には
Figma から React のコード⽣成機能などが発表 された
Gen 1 でも便利だったが、課題も多くあった 11 プレビューも便利な機能の1つ ‧プレビュー機能:プルリクエスト(ブランチ)単位での動作確認⽤の環境を作成し、レビューできる マージ先のブランチのプレビューを 有効にする
Gen 1 でも便利だったが、課題も多くあった 12 プレビューも便利な機能の1つ ‧プレビュー機能:プルリクエスト(ブランチ)単位での動作確認⽤の環境を作成し、レビューできる ⾃動でビルドされ プレビューのURLが⽣成される
Gen 1 でも便利だったが、課題も多くあった 13 1. 開発速度 2. Amplify CLI のエラーがわかりづらい
3. 要件が加わると、変更が⾟い 課題
Gen 1 の課題 14 バックエンドの修正を⾏い、動作確認を⾏うには都度デプロイする必要あり また Gen 1 では、⼀部の変更でもフルビルドされてしまう 1.
開発速度 Schema定義 ビルド リソース数によっては10分弱 動作確認
Gen 1 の課題 15 Gen 1 のデプロイは Amplify CLI で⾏われる
デプロイに失敗した場合のエラーが分かりづらく、何が問題でエラーが発⽣しているのか 調査に時間がかかることがある → 後の 「Gen 2 になって嬉しいこと」の部分で詳しく 2. Amplify CLI のエラーがわかりづらい
Gen 1 の課題 16 Gen 1では、カスタマイズが⾏いづらかった 3. 要件が加わると、変更が⾟い • AWS
Amplify で作成したリソースに設定を追加したい場合、CLIから作成することが できず、⾃分でオーバーライドする記述を JSON や TypeScript などを利⽤して 記述する必要がある
Gen 1 の課題 17 どのファイルが設定値なのかわかりづらい 3. 要件が加わると、変更が⾟い • バックエンドリソースを作成する JSON
ファイルが複 数作成されており、ファイル毎に何を作成しているの かわかりづらかった = ファイルの役割を理解する必要があった
Gen 1 の課題 18 そんな中で Gen 2 が登場
Gen 2 になって、何が嬉しい? 19 バックエンドのTypeScript記述 Gen 2からは Amazon DynamoDB や
AWS AppSync などの作成を、TypeScriptで記述 できるように Gen 1 Gen 2 schema.graphql resource.ts
Gen 2 になって、何が嬉しい? 20 バックエンドのTypeScript記述 Gen 2からは Amazon DynamoDB や
AWS AppSync などの作成を、TypeScriptで記述 できるように Gen 1 Gen 2 schema.graphql resource.ts 補完が効かず、記法が間違っていたとしても デプロイしてみないと間違いに気づけない
Gen 2 になって、何が嬉しい? 21 バックエンドのTypeScript記述 間違えている例:
Gen 2 になって、何が嬉しい? 22 バックエンドのTypeScript記述 間違えている例: 括弧が不要
Gen 2 になって、何が嬉しい? 23 バックエンドのTypeScript記述 間違えている例: どこでNameが必要なのか分かりづらい
Gen 2 になって、何が嬉しい? 24 バックエンドのTypeScript記述 Gen 2 では型補完が効いているため、⽂法ミスにすぐに気づくことができる a.string() が正解
Gen 2 になって、何が嬉しい? 25 Gen 1 Gen 2 バックエンドのTypeScript記述: ディレクトリも⾒やすい
Gen 2 になって、何が嬉しい? 26 Sandbox機能 • Gen 1 でも、Sandboxという⽤語は使われていた •
ただこの機能は Amplify CLI でバックエンドの環境を⾃分で追加することで、 別のバックエンド環境を作れる機能だった 開発するたびに バックエンド環境の切り替えが必要 https://docs.amplify.aws/gen1/react/tools/cli/teams/sandbox/
Gen 2 になって、何が嬉しい? 27 Sandbox機能 AWSコンソールから「サンドボックスを管理」に遷移しても、表⽰されない
Gen 2 になって、何が嬉しい? 28 Sandbox機能 Gen 2 では、コマンド1つで開発者毎にサンドボックスが作成される → ローカル開発は
ホットリロード で快適にバックエンド開発が可能 https://docs.amplify.aws/react/how-amplify-works/concepts/
3. チュートリアルを通して AWS Amplify Gen 2 を知る 29
チュートリアルを通して AWS Amplify Gen 2 を知る 30 実際にチュートリアルを⾏うことで、Amplify Gen 2
の理解を深める Gen 2 のチュートリアルを通して学んでみる https://docs.amplify.aws/react/start/quickstart/
チュートリアルを通して AWS Amplify Gen 2 を知る 31 テンプレートリポジトリから、AWS Amplify ⽤のリポジトリを作成する
1. AWS Amplify と接続するリポジトリを⽤意する https://github.com/aws-samples/amplify-vite-react-template
チュートリアルを通して AWS Amplify Gen 2 を知る 32 AWS Amplifyコンソールから「新しいアプリを作成」を選択し、GitHubを選択 2.
AWSコンソール上からデプロイ
チュートリアルを通して AWS Amplify Gen 2 を知る 33 作成したリポジトリを選択する 2. AWSコンソール上からデプロイ
チュートリアルを通して AWS Amplify Gen 2 を知る 34 2. AWSコンソール上からデプロイ ビルドの設定
チュートリアルを通して AWS Amplify Gen 2 を知る 35 2. AWSコンソール上からデプロイ
チュートリアルを通して AWS Amplify Gen 2 を知る 36 2. AWSコンソール上からデプロイ
チュートリアルを通して AWS Amplify Gen 2 を知る 37 3. ローカル開発準備 デプロイが完了したら、対象のブランチを選択
チュートリアルを通して AWS Amplify Gen 2 を知る 38 3. ローカル開発準備 デプロイされたバックエンドリソースから
amplify_outputs.json をダウンロード
チュートリアルを通して AWS Amplify Gen 2 を知る 39 3. ローカル開発準備 作成したリポジトリをクローン
チュートリアルを通して AWS Amplify Gen 2 を知る 40 3. ローカル開発準備 ダウンロードした
amplify_outputs.json は、プロジェクトのルートに配置
チュートリアルを通して AWS Amplify Gen 2 を知る 41 4. ローカル起動 ローカルでアプリケーションを確認する
チュートリアルを通して AWS Amplify Gen 2 を知る 42 5. 削除機能追加 初期の状態では作成と取得のみ
実装されているため、以下追加 • 削除⽤の関数 • イベントハンドラー
チュートリアルを通して AWS Amplify Gen 2 を知る 43 5. 削除機能追加 実装⾃体はこれで完了
チュートリアルを通して AWS Amplify Gen 2 を知る 44 5. 削除機能追加 client.models.Todo
で Todo テーブルへの操作が⾏えるようになっている
チュートリアルを通して AWS Amplify Gen 2 を知る 45 5. 削除機能追加 Todo
モデルへの参照は、 ../amplify/data/resource の import 部分
チュートリアルを通して AWS Amplify Gen 2 を知る 46 5. 削除機能追加 Todo
モデルへの参照は、 ../amplify/data/resource の import 部分
チュートリアルを通して AWS Amplify Gen 2 を知る 47 5. 削除機能追加 Todo
モデルへの参照は、 ../amplify/data/resource の import 部分
チュートリアルを通して AWS Amplify Gen 2 を知る 48 6. サンドボックスを使う ローカル実⾏しながら、
別のターミナルで npx ampx sandbox を実⾏する
チュートリアルを通して AWS Amplify Gen 2 を知る 49 6. サンドボックスを使う 作成されたサンドボックスのリソースは
AWS CloudFormation から確認可能
チュートリアルを通して AWS Amplify Gen 2 を知る 50 7. 作成した機能をデプロイする サンドボックスで動作確認が出来たら、mainブランチに変更を反映する
mainブランチへ変更をプッシュすると、⾃動でデプロイが⾏われる
4. チュートリアルで作成したアプリケーションを改良する 51
チュートリアルで作成したアプリケーションを改良する 52 ブランチの追加 接続するブランチを追加することで、作業中のブランチをホスティングできる
チュートリアルで作成したアプリケーションを改良する 53 WAFの有効化 Amplify コンソール上から AWS WAF (Web Application Firewall)
が設定可能 2025年3⽉にGAされた
チュートリアルで作成したアプリケーションを改良する 54 必要な情報だけクエリする 呼び出し側で取得したいフィールドを selection set に指定することで、必要な情報だけクエリ可能
5. まとめ 55
まとめ 56 • AWS Amplify は様々な機能があり、初期⽴ち上げが爆速で可能 • AWS Amplify Gen
2 はよりコードファーストの開発体験で、 開発しやすくなった • ただ、カスタマイズを⾏う時に⼯夫が必要になることは Gen 1 で もGen 2 でも同じように発⽣する Gen 1 から Gen 2 への移⾏は まだ推奨されていないので注意