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
AWS AppSyncと仲良くするためのTips
Search
Haruna Oka
July 10, 2024
Technology
1
170
AWS AppSyncと仲良くするためのTips
Classmethod Odyssey Online 2024/07/09 に発表した「AWS AppSyncと仲良くするためのTips」のスライド#cm_odyssey
Haruna Oka
July 10, 2024
Tweet
Share
More Decks by Haruna Oka
See All by Haruna Oka
Next.js × AWS App Runner × AWS AppSyncで進めるクライアントファーストのWEB開発
okaharuna
7
6k
re:Growth 2020 Serverless
okaharuna
2
1.4k
EventBridgeでAWSとShopifyの統合
okaharuna
2
6.1k
Serverless SPA development starting with Angular
okaharuna
0
3.3k
serverlessdaysfukuoka_oka.pdf
okaharuna
1
2.2k
SPA×Auth0
okaharuna
5
2k
Fargate_Super_Introduction.pdf
okaharuna
2
3.2k
Other Decks in Technology
See All in Technology
はじめての OSS コントリビューション 〜小さな PR が世界を変える〜
chiroito
4
330
「もっと正確に、もっと効率的に」ANDPADの写真書き込み機能における、 現場の声を形にしたエンハンス
andpad
0
110
Quarkusで作るInteractive Stream Application
joker1007
0
150
探求の技術
azukiazusa1
7
2.3k
仕様駆動 x Codex で 超効率開発
ismk
2
1.5k
手を動かしながら学ぶデータモデリング - 論理設計から物理設計まで / Data modeling
soudai
PRO
24
5.7k
技術広報のOKRで生み出す 開発組織への価値 〜 カンファレンス協賛を通して育む学びの文化 〜 / Creating Value for Development Organisations Through Technical Communications OKRs — Nurturing a Culture of Learning Through Conference Sponsorship —
pauli
5
320
[CV勉強会@関東 ICCV2025] WoTE: End-to-End Driving with Online Trajectory Evaluation via BEV World Model
shinkyoto
0
270
[mercari GEARS 2025] なぜメルカリはノーコードを選ばなかったのか? 社内問い合わせ工数を60%削減したLLM活用の裏側
mercari
PRO
0
110
『HOWはWHY WHATで判断せよ』 〜『ドメイン駆動設計をはじめよう』の読了報告と、本質への探求〜
panda728
PRO
5
1.9k
AWS資格は取ったけどIAMロールを腹落ちできてなかったので、年内に整理してみた
hiro_eng_
0
230
[mercari GEARS 2025] Building Foundation for Mercari’s Global Expansion
mercari
PRO
1
130
Featured
See All Featured
Typedesign – Prime Four
hannesfritz
42
2.9k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
11
930
We Have a Design System, Now What?
morganepeng
54
7.9k
How STYLIGHT went responsive
nonsquared
100
5.9k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
31
2.9k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
249
1.3M
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
54k
Making the Leap to Tech Lead
cromwellryan
135
9.6k
Balancing Empowerment & Direction
lara
5
750
The Power of CSS Pseudo Elements
geoffreycrofte
80
6.1k
YesSQL, Process and Tooling at Scale
rocio
174
15k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
130k
Transcript
AWS AppSyncと 仲良くするためのTips 2024.07.09 フリーランスエンジニア 岡 春奈
Xへの投稿の際は、 ハッシュタグ #cm_odyssey でお願いいたします。 2 お願い
⾃⼰紹介 3 岡 春奈 / Haruna Oka バックエンドエンジニア @OkaHaruna
本⽂タイトル • 話すこと ◦ 今使っている案件でのAppSyncの話 • 話さないこと ◦ フロントの話 ◦
Amplifyの話(Gen2) 4
全体構成 5
6
AppSyncを1年使ってみた 7
アジェンダ • 構成を変えたところ • それぞれの難点‧利点 • まとめ 8
構成を変えた部分 9
構成を変えた部分 • リゾルバーの使い分けを⾒直した • オニオンアーキテクチャの導⼊ • APIの認証⽅式を変えた • バリデーションスキーマを⾃動⽣成 10
リゾルバーの種類 • ユニットリゾルバー • パイプラインリゾルバー • Lambdaリゾルバー 11
ユニットリゾルバー 12 公式Docs: AWS AppSync リゾルバー
パイプラインリゾルバー 13 公式Docs: AWS AppSync リゾルバー
Lambdaリゾルバー 14 正確にはLambdaをデータソースとし たユニットリゾルバー 公式Docs: AWS AppSync リゾルバー
リゾルバーの使い分け 15
元々の使い分け 16
開発進める中での問題点 17
開発進める中での問題点 • JSリゾルバーの制約が⾟い ◦ 組み込み関数が多々使えない • Pipelineリゾルバーのメンテがしづらい • コードサイズ制限に引っかかる 18
リゾルバーの使い分け(現状) 19
リゾルバーの使い分け(現状) • Mutation系はLambdaに統⼀ ◦ middyの導⼊ • Pipelineリゾルバーを辞めた ◦ (管理コストを下げるため) 20
リゾルバーの使い分け(現状) • 結論 ◦ Lambdaの同時実⾏数を気にしてJSリゾ ルバーに寄せていたが、Lambdaの同時 実⾏数を気にするようなアクセス数に なった時はAppSync⾃体を剥がしたほう が良さそう 21
オニオンアーキテクチャの導⼊ 22
オニオンアーキテクチャの導⼊ • Lambdaリゾルバーに寄せたことで共通化 がしやすくなった • 将来的にDBが変わる可能性も考慮してディ レクトリ構成を全体的に⾒直した 23
オニオンアーキテクチャの導⼊ • /core ◦ /domain ◦ /infrastructure • /graphql ◦
スキーマとcodegenで⽣成したファイル 24
オニオンアーキテクチャの導⼊ 25
APIの認証⽅式を変えた 26
APIの認証⽅式を変えた • APIは3つ ◦ 管理者向け: Admin API ◦ ユーザー向け: Customer
API ◦ ゲストユーザー向け: Public API 27
APIの認証⽅式を変えた • Admin API ◦ Cognitoユーザープール(グループ) • Customer API ◦
Cognitoユーザープール • Public API ◦ APIキー 28
APIの認証⽅式を変えた • Admin API ◦ Cognitoユーザープール(グループ) • Customer API ◦
Cognitoユーザープール • Public API ◦ APIキー → IAM認証に切り替えた 29
APIの認証⽅式を変えた 30
APIの認証⽅式を変えた 31
APIの認証⽅式を変えた 32
APIの認証⽅式を変えた 33
バリデーションスキーマの⽣成 34
バリデーションスキーマの⽣成 • zodを導⼊ • codegenのプラグイン ◦ typescript-validation-schema ◦ @constraintに最⼤⽂字数等を指定 35
バリデーションスキーマの⽣成 36
バリデーションスキーマの⽣成 37
他開発ツール 38
他開発ツール周り • npm → pnpm にして扱いやすくなった • APIドキュメントの⾃動⽣成 ◦ magidocで⽣成
→ Cloudflare Pagesで公開 • CDKTFの導⼊ 39
CDKTFの導⼊ • CDK for Terraformを導⼊ • ⼀部のリソースでCloudflareを使っている ◦ CDN, DNS等
• 元々はterraformでやる想定だった • CDKに合わせてCDKTFでやることに 40
CDKTFの導⼊ • ⼀部のリソースでCloudflareを使っている ◦ CDN, DNS等 • 元々はterraformでやる想定だった • CDKに合わせてCDKTFでやることに
41 →Typescriptで統⼀できて管理コストが下がった
反省点 42
反省点 • 初⼿RDSにしておくべきだった • DB設計にもっと時間をかけるべきだった • そもそもAppSyncが適していなかったかも 43
まとめ • AppSyncの開発効率を最⼤限に活⽤するな らやはりAmplifyと使うのが有⽤ • GraphQL + monorepo = 相性良し
• ⾔語をtypescriptで統⼀できた(CDKTF) 44