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
49
第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
第168回 雲勉 JITNAの使い方とハマったポイントについて語る回
iret
0
26
第167回 雲勉 エージェント開発を加速する Agent Development Kit 入門
iret
1
29
第166回 雲勉 コードを読んで理解する AWS Amplify Gen2 Backend
iret
0
33
第165回 雲勉 Google Agentspace について
iret
0
29
第164回 雲勉 Agent Development Kit と MCP Toolbox for Databases で MCP 連携してみた
iret
1
45
第163回 雲勉 CircleCIで複数リポジトリ間のパイプラインを連携する
iret
1
35
第161回 雲勉 Amazon Kinesis Data Streams と Amazon Data Firehose を使ってみよう
iret
0
48
第160回 雲勉 それ、AWS Step Functions で置き換えれん?
iret
0
77
第159回 雲勉 Amazon Bedrock でブラウザを操作する AI エージェントを作ってみた
iret
0
89
Other Decks in Technology
See All in Technology
20250707-AI活用の個人差を埋めるチームづくり
shnjtk
4
3.8k
成長し続けるアプリのためのテストと設計の関係、そして意思決定の記録。
sansantech
PRO
0
120
KubeCon + CloudNativeCon Japan 2025 Recap
ren510dev
1
380
SaaS型なのに自由度の高い本格CMSでサイト構築と運用のコスパ&タイパUP! MovableType.net の便利機能とユーザー事例のご紹介
masakah
0
110
Operating Operator
shhnjk
1
580
CRE Camp #1 エンジニアリングを民主化するCREチームでありたい話
mntsq
1
110
United airlines®️ USA Contact Numbers: Complete 2025 Support Guide
unitedflyhelp
0
270
PO初心者が考えた ”POらしさ”
nb_rady
0
210
オーティファイ会社紹介資料 / Autify Company Deck
autifyhq
10
130k
American airlines ®️ USA Contact Numbers: Complete 2025 Support Guide
airhelpsupport
0
380
AI専用のリンターを作る #yumemi_patch
bengo4com
5
4.2k
american airlines®️ USA Contact Numbers: Complete 2025 Support Guide
supportflight
1
110
Featured
See All Featured
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
Adopting Sorbet at Scale
ufuk
77
9.5k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.5k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
5.9k
How to train your dragon (web standard)
notwaldorf
95
6.1k
Embracing the Ebb and Flow
colly
86
4.7k
Speed Design
sergeychernyshev
32
1k
Side Projects
sachag
455
42k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
690
Done Done
chrislema
184
16k
The World Runs on Bad Software
bkeepers
PRO
69
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 への移⾏は まだ推奨されていないので注意