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
45
第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
第173回 雲勉 ノーコードで生成 AI アプリを構築!Google Cloud AI Applications(旧 Vertex AI Agent Builder)入門
iret
0
33
第170回 雲勉 Lyria が切り拓く音楽制作の未来
iret
1
26
第169回 雲勉 AWS WAF 構築 RTA
iret
0
34
第168回 雲勉 JITNAの使い方とハマったポイントについて語る回
iret
0
36
第167回 雲勉 エージェント開発を加速する Agent Development Kit 入門
iret
1
48
第165回 雲勉 Google Agentspace について
iret
0
56
第164回 雲勉 Agent Development Kit と MCP Toolbox for Databases で MCP 連携してみた
iret
1
110
第163回 雲勉 CircleCIで複数リポジトリ間のパイプラインを連携する
iret
1
41
第162回 雲勉 比較して学ぶ AWS Amplify Gen 2
iret
0
63
Other Decks in Technology
See All in Technology
現場が抱える様々な問題は “組織設計上” の問題によって生じていることがある / Team-oriented Organization Design 20250827
mtx2s
1
620
キャリアを支え組織力を高める「多層型ふりかえり」 / 20250821 Kazuki Mori
shift_evolve
PRO
2
290
新卒(ほぼ)専業Kagglerという選択肢
nocchi1
1
1.9k
ソフトウェア エンジニアとしての 姿勢と心構え
recruitengineers
PRO
1
160
知られざるprops命名の慣習 アクション編
uhyo
10
2.3k
プロジェクトマネジメントは不確実性との対話だ
hisashiwatanabe
0
200
Go で言うところのアレは TypeScript で言うとコレ / Kyoto.なんか #7
susisu
1
250
VPC Latticeのサービスエンドポイント機能を使用した複数VPCアクセス
duelist2020jp
0
160
人と組織に偏重したEMへのアンチテーゼ──なぜ、EMに設計力が必要なのか/An antithesis to the overemphasis of people and organizations in EM
dskst
4
520
LLM時代の検索とコンテキストエンジニアリング
shibuiwilliam
2
1.1k
OpenAPIから画面生成に挑戦した話
koinunopochi
0
150
RAID6 を楔形文字で組んで現代人を怖がらせましょう(実装編)
mimifuwa
0
300
Featured
See All Featured
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
31
2.2k
The Art of Programming - Codeland 2020
erikaheidi
55
13k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Mobile First: as difficult as doing things right
swwweet
223
9.9k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Gamification - CAS2011
davidbonilla
81
5.4k
Scaling GitHub
holman
462
140k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.6k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
36
2.5k
Designing for humans not robots
tammielis
253
25k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
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 ご清聴ありがとうございました!