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

2023/09/23に開催されたServerlessDays Tokyo 2023で登壇した資料です

Transcript

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

   View Slide

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

   View Slide

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

   View Slide

4. アーキテクチャー図
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

22. 開発プロセスについて
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide