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
69
第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
第174回 雲勉 Google Agentspace × ADK Vertex AI Agent Engineにデプロイしたエージェントを呼び出す
iret
0
7
第173回 雲勉 ノーコードで生成 AI アプリを構築!Google Cloud AI Applications(旧 Vertex AI Agent Builder)入門
iret
0
40
第170回 雲勉 Lyria が切り拓く音楽制作の未来
iret
1
27
第169回 雲勉 AWS WAF 構築 RTA
iret
0
35
第168回 雲勉 JITNAの使い方とハマったポイントについて語る回
iret
0
39
第167回 雲勉 エージェント開発を加速する Agent Development Kit 入門
iret
1
51
第166回 雲勉 コードを読んで理解する AWS Amplify Gen2 Backend
iret
0
45
第165回 雲勉 Google Agentspace について
iret
0
65
第164回 雲勉 Agent Development Kit と MCP Toolbox for Databases で MCP 連携してみた
iret
1
120
Other Decks in Technology
See All in Technology
Product Management Conference -AI時代に進化するPdM-
kojima111
0
270
TypeScript入門
recruitengineers
PRO
33
11k
Oracle Cloud Infrastructure:2025年8月度サービス・アップデート
oracle4engineer
PRO
0
160
つくって納得、つかって実感! 大規模言語モデルことはじめ
recruitengineers
PRO
32
12k
kubellが考える戦略と実行を繋ぐ活用ファーストのデータ分析基盤
kubell_hr
0
120
実践AIガバナンス
asei
3
270
ヒューリスティック評価を用いたゲームQA実践事例
gree_tech
PRO
0
410
LLM翻訳ツールの開発と海外のお客様対応等への社内導入事例
gree_tech
PRO
0
420
AWS環境のリソース調査を Claude Code で効率化 / aws investigate with cc devio2025
masahirokawahara
2
970
実践データベース設計 ①データベース設計概論
recruitengineers
PRO
4
1.9k
実践アプリケーション設計 ①データモデルとドメインモデル
recruitengineers
PRO
5
1.4k
Kubernetes における cgroup driver のしくみ: runwasi の bugfix より
z63d
2
100
Featured
See All Featured
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
185
54k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
8
500
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.5k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
61k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Raft: Consensus for Rubyists
vanstee
140
7.1k
How to train your dragon (web standard)
notwaldorf
96
6.2k
Building an army of robots
kneath
306
46k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.6k
Become a Pro
speakerdeck
PRO
29
5.5k
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 への移⾏は まだ推奨されていないので注意