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
Next.js × AWS App Runner × AWS AppSyncで進めるクライアン...
Search
Sponsored
·
SiteGround - Reliable hosting with speed, security, and support you can count on.
→
Haruna Oka
September 23, 2023
Programming
7
6.2k
Next.js × AWS App Runner × AWS AppSyncで進めるクライアントファーストのWEB開発
2023/09/23に開催されたServerlessDays Tokyo 2023で登壇した資料です
Haruna Oka
September 23, 2023
Tweet
Share
More Decks by Haruna Oka
See All by Haruna Oka
AWS AppSyncと仲良くするためのTips
okaharuna
1
190
re:Growth 2020 Serverless
okaharuna
2
1.4k
EventBridgeでAWSとShopifyの統合
okaharuna
2
6.2k
Serverless SPA development starting with Angular
okaharuna
0
3.4k
serverlessdaysfukuoka_oka.pdf
okaharuna
1
2.2k
SPA×Auth0
okaharuna
5
2.1k
Fargate_Super_Introduction.pdf
okaharuna
2
3.2k
Other Decks in Programming
See All in Programming
テレメトリーシグナルが導くパフォーマンス最適化 / Performance Optimization Driven by Telemetry Signals
seike460
PRO
2
160
OTP を自動で入力する裏技
megabitsenmzq
0
130
Codex の「自走力」を高める
yorifuji
0
1.3k
PHP 7.4でもOpenTelemetryゼロコード計装がしたい! / PHPerKaigi 2026
arthur1
1
410
仕様漏れ実装漏れをなくすトレーサビリティAI基盤のご紹介
orgachem
PRO
7
3.1k
Goの型安全性で実現する複数プロダクトの権限管理
ishikawa_pro
2
1.4k
20260313 - Grafana & Friends Taipei #1 - Kubernetes v1.36 的開發雜記:那些困在 Alpha 加護病房太久的 Metrics
tico88612
0
230
The free-lunch guide to idea circularity
hollycummins
0
350
Feature Toggle は捨てやすく使おう
gennei
0
340
20260315 AWSなんもわからん🥲
chiilog
2
170
Windows on Ryzen and I
seosoft
0
390
PHP でエミュレータを自作して Ubuntu を動かそう
m3m0r7
PRO
2
140
Featured
See All Featured
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3.3k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
231
22k
svc-hook: hooking system calls on ARM64 by binary rewriting
retrage
2
180
Balancing Empowerment & Direction
lara
5
980
世界の人気アプリ100個を分析して見えたペイウォール設計の心得
akihiro_kokubo
PRO
68
38k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
199
73k
Are puppies a ranking factor?
jonoalderson
1
3.2k
Exploring anti-patterns in Rails
aemeredith
2
290
brightonSEO & MeasureFest 2025 - Christian Goodrich - Winning strategies for Black Friday CRO & PPC
cargoodrich
3
130
DevOps and Value Stream Thinking: Enabling flow, efficiency and business value
helenjbeal
1
150
GraphQLとの向き合い方2022年版
quramy
50
14k
Faster Mobile Websites
deanohume
310
31k
Transcript
Next.js × AWS App Runner × AWS AppSync で進める クライアントファーストのWEB
開発 岡 春奈
自己紹介 名前: 岡 春奈 Twitter: @OkaHaruna 職業: フリーランスエンジニア 趣味:
猫とラーメン
今入っている案件のアーキテクチャをベースに話します バックエンド周り(AppSync) の話がメインです 本日の内容について
アーキテクチャー図
CDN はクローリング対策のためCloudflare を選択 Auth0 は高すぎて断念 Workers, R2 も検討対象になったが冒険になってしま うため断念 技術スタックの選定理由
Amplify に頼らないAppSync 構築 リゾルバー実装 GraphQL Code Generator の活用 AppSync Topic
Amplify に頼らないAppSync 構築 IaC はCDK を利用 とは言いつつ実は当初はAmplify CLI で構築されていた (
初期構築時フロントメンバーしかいなかった為) カスタマイズ性と長期運用を見越してCDK に移行
2022/11 にJavaScript リゾルバーがリリース CDK のカスタムコンストラクタを利用してデプロイ時 にコンパイル 利用するリゾルバは3 種類 ユニットリゾルバー パイプラインリゾルバー
Lambda リゾルバー リゾルバー実装
リゾルバー実装 https://docs.aws.amazon.com/appsync/latest/devguide/resolver-reference-overview-js.html 公式でesbuild を使う方法を 紹介してるのでこれに倣う
リゾルバー実装(ビルド用のutility )
リゾルバー実装(ユニットリゾルバー)
リゾルバー実装(パイプラインリゾルバー)
リゾルバー実装(Lambda リゾルバー)
@aws-appsync/utils/dynamodb がアップデート リゾルバー実装 - DynamoDB にアクセス -
@aws-appsync/utils/dynamodb がアップデート リゾルバー実装 - DynamoDB にアクセス -
@aws-appsync/eslint-plugin でリゾルバーのチェック (esbuild-plugin-eslint でビルド時に実行も可) リゾルバー実装 - Lint -
基本的にはユニットリゾルバーで済ませる 認証の処理を挟むときはパイプラインリゾルバー Lambda リゾルバーも必要になった時のみ 例) 署名付きURL の発行、等 管理コストを下げるため 同時実行数を気にしたくないため リゾルバーの使い分け
util.autoUlid() を使ってID はULID に統一 ID で時系列のソートが可能 TransactWriteItems 等、1 つの関数内で複数のデータソ ースにアクセスしたい時は
dataSource.grantPrincipal.addToPrincipalPolicy() リゾルバーのTips
urql を利用 Apollo よりもシンプルに実装できるため エンドポイント毎の認証切り替えには @urql/exchange-auth を使う GraphQL クライアント
operation ファイルはAmplify で生成 (query GetContent($id: ID!)... の定義ファイル) plugin を使ってurql のhook
まで自動生成 typescript typescript-operations typescript-urql CodegenConfig.hooks.afterAllFileWrite で整形 GraphQL Code Generator の活用
デフォルトで構造化ログが出力される →CloudWatch Insight で検索可能 開発環境はfieldLogLevel をALL にしておく xrayEnabled でxray を有効化しておく
他Tips
開発プロセスについて
Next.js, CDK, API 全てTypescript の為モノレポに 管理ツールにTurborepo を選択した理由 Nx はオーバースペックだった 必要以上に設定を共通化せず開発に支障が出ないのを
第一に Prettier はルートで共通化( 分けたかったらoverrides) ESLint は各パッケージで実行、等 Turborepo でのモノレポ管理
AWS のリソースは全てCDK に集約 Cloudflare のリソースはTerraform で実装中 IaC - CDK とTerraform
-
環境毎のアカウントにOIDC でアクセスしてデプロイ CI/CD
速度重視のためトランクベースを採用 AWS の公式Doc でも「Gitflow はレガシー」と書か れているため https://docs.aws.amazon.com/prescriptive- guidance/latest/strategy-cicd-litmus/fully- cicd-process-differences.html CI/CD
もう少しCloudflare 使っていきたい テストやエミュレートがしづらい npm workspace 辛い(pnpm かbun に移行したい) 頻繁な仕様変更に伴うDynamoDB の設計が難しい
課題感
MVP 開発とサーバーレスは相性抜群 Amplify はライブラリだけ局所的に使うのがおすすめ GraphQL とREST は今後も使い分けていく まとめ