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
第166回 雲勉 コードを読んで理解する AWS Amplify Gen2 Backend
Search
iret.kumoben
June 26, 2025
Technology
0
43
第166回 雲勉 コードを読んで理解する AWS Amplify Gen2 Backend
下記、勉強会での資料です。
https://youtu.be/txpkVWWXzFY
iret.kumoben
June 26, 2025
Tweet
Share
More Decks by iret.kumoben
See All by iret.kumoben
第170回 雲勉 Lyria が切り拓く音楽制作の未来
iret
1
20
第169回 雲勉 AWS WAF 構築 RTA
iret
0
31
第168回 雲勉 JITNAの使い方とハマったポイントについて語る回
iret
0
35
第167回 雲勉 エージェント開発を加速する Agent Development Kit 入門
iret
1
42
第165回 雲勉 Google Agentspace について
iret
0
37
第164回 雲勉 Agent Development Kit と MCP Toolbox for Databases で MCP 連携してみた
iret
1
85
第163回 雲勉 CircleCIで複数リポジトリ間のパイプラインを連携する
iret
1
38
第162回 雲勉 比較して学ぶ AWS Amplify Gen 2
iret
0
50
第161回 雲勉 Amazon Kinesis Data Streams と Amazon Data Firehose を使ってみよう
iret
0
51
Other Decks in Technology
See All in Technology
猫でもわかるQ_CLI(CDK開発編)+ちょっとだけKiro
kentapapa
0
3.4k
✨敗北解法コレクション✨〜Expertだった頃に足りなかった知識と技術〜
nanachi
1
340
ホリスティックテスティングの右側も大切にする 〜2つの[はか]る〜 / Holistic Testing: Right Side Matters
nihonbuson
PRO
0
570
多様なニーズに応える Movable Type ラインナップ 全紹介
masakah
0
130
【2025 Japan AWS Jr. Champions Ignition】点から線、線から面へ〜僕たちが起こすコラボレーション・ムーブメント〜
amixedcolor
1
120
Kiroから考える AIコーディングツールの潮流
s4yuba
4
650
Oracle Cloud Infrastructure:2025年7月度サービス・アップデート
oracle4engineer
PRO
1
110
Rubyの国のPerlMonger
anatofuz
3
720
大規模イベントに向けた ABEMA アーキテクチャの遍歴 ~ Platform Strategy 詳細解説 ~
nagapad
0
180
クマ×共生 HACKATHON - 熊対策を『特別な行動」から「生活の一部」に -
pharaohkj
0
290
LLMで構造化出力の成功率をグンと上げる方法
keisuketakiguchi
0
230
MCP認可の現在地と自律型エージェント対応に向けた課題 / MCP Authorization Today and Challenges to Support Autonomous Agents
yokawasa
5
1.6k
Featured
See All Featured
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3k
Practical Orchestrator
shlominoach
190
11k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
870
Producing Creativity
orderedlist
PRO
346
40k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.9k
How STYLIGHT went responsive
nonsquared
100
5.7k
Java REST API Framework Comparison - PWX 2021
mraible
32
8.8k
Mobile First: as difficult as doing things right
swwweet
223
9.9k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
110
19k
4 Signs Your Business is Dying
shpigford
184
22k
Building Adaptive Systems
keathley
43
2.7k
Transcript
第166回 雲勉 コードを読んで理解する AWS Amplify Gen 2 Backend
0. 講師自己紹介 2 • 本田 岳士(ほんだ たけし) • クラウドインテグレーション事業部ソリューション開発セクション第2開発グループ (大阪オフィス)
• 40歳からエンジニア(5年目)、自社開発2社経験してアイレット • アイレット歴 もうすぐ丸2年 • スパゲッティコードに対する耐性が強み • 趣味は一人旅、変なTシャツ・パーカー、猫3匹 • 推しのAWSサービスはAWS CDK
アジェンダ 3 0. 自己紹介 1. AWS Amplify Gen 2とは 2.
defineBackendによるリソース作成 3. defineAuthで作成される認証機能 4. defineDataで定義されるGraphQLサービスとDB 5. AWS CDKでリソースを定義する 6. まとめ
1. AWS Amplify Gen 2とは 4
1.AWS Amplify Gen 2とは 5 ◼ AWS Amplify Gen 2(以下Amplify
Gen 2)とは • フロントエンドエンジニアであってもTypeScriptベースでフロントエンド/バックエンドのフ ルスタック開発を可能にするプラットフォームです。 • ReactやVue.js、Next.jsなどのJavaScriptフレームワーク開発、React NativeやFlutterなど のモバイルアプリ開発のテンプレートが提供されています。 • 開発者ごとに独立したサンドボックス環境を用意することができ、お互いのリソースに影響を 与えることなく並行して開発することが可能になっています。 • Gitのブランチに対応した本番/ステージング環境を自動でデプロイできます。 • ビルド、デプロイ、データなどを単一のコンソールで一元管理できます。
1. AWS Amplify Gen 2とは 6 • バックエンドの定義を行っているのは amplify/backend.tsです。 •
初期状態はとてもシンプルですが、この コードによって行われる処理についてお話 したいと思います。
2. defineBackendによるリソース作成 7
2. defineBackendによるリソース作成 8 8 2025年5月現在、defineBackendで渡すことができる引数は以下の4種類です。 1. authリソース (Amazon Cognito) →
defineAuth 2. dataリソース (AWS AppSync, Amazon DynamoDB) → defineData 3. storageリソース (Amazon S3) → defineStorage 4. functionリソース (AWS Lambda) → defineFunction (3と4は初期状態で定義されていない) 3と4は複数指定可 (1と2はシングルトンパターンに従う) 引数がどのリソースか判別するforEachと インスタンスを作成するforEach
2. defineBackendによるリソース作成 9 9 戻り値はオブジェクトで、引数で渡したそれぞれのリソース名のオブジェクト(コン ストラクト) のプロパティとCDKスタック(Stackクラスのインスタンス)である stackプロパティが含まれます。 また、オブジェクトメソッドとして 1.
createStack(別のスタックを作成) 2. addOutput(出力の設定) が用意されます。 @aws-amplify/backend/lib/backend_factory.jsでdefineBackendが定義されて います。
3. defineAuthで作成される認証機能 10
3. defineAuthで作成される認証機能 11 defineAuthではAmazon CognitoのUserPoolを作成します。 初期状態ではシンプルなメールアドレスのみの認証となっています。
3. defineAuthで作成される認証機能 1 2 12 型定義は以下の通りです。loginWithで複数項目を指定した際はOr条件です。 externalProvidersでSNS認証やSAML認証などの設定を行うことができます。 詳しくは概要欄のリンクを参考にしてください。 @aws-amplify/backend-data/lib/types.d.ts
3. defineAuthで作成される認証機能 13 UserAttributesで指定できる標準属性は左下の通りです。 (@aws-amplify/auth-construct/lib/types.d.ts)それ以外はカスタム属性として定 義します。
4. defineDataで定義される GraphQLサービスとDB 14
4. defineDataで定義されるGraphQLサービスとDB 15 defineDataではGraphQLサービスとDBを作成します。 Gen 1ではバックエンドサービスとしてRestAPI(AWS API Gateway)とGraphQL が選択できたのですが、Gen 2ではGraphQLのみとなっています。
4. defineDataで定義されるGraphQLサービスとDB 16 型定義を確認するとschema(必須)、name、authorizationModes、functionsを指 定できることがわかります。schemaに関しては直接文字列で定義する方法と、初 期状態にあるa.schema…(DerivedModelSchema)で書く方法があります。 DerivedModelSchemaに関しては概要欄にある私のブログを参照してください。 @aws-amplify/backend-data/lib/types.d.ts
4. defineDataで定義されるGraphQLサービスとDB 17 スキーマでQuery、Mutation、Subscriptionも定義できます。リゾルバーもある程 度記述できます。 フィールドレベルのリゾルバーや 複雑なリゾルバーなど、CDKのみ の実装となることがあります。
4. defineDataで定義されるGraphQLサービスとDB 18 バックエンドで定義したスキーマはクライアントで使用できるように変換して TypeScriptの型として使うことができます。
4. defineDataで定義されるGraphQLサービスとDB 19 認可戦略について 用途 戦略 (schemaのallow.の後) クライアントのauthMode defineDataの authorizationMode
匿名ユーザーによる公開データアクセス publicApiKey apiKey apiKey 本番環境での公開データアクセス (未認証ユーザー) guest identityPool userPool/oidc ユーザーごとのデータアクセス (レコードの「所有者」に制限) owner/ownerDefinedIn/ownersDefinedIn userPool/oidc userPool/oidc サインイン済みユーザーによるデータアクセス authenticated userPool/oidc/identityPool userPool/oidc ユーザーグループごとのデータアクセス group/groupDefinedIn/groups/groupsDefinedIn userPool/oidc userPool/oidc サーバーレス関数内でのカスタム認可ルール custom lambda lambda
5. AWS CDKでリソースを定義する 20
5. AWS CDKでリソースを定義する 21 defineBackendで作成できないものに関してはAWS CDKで実装することになりま す。新しいスタックを作成してリソースを追加するのとdefineBackendで作成され るスタックにリソースを追加するのでは書き方が異なります。
6.まとめ 22
6. まとめ 23 • defineBackendで定義できるリソースは少ないですが、CDKで柔軟に拡張できる のでそこまで不自由を感じないと思います。 • そしてバックエンドで定義したスキーマを変換してそのままクライアントで使用 できるのは大変魅力だと感じました!
リファレンス 24 • フルスタック TypeScript 開発環境 AWS Amplify Gen 2
をグラレコで解説 https://aws.amazon.com/jp/builders-flash/202411/awsgeek-aws-amplify-gen2/ • Amplify Docs - Build & connect backend - https://docs.amplify.aws/react/build-a-backend/ • iret.media – AWS Amplify Gen 2におけるDerivedModelSchemaの完全ガイド - https://iret.media/153898
25 ご清聴ありがとうございました!