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
第167回 雲勉 エージェント開発を加速する Agent Development Kit 入門
iret
1
23
第166回 雲勉 コードを読んで理解する AWS Amplify Gen2 Backend
iret
0
25
第165回 雲勉 Google Agentspace について
iret
0
23
第164回 雲勉 Agent Development Kit と MCP Toolbox for Databases で MCP 連携してみた
iret
1
44
第163回 雲勉 CircleCIで複数リポジトリ間のパイプラインを連携する
iret
1
35
第161回 雲勉 Amazon Kinesis Data Streams と Amazon Data Firehose を使ってみよう
iret
0
47
第160回 雲勉 それ、AWS Step Functions で置き換えれん?
iret
0
69
第159回 雲勉 Amazon Bedrock でブラウザを操作する AI エージェントを作ってみた
iret
0
84
第158回 雲勉 AWS CDK 入門 ~ プログラミング言語で書くインフラ Python 編 ~
iret
0
73
Other Decks in Technology
See All in Technology
ひとり情シスなCTOがLLMと始めるオペレーション最適化 / CTO's LLM-Powered Ops
yamitzky
0
450
生成AI活用の組織格差を解消する 〜ビジネス職のCursor導入が開発効率に与えた好循環〜 / Closing the Organizational Gap in AI Adoption
upamune
5
4.1k
生成AI時代の開発組織・技術・プロセス 〜 ログラスの挑戦と考察 〜
itohiro73
1
320
無意味な開発生産性の議論から抜け出すための予兆検知とお金とAI
i35_267
0
140
TechLION vol.41~MySQLユーザ会のほうから来ました / techlion41_mysql
sakaik
0
190
SpringBoot x TestContainerで実現するポータブル自動結合テスト
demaecan
0
100
AWS テクニカルサポートとエンドカスタマーの中間地点から見えるより良いサポートの活用方法
kazzpapa3
2
570
変化する開発、進化する体系時代に適応するソフトウェアエンジニアの知識と考え方(JaSST'25 Kansai)
mizunori
1
240
WordPressから ヘッドレスCMSへ! Storyblokへの移行プロセス
nyata
0
160
【5分でわかる】セーフィー エンジニア向け会社紹介
safie_recruit
0
26k
Microsoft Build 2025 技術/製品動向 for Microsoft Startup Tech Community
torumakabe
2
310
rubygem開発で鍛える設計力
joker1007
2
220
Featured
See All Featured
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
Adopting Sorbet at Scale
ufuk
77
9.4k
We Have a Design System, Now What?
morganepeng
53
7.7k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.4k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.3k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Designing Experiences People Love
moore
142
24k
Six Lessons from altMBA
skipperchong
28
3.9k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.7k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
20k
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 への移⾏は まだ推奨されていないので注意