PagesとFunctionつかってGraphQLをSSRするサイトをNext.jsで作りたい

Cloudflare Meetup Sapporo Kick Off!
https://cfm-cts.connpass.com/event/272777/

Transcript

1. PagesとFunctionつかってGraphQLをSSR するサイトをNext.jsで作りたい Cloudflare Meetup Sapporo Kick Off! 2023-03-15 株式会社ゆめみ 藤原麻希 1
2. About me maki マキ 札幌生まれ札幌育ち、札幌でフルリモートワーク #CloudflareUG_cts PagesとFunctionつかってGraphQLをSSRするサイトをNext.jsで作りたい / Cloudflare Meetup Sapporo Kick Off! 2
3. Background Web系 サーバーサイドエンジニア PHP PHP / Laravel JSON入出力までが守備範囲 AWS CDK TypeScript DevOps YAMLエンジニア #CloudflareUG_cts PagesとFunctionつかってGraphQLをSSRするサイトをNext.jsで作りたい / Cloudflare Meetup Sapporo Kick Off! 3
4. Next.js React をベースにした Rendering Framework Vercel社が開発 #CloudflareUG_cts PagesとFunctionつかってGraphQLをSSRするサイトをNext.jsで作りたい / Cloudflare Meetup Sapporo Kick Off! 4
5. 似た名前のツールがたくさん React - Next.js（フロントエンド） Vue.js - Nuxt.js（フロントエンド） Nest.js (サーバーサイド) #CloudflareUG_cts PagesとFunctionつかってGraphQLをSSRするサイトをNext.jsで作りたい / Cloudflare Meetup Sapporo Kick Off! 5
6. Motivation Webサイトを作りたい 社内では新規案件で標準採用されている Next.js をキャッチアップ 外部API呼び出し 自分でガッツリAPIは作りたくない DBのデータ表示 秘匿情報は安全に管理 #CloudflareUG_cts PagesとFunctionつかってGraphQLをSSRするサイトをNext.jsで作りたい / Cloudflare Meetup Sapporo Kick Off! 6
7. Next.js x レンダリング方法 CSR: Client-side rendering SSR: Server-side rendering ISR: Incremental Static Regeneration SSG: Static-site generation #CloudflareUG_cts PagesとFunctionつかってGraphQLをSSRするサイトをNext.jsで作りたい / Cloudflare Meetup Sapporo Kick Off! 7
8. CSR: Client-side rendering SPA (Single Page Application) webブラウザでJavaScriptでHTTPリクエストを投げるなど 配信はwebサーバー(+CDN) #CloudflareUG_cts PagesとFunctionつかってGraphQLをSSRするサイトをNext.jsで作りたい / Cloudflare Meetup Sapporo Kick Off! 8
9. SSG: Static-site generation ビルド時にDBや外部APIにアクセスしてデータ収集 *.html を生成する ビルド環境のみNode.jsが動けば良い webサーバーから配信(+CDN) #CloudflareUG_cts PagesとFunctionつかってGraphQLをSSRするサイトをNext.jsで作りたい / Cloudflare Meetup Sapporo Kick Off! 9
10. SSR: Server-side rendering 静的な部分はビルド時に生成 一部のデータを動的に生成 本番環境で Node.js | JavaScript が動く必要がある #CloudflareUG_cts PagesとFunctionつかってGraphQLをSSRするサイトをNext.jsで作りたい / Cloudflare Meetup Sapporo Kick Off! 10
11. ISR: Incremental Static Regeneration SSR + Cache キャッシュ期限が切れても一旦古い情報が返る 新しい情報を取得でき次第、表示を差し替える #CloudflareUG_cts PagesとFunctionつかってGraphQLをSSRするサイトをNext.jsで作りたい / Cloudflare Meetup Sapporo Kick Off! 11
12. #CloudflareUG_cts PagesとFunctionつかってGraphQLをSSRするサイトをNext.jsで作りたい / Cloudflare Meetup Sapporo Kick Off! 12
13. Next.js with Vercel Next.js 開発元 が運営するクラウドサービス Next.js の全機能が使える チーム開発には向かない料金体系 #CloudflareUG_cts PagesとFunctionつかってGraphQLをSSRするサイトをNext.jsで作りたい / Cloudflare Meetup Sapporo Kick Off! 13
14. Next.js with AWS EC2, ECS, EKS, Lightsail, ElasticBeanstalk, App Runner ＋ Node.js AWS Amplify Next.js 12 & 13 一部未対応の機能あり サーバーレス環境 Amazon S3: オブジェクトストレージ Amazon CloudFront: CDN Amazon Lambda (Lambda@Edge): 動的ルーティングに必要 バージニアリージョンにデプロイ #CloudflareUG_cts PagesとFunctionつかってGraphQLをSSRするサイトをNext.jsで作りたい / Cloudflare Meetup Sapporo Kick Off! 14
15. Next.js with Cloudflare Cloudflare Pages #CloudflareUG_cts PagesとFunctionつかってGraphQLをSSRするサイトをNext.jsで作りたい / Cloudflare Meetup Sapporo Kick Off! 15
16. 半年ほど前まで すでにSSRは可能ではあった staticなファイル(HTML,CSS,画像)はPages アクセスに応じてスクリプトを動かす部分はWorkers(Edge) #CloudflareUG_cts PagesとFunctionつかってGraphQLをSSRするサイトをNext.jsで作りたい / Cloudflare Meetup Sapporo Kick Off! 16
17. Functions 登場 2022/11 Pages Pages Functions allows you to build full-stack applications by executing code on the Cloudflare network with Cloudflare Workers. https://developers.cloudflare.com/pages/platform/functions/ #CloudflareUG_cts PagesとFunctionつかってGraphQLをSSRするサイトをNext.jsで作りたい / Cloudflare Meetup Sapporo Kick Off! 17
18. Writing your Functions files in the /functions directory will automatically generate a Worker with custom functionality at predesignated routes. /functions ディレクトリにfunctionsを書くと、自動的にWorkerが作られる #CloudflareUG_cts PagesとFunctionつかってGraphQLをSSRするサイトをNext.jsで作りたい / Cloudflare Meetup Sapporo Kick Off! 18
19. Bindings KV Key-Value store Durable Object R2 Object Storage D1 Databases Environment variables Secrets etc #CloudflareUG_cts PagesとFunctionつかってGraphQLをSSRするサイトをNext.jsで作りたい / Cloudflare Meetup Sapporo Kick Off! 19
20. サンプルコード #CloudflareUG_cts PagesとFunctionつかってGraphQLをSSRするサイトをNext.jsで作りたい / Cloudflare Meetup Sapporo Kick Off! 20
21. Confiture the project To use the Edge Runtime next.config.js /** @type {import('next').NextConfig} */ const nextConfig = { reactStrictMode: true, experimental: { runtime: 'experimental-edge', } } module.exports = nextConfig 個別ページで設定することも可能 #CloudflareUG_cts PagesとFunctionつかってGraphQLをSSRするサイトをNext.jsで作りたい / Cloudflare Meetup Sapporo Kick Off! 21
22. sample code (1) export default function post({ post }) { return ( <div> <h1>POST id: {post.id}</h1> <h2>{post.title}</h2> <p>{post.body}</p> </div> ); } #CloudflareUG_cts PagesとFunctionつかってGraphQLをSSRするサイトをNext.jsで作りたい / Cloudflare Meetup Sapporo Kick Off! 22
23. sample code (2) getServerSideProps import {GetServerSideProps} from "next"; export const getServerSideProps: GetServerSideProps = async (context) => { const id = context.params["post"]; const res = await fetch(`https://jsonplaceholder.typicode.com/posts/${id}`, { headers: { "api-key": "thisapikeyissecret", } }); const post = await res.json(); return { props: { post } }; }; #CloudflareUG_cts PagesとFunctionつかってGraphQLをSSRするサイトをNext.jsで作りたい / Cloudflare Meetup Sapporo Kick Off! 23
24. sample code (2) getServerSideProps import {GetServerSideProps} from "next"; export const getServerSideProps: GetServerSideProps = async (context) => { const id = context.params["post"]; const res = await fetch(`https://jsonplaceholder.typicode.com/posts/${id}`, { headers: { "api-key": process.env.API_KEY, } }); const post = await res.json(); return { props: { post } }; }; #CloudflareUG_cts PagesとFunctionつかってGraphQLをSSRするサイトをNext.jsで作りたい / Cloudflare Meetup Sapporo Kick Off! 24
25. Bindings KV Key-Value store Durable Object R2 Object Storage D1 Databases Environment variables Secrets etc #CloudflareUG_cts PagesとFunctionつかってGraphQLをSSRするサイトをNext.jsで作りたい / Cloudflare Meetup Sapporo Kick Off! 25
26. なにが嬉しいのか？ Serverless より軽量な Edge Runtime できることが限られている分、シンプル スケーラブル 安全なPreview環境へのアクセス 最近増えてきている Serverless の Database サービス PostgreSQL REST API, GraphQL よりミニマムスタート＆スケーラブル #CloudflareUG_cts PagesとFunctionつかってGraphQLをSSRするサイトをNext.jsで作りたい / Cloudflare Meetup Sapporo Kick Off! 26
27. 付録 #CloudflareUG_cts PagesとFunctionつかってGraphQLをSSRするサイトをNext.jsで作りたい / Cloudflare Meetup Sapporo Kick Off! 27
28. Cloudflare にデプロイする方法 package追加 npm install -D @cloudflare/next-on-pages vercel #CloudflareUG_cts PagesとFunctionつかってGraphQLをSSRするサイトをNext.jsで作りたい / Cloudflare Meetup Sapporo Kick Off! 28
29. next.config.js next.config.js にruntimeの指定を追加 個別ページでの指定も可能 /** @type {import('next').NextConfig} */ const nextConfig = { reactStrictMode: true, experimental: { runtime: 'edge', } } module.exports = nextConfig #CloudflareUG_cts PagesとFunctionつかってGraphQLをSSRするサイトをNext.jsで作りたい / Cloudflare Meetup Sapporo Kick Off! 29
30. TypeScript @cloudflare/workers-types@latest tsconfig.js "compilerOptions": { "target": "esnext", "module": "esnext", "lib": ["esnext"], "types": ["@cloudflare/workers-types"] } } #CloudflareUG_cts PagesとFunctionつかってGraphQLをSSRするサイトをNext.jsで作りたい / Cloudflare Meetup Sapporo Kick Off! 30
31. ローカルで動作確認 wrangler pages dev -- npm run dev 解説 ローカルで Pages の Functions を動かす npm run dev で動くNext.jsをProxyする #CloudflareUG_cts PagesとFunctionつかってGraphQLをSSRするサイトをNext.jsで作りたい / Cloudflare Meetup Sapporo Kick Off! 31
32. ローカルから直接デプロイ Build npx @cloudflare/next-on-pages --experimental-minify Publish wrangler pages publish .vercel/output/static https://github.com/cloudflare/pages-action #CloudflareUG_cts PagesとFunctionつかってGraphQLをSSRするサイトをNext.jsで作りたい / Cloudflare Meetup Sapporo Kick Off! 32
33. GitHub Actions # Run a build step here if your project requires - uses: cloudflare/pages-action@1 with: accountId: ${{ vars.CLOUDFLARE_ACCOUNT_ID }} apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }} projectName: ${{ vars.CLOUDFLARE_PROJECT_NAME }} directory: ".vercel/output/static" gitHubToken: ${{ secrets.GITHUB_TOKEN }} https://github.com/cloudflare/next-on-pages #CloudflareUG_cts PagesとFunctionつかってGraphQLをSSRするサイトをNext.jsで作りたい / Cloudflare Meetup Sapporo Kick Off! 33
34. Git連携デプロイ 事前に連携しておいたGitリポジトリ（現在GitHubのみ） Frameworkごとにビルドコマンドとdistディレクトリの指定 pushすると自動デプロイ CIが必要なければ一番お手軽で始めやすい #CloudflareUG_cts PagesとFunctionつかってGraphQLをSSRするサイトをNext.jsで作りたい / Cloudflare Meetup Sapporo Kick Off! 34
35. Pages Docs Deploy a Next.js site https://developers.cloudflare.com/pages/framework-guides/deploy-a-nextjs-site/ #CloudflareUG_cts PagesとFunctionつかってGraphQLをSSRするサイトをNext.jsで作りたい / Cloudflare Meetup Sapporo Kick Off! 35
36. 参考ページ Cloudflare PagesにNext.jsをデプロイするとSSRが動作するようになったのでどうやって実 現されたのかを調べた https://zenn.dev/laiso/articles/c086dd115f5d4e @cloudflare/next-on-pagesというビルドツールが新規に開発されNext.jsプロジェクト を解析して _worker.js とCloudflare Workersにデプロイする各エンドポイントを生成し てくれるようになった。 #CloudflareUG_cts PagesとFunctionつかってGraphQLをSSRするサイトをNext.jsで作りたい / Cloudflare Meetup Sapporo Kick Off! 36