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
58
第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
28
第176回 雲勉 VPC 間サービス接続を考える!Private Service Connect 入門
iret
0
32
第175回 雲勉 Amazon ECS入門:コンテナ実行の基本を学ぶ
iret
0
45
第174回 雲勉 Google Agentspace × ADK Vertex AI Agent Engineにデプロイしたエージェントを呼び出す
iret
0
70
第173回 雲勉 ノーコードで生成 AI アプリを構築!Google Cloud AI Applications(旧 Vertex AI Agent Builder)入門
iret
0
63
第170回 雲勉 Lyria が切り拓く音楽制作の未来
iret
1
40
第169回 雲勉 AWS WAF 構築 RTA
iret
0
47
第168回 雲勉 JITNAの使い方とハマったポイントについて語る回
iret
0
52
第167回 雲勉 エージェント開発を加速する Agent Development Kit 入門
iret
1
62
Other Decks in Technology
See All in Technology
会社を支える Pythonという言語戦略 ~なぜPythonを主要言語にしているのか?~
curekoshimizu
3
600
混合雲環境整合異質工作流程工具運行關鍵業務 Job 的經驗分享
yaosiang
0
150
初めてのDatabricks Apps開発
taka_aki
1
260
What's new in OpenShift 4.20
redhatlivestreaming
0
100
Digitization部 紹介資料
sansan33
PRO
1
5.7k
AIエージェント入門 〜基礎からMCP・A2Aまで〜
shukob
1
160
事業開発におけるDify活用事例
kentarofujii
5
1.3k
生成AI時代のPythonセキュリティとガバナンス
abenben
0
120
JSConf JPのwebsiteをGatsbyからNext.jsに移行した話 - Next.jsの多言語静的サイトと課題
leko
2
180
ソースを読むプロセスの例
sat
PRO
15
9.8k
Bill One 開発エンジニア 紹介資料
sansan33
PRO
4
14k
Railsの話をしよう
yahonda
0
170
Featured
See All Featured
Site-Speed That Sticks
csswizardry
13
920
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.6k
Producing Creativity
orderedlist
PRO
347
40k
How to Ace a Technical Interview
jacobian
280
24k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.2k
Designing Experiences People Love
moore
142
24k
Optimizing for Happiness
mojombo
379
70k
The Cost Of JavaScript in 2023
addyosmani
55
9.1k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
A Modern Web Designer's Workflow
chriscoyier
697
190k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
16
1.7k
Gamification - CAS2011
davidbonilla
81
5.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 ご清聴ありがとうございました!