Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

maki
March 15, 2023

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

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

maki

March 15, 2023
Tweet

More Decks by maki

Other Decks in Technology

Transcript

  1. 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
  2. 似た名前のツールがたくさん React - Next.js(フロントエンド) Vue.js - Nuxt.js(フロントエンド) Nest.js (サーバーサイド) #CloudflareUG_cts

    PagesとFunctionつかってGraphQLをSSRするサイトをNext.jsで作りたい / Cloudflare Meetup Sapporo Kick Off! 5
  3. 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
  4. 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
  5. SSR: Server-side rendering 静的な部分はビルド時に生成 一部のデータを動的に生成 本番環境で Node.js | JavaScript が動く必要がある

    #CloudflareUG_cts PagesとFunctionつかってGraphQLをSSRするサイトをNext.jsで作りたい / Cloudflare Meetup Sapporo Kick Off! 10
  6. Next.js with Vercel Next.js 開発元 が運営するクラウドサービス Next.js の全機能が使える チーム開発には向かない料金体系 #CloudflareUG_cts

    PagesとFunctionつかってGraphQLをSSRするサイトをNext.jsで作りたい / Cloudflare Meetup Sapporo Kick Off! 13
  7. 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
  8. 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
  9. 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
  10. 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
  11. 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
  12. 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
  13. 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
  14. 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
  15. 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
  16. なにが嬉しいのか? Serverless より軽量な Edge Runtime できることが限られている分、シンプル スケーラブル 安全なPreview環境へのアクセス 最近増えてきている Serverless

    の Database サービス PostgreSQL REST API, GraphQL よりミニマムスタート&スケーラブル #CloudflareUG_cts PagesとFunctionつかってGraphQLをSSRするサイトをNext.jsで作りたい / Cloudflare Meetup Sapporo Kick Off! 26
  17. 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
  18. 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
  19. ローカルで動作確認 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
  20. ローカルから直接デプロイ 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
  21. 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