Next.js × AWS App Runner × AWS AppSyncで進めるクライアントファーストのWEB開発

by Haruna Oka

Slide 1

Slide 1 text

Next.js × AWS App Runner × AWS AppSync で進めるクライアントファーストのWEB 開発岡春奈

Slide 2

Slide 2 text

自己紹介名前: 岡春奈 Twitter: @OkaHaruna 職業: フリーランスエンジニア趣味: 猫とラーメン

Slide 3

Slide 3 text

今入っている案件のアーキテクチャをベースに話しますバックエンド周り(AppSync) の話がメインです本日の内容について

Slide 4

Slide 4 text

アーキテクチャー図

Slide 5

Slide 5 text

CDN はクローリング対策のためCloudflare を選択 Auth0 は高すぎて断念 Workers, R2 も検討対象になったが冒険になってしまうため断念技術スタックの選定理由

Slide 6

Slide 6 text

Amplify に頼らないAppSync 構築リゾルバー実装 GraphQL Code Generator の活用 AppSync Topic

Slide 7

Slide 7 text

Amplify に頼らないAppSync 構築 IaC はCDK を利用とは言いつつ実は当初はAmplify CLI で構築されていた ( 初期構築時フロントメンバーしかいなかった為) カスタマイズ性と長期運用を見越してCDK に移行

Slide 8

Slide 8 text

2022/11 にJavaScript リゾルバーがリリース CDK のカスタムコンストラクタを利用してデプロイ時にコンパイル利用するリゾルバは3 種類ユニットリゾルバーパイプラインリゾルバー Lambda リゾルバーリゾルバー実装

Slide 9

Slide 9 text

リゾルバー実装 https://docs.aws.amazon.com/appsync/latest/devguide/resolver-reference-overview-js.html 公式でesbuild を使う方法を紹介してるのでこれに倣う

Slide 10

Slide 10 text

リゾルバー実装（ビルド用のutility ）

Slide 11

Slide 11 text

リゾルバー実装（ユニットリゾルバー）

Slide 12

Slide 12 text

リゾルバー実装（パイプラインリゾルバー）

Slide 13

Slide 13 text

リゾルバー実装（Lambda リゾルバー）

Slide 14

Slide 14 text

@aws-appsync/utils/dynamodb がアップデートリゾルバー実装 - DynamoDB にアクセス -

Slide 15

Slide 15 text

@aws-appsync/utils/dynamodb がアップデートリゾルバー実装 - DynamoDB にアクセス -

Slide 16

Slide 16 text

@aws-appsync/eslint-plugin でリゾルバーのチェック（esbuild-plugin-eslint でビルド時に実行も可）リゾルバー実装 - Lint -

Slide 17

Slide 17 text

基本的にはユニットリゾルバーで済ませる認証の処理を挟むときはパイプラインリゾルバー Lambda リゾルバーも必要になった時のみ例) 署名付きURL の発行、等管理コストを下げるため同時実行数を気にしたくないためリゾルバーの使い分け

Slide 18

Slide 18 text

util.autoUlid() を使ってID はULID に統一 ID で時系列のソートが可能 TransactWriteItems 等、1 つの関数内で複数のデータソースにアクセスしたい時は dataSource.grantPrincipal.addToPrincipalPolicy() リゾルバーのTips

Slide 19

Slide 19 text

urql を利用 Apollo よりもシンプルに実装できるためエンドポイント毎の認証切り替えには @urql/exchange-auth を使う GraphQL クライアント

Slide 20

Slide 20 text

operation ファイルはAmplify で生成 (query GetContent($id: ID!)... の定義ファイル) plugin を使ってurql のhook まで自動生成 typescript typescript-operations typescript-urql CodegenConfig.hooks.afterAllFileWrite で整形 GraphQL Code Generator の活用

Slide 21

Slide 21 text

デフォルトで構造化ログが出力される →CloudWatch Insight で検索可能開発環境はfieldLogLevel をALL にしておく xrayEnabled でxray を有効化しておく他Tips

Slide 22

Slide 22 text

開発プロセスについて

Slide 23

Slide 23 text

Next.js, CDK, API 全てTypescript の為モノレポに管理ツールにTurborepo を選択した理由 Nx はオーバースペックだった必要以上に設定を共通化せず開発に支障が出ないのを第一に Prettier はルートで共通化( 分けたかったらoverrides) ESLint は各パッケージで実行、等 Turborepo でのモノレポ管理

Slide 24

Slide 24 text

AWS のリソースは全てCDK に集約 Cloudflare のリソースはTerraform で実装中 IaC - CDK とTerraform -

Slide 25

Slide 25 text

環境毎のアカウントにOIDC でアクセスしてデプロイ CI/CD

Slide 26

Slide 26 text

速度重視のためトランクベースを採用 AWS の公式Doc でも「Gitflow はレガシー」と書かれているため https://docs.aws.amazon.com/prescriptive- guidance/latest/strategy-cicd-litmus/fully- cicd-process-differences.html CI/CD

Slide 27

Slide 27 text

もう少しCloudflare 使っていきたいテストやエミュレートがしづらい npm workspace 辛い（pnpm かbun に移行したい）頻繁な仕様変更に伴うDynamoDB の設計が難しい課題感

Slide 28

Slide 28 text

MVP 開発とサーバーレスは相性抜群 Amplify はライブラリだけ局所的に使うのがおすすめ GraphQL とREST は今後も使い分けていくまとめ