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
49
第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
第177回 雲勉 IdP 移行を楽に!Amazon Cognito でアプリへの影響をゼロにするアイデア
iret
0
15
第176回 雲勉 VPC 間サービス接続を考える!Private Service Connect 入門
iret
0
23
第175回 雲勉 Amazon ECS入門:コンテナ実行の基本を学ぶ
iret
0
36
第174回 雲勉 Google Agentspace × ADK Vertex AI Agent Engineにデプロイしたエージェントを呼び出す
iret
0
47
第173回 雲勉 ノーコードで生成 AI アプリを構築!Google Cloud AI Applications(旧 Vertex AI Agent Builder)入門
iret
0
52
第170回 雲勉 Lyria が切り拓く音楽制作の未来
iret
1
33
第169回 雲勉 AWS WAF 構築 RTA
iret
0
38
第168回 雲勉 JITNAの使い方とハマったポイントについて語る回
iret
0
46
第167回 雲勉 エージェント開発を加速する Agent Development Kit 入門
iret
1
59
Other Decks in Technology
See All in Technology
KAGのLT会 #8 - 東京リージョンでGAしたAmazon Q in QuickSightを使って、報告用の資料を作ってみた
0air
0
200
Oracle Cloud Infrastructure:2025年9月度サービス・アップデート
oracle4engineer
PRO
0
390
VCC 2025 Write-up
bata_24
0
180
OpenAI gpt-oss ファインチューニング入門
kmotohas
2
940
生成AI_その前_に_マルチクラウド時代の信頼できるデータを支えるSnowflakeメタデータ活用術.pdf
cm_mikami
0
110
ACA でMAGI システムを社内で展開しようとした話
mappie_kochi
0
240
SoccerNet GSRの紹介と技術応用:選手視点映像を提供するサッカー作戦盤ツール
mixi_engineers
PRO
1
170
20250929_QaaS_vol20
mura_shin
0
110
Azure SynapseからAzure Databricksへ 移行してわかった新時代のコスト問題!?
databricksjapan
0
140
空間を設計する力を考える / 20251004 Naoki Takahashi
shift_evolve
PRO
3
330
AI駆動開発を推進するためにサービス開発チームで 取り組んでいること
noayaoshiro
0
140
多様な事業ドメインのクリエイターへ 価値を届けるための営みについて
massyuu
0
100
Featured
See All Featured
Side Projects
sachag
455
43k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
2.6k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
Code Review Best Practice
trishagee
72
19k
Faster Mobile Websites
deanohume
310
31k
Designing for humans not robots
tammielis
254
25k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
The Cult of Friendly URLs
andyhume
79
6.6k
Building a Modern Day E-commerce SEO Strategy
aleyda
43
7.7k
A better future with KSS
kneath
239
17k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.5k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
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 ご清聴ありがとうございました!