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
34
第167回 雲勉 エージェント開発を加速する Agent Development Kit 入門
iret
1
36
第166回 雲勉 コードを読んで理解する AWS Amplify Gen2 Backend
iret
0
37
第165回 雲勉 Google Agentspace について
iret
0
31
第164回 雲勉 Agent Development Kit と MCP Toolbox for Databases で MCP 連携してみた
iret
1
66
第163回 雲勉 CircleCIで複数リポジトリ間のパイプラインを連携する
iret
1
35
第161回 雲勉 Amazon Kinesis Data Streams と Amazon Data Firehose を使ってみよう
iret
0
50
第160回 雲勉 それ、AWS Step Functions で置き換えれん?
iret
0
86
第159回 雲勉 Amazon Bedrock でブラウザを操作する AI エージェントを作ってみた
iret
0
91
Other Decks in Technology
See All in Technology
ML Pipelineの開発と運用を OpenTelemetryで繋ぐ @ OpenTelemetry Meetup 2025-07
getty708
0
180
[SRE NEXT 2025] すみずみまで暖かく照らすあなたの太陽でありたい
carnappopper
2
870
名刺メーカーDevグループ 紹介資料
sansan33
PRO
0
830
Frontier Airlines Customer®️ USA Contact Numbers: Complete 2025 Support Guide
frontierairlineswithflyagent
0
110
怖くない!GritQLでBiomeプラグインを作ろうよ
pal4de
1
120
Semantic Machine Intelligence for Vision, Language, and Actions
keio_smilab
PRO
2
380
ObsidianをLLM時代のナレッジベースに! クリッピング→Markdown→CLI連携の実践
srvhat09
7
8.6k
AI時代にも変わらぬ価値を発揮したい: インフラ・クラウドを切り口にユーザー価値と非機能要件に向き合ってエンジニアとしての地力を培う
netmarkjp
0
210
20250719_JAWS_kobe
takuyay0ne
1
160
MCPに潜むセキュリティリスクを考えてみる
milix_m
0
590
データ駆動経営の道しるべ:プロダクト開発指標の戦略的活用法
ham0215
2
220
激動の時代、新卒エンジニアはAIツールにどう向き合うか。 [LayerX Bet AI Day Countdown LT Day1 ツールの選択]
tak848
0
500
Featured
See All Featured
Statistics for Hackers
jakevdp
799
220k
What's in a price? How to price your products and services
michaelherold
246
12k
Code Review Best Practice
trishagee
69
19k
Balancing Empowerment & Direction
lara
1
490
Raft: Consensus for Rubyists
vanstee
140
7k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.6k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.2k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
282
13k
Six Lessons from altMBA
skipperchong
28
3.9k
GitHub's CSS Performance
jonrohan
1031
460k
Unsuck your backbone
ammeep
671
58k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
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 への移⾏は まだ推奨されていないので注意