Next.js App Router on Cloudflare Workers, d1 構成を試す

✔ Would you like to use TypeScript? … No / Yes
✔ Would you like to use ESLint? … No / Yes
✔ Would you like to use Tailwind CSS? … No / Yes
✔ Would you like to use `src/` directory? … No / Yes
✔ Would you like to use App Router? (recommended) … No / Yes
✔ Would you like to customize the default import alias (@/*)? … No / Yes
✔ What import alias would you like configured? … @/*
# next-on-pages が必要なので eslint を追加しておくのが良さそう
├ Do you want to use the next-on-pages eslint-plugin?
│ yes eslint-plugin
# ここまでできているか確認するのに一応デプロイする
├ Do you want to deploy your application?
│ no deploy via `pnpm run deploy`

export interface Env {
  // If you set another name in wrangler.toml as the value for 'binding',
  // replace "DB" with the variable name you defined.
  DB: D1Database;
}

export default {
  async fetch(request: Request, env: Env) {
    const { pathname } = new URL(request.url);

    if (pathname === "/api/beverages") {
      // If you did not use `DB` as your binding name, change it here
      const { results } = await env.DB.prepare(
        "SELECT * FROM Customers WHERE CompanyName = ?"
      )
        .bind("Bs Beverages")
        .all();
      return Response.json(results);
    }

    return new Response(
      "Call /api/beverages to see everyone who works at Bs Beverages"
    );
  },
};

declare global {
  namespace NodeJS {
    interface ProcessEnv {
      DB: D1Database
    }
  }
}

const getCustomers = async () => {
  const { results } = await env.DB.prepare(
    "SELECT * FROM Customers WHERE CompanyName = ?"
  )
  .bind("Bs Beverages")
  .all()
  return results
}

[[d1_databases]]
binding = "DB" # i.e. available in your Worker on env.DB
database_name = "my-app-db-name"
database_id = "<your-uuid-here>"

$ pnpm wrangler d1 create my-app-preview-db

[[d1_databases]]
binding = "DB" # i.e. available in your Worker on env.DB
database_name = "my-app-db-name"
database_id = "<your-uuid-here>"
preview_database_id = "<your-uuid-here>"

# 本番環境向けの実行: --remote
$ pnpm wrangler d1 execute my-app-db-name --remote --command "SELECT 1;"
 ⛅️ wrangler 3.38.0
-------------------
🌀 Mapping SQL input into an array of statements
🌀 Parsing 1 statements
🌀 Executing on remote database my-app-db-name (xxx):
🌀 To execute on your local development database, remove the --remote flag from your wrangler command.
🚣 Executed 1 commands in 0.2406ms
┌───┐
│ 1 │
├───┤
│ 1 │
└───┘

# プレビュー環境向けの実行: --remote --preview
➜ pnpm wrangler d1 execute my-app-db-name --remote --preview --command "SELECT 1;"
 ⛅️ wrangler 3.38.0
-------------------
🌀 Mapping SQL input into an array of statements
🌀 Parsing 1 statements
🌀 Executing on remote database my-app-db-name (xxx):
🌀 To execute on your local development database, remove the --remote flag from your wrangler command.
🚣 Executed 1 commands in 0.2272ms
┌───┐
│ 1 │
├───┤
│ 1 │
└───┘

# ローカル向けの実行: --local
$ pnpm wrangler d1 execute my-app-db-name --local --command "SELECT 1;" 
 ⛅️ wrangler 3.38.0
-------------------
🌀 Mapping SQL input into an array of statements
🌀 Executing on local database my-app-db-name (xxx) from .wrangler/state/v3/d1:
🌀 To execute on your remote database, add a --remote flag to your wrangler command.
┌───┐
│ 1 │
├───┤
│ 1 │
└───┘

import { setupDevPlatform } from '@cloudflare/next-on-pages/next-dev';

// Here we use the @cloudflare/next-on-pages next-dev module to allow us to use bindings during local development
// (when running the application with `next dev`), for more information see:
// https://github.com/cloudflare/next-on-pages/blob/5712c57ea7/internal-packages/next-dev/README.md
if (process.env.NODE_ENV === 'development') {
  await setupDevPlatform();
}

/** @type {import('next').NextConfig} */
const nextConfig = {};

export default nextConfig;

export default async function Page() {
  const { results } = await process.env.DB.prepare("SELECT 1").all()
  console.log(results)

  return (
    <div></div>
  )
}

# ...
[ { 1: 1 } ]

$ pnpm wrangler d1 migrations create my-app-db-name init
# 適当なマイグレーションを書く
$ cat migrations/0001_init.sql 
-- Migration number: 0001        2024-03-27T16:27:13.355Z
CREATE TABLE "User" (
    "id" TEXT NOT NULL PRIMARY KEY,
    "name" TEXT NOT NULL
);
$ pnpm wrangler d1 migrations apply my-app-db-name --local
 ⛅️ wrangler 3.38.0 (update available 3.39.0)
-------------------------------------------------------
Migrations to be applied:
┌───────────────┐
│ name          │
├───────────────┤
│ 0001_init.sql │
└───────────────┘
✔ About to apply 1 migration(s)
Your database may not be available to serve requests during the migration, continue? … yes
🌀 Mapping SQL input into an array of statements
🌀 Executing on local database my-app-db-name (xxx) from .wrangler/state/v3/d1:
🌀 To execute on your remote database, add a --remote flag to your wrangler command.
┌───────────────┬────────┐
│ name          │ status │
├───────────────┼────────┤
│ 0001_init.sql │ ✅       │
└───────────────┴────────┘

$ ls -al .wrangler/state/v3/d1
total 0
drwxr-xr-x  3 kaito staff  96  3 27 23:46 .
drwxr-xr-x  3 kaito staff  96  3 27 23:46 ..
drwxr-xr-x 11 kaito staff 352  3 28 01:27 miniflare-D1DatabaseObject

datasource db {
  provider = "sqlite"
  url      = env("DATABASE_URL")
}

generator kysely {
  provider     = "prisma-kysely"
  output       = "../src/server/db"
  fileName     = "types.ts"
  enumFileName = "enums.ts"
}

model User {
  id    String @id
  title String @unique

  // relations
  posts  Post[]
}

model Post {
  id     String @id
  userId String
  title  String @unique

  // relations
  user User @relation(fields: [userId], references: [id])
}

// @ts-check
import { readFileSync, writeFileSync } from "node:fs"
import { globSync } from "glob"

const wranglerMigrationDir = "prisma/wrangler-migrations"
/** @see https://developers.cloudflare.com/d1/build-with-d1/d1-client-api/#pragma-statements */
const supportedPragmas = ["table_list", "table_info", "foreign_keys"]

const main = async () => {
  // サポートされていない pragma を削除
  for (const prismaMigrationFile of globSync(
    `./prisma/migrations/*/migration.sql`,
    {
      cwd: process.cwd(),
    }
  )) {
    const newData = readFileSync(prismaMigrationFile, "utf-8").replace(
      new RegExp(`pragma\\s+(?!${supportedPragmas.join("|")})\\w+\\s*;`, "gi"),
      ""
    )

    const migrationName = prismaMigrationFile.split("/")[2] // prisma/migrations/<here>/migration.sql
    const wranglerMigrationFile = `${wranglerMigrationDir}/${migrationName}.sql`

    writeFileSync(wranglerMigrationFile, newData)
  }
}

main().catch(console.error)

[[d1_databases]]
binding = "DB" # i.e. available in your Worker on env.DB
database_name = "my-app-db-name"
database_id = "xxx"
migrations_dir = "prisma/wrangler-migrations"

{
  "scripts": {
    "migrate:generate": "DATABASE_URL=file:./migration-db.sqlite prisma migrate dev && node ./scripts/convert_d1_migrations.mjs",
    "migrate:local": "wrangler d1 migrations apply my-app-db-name --local",
    "migrate:prod": "wrangler d1 migrations apply my-app-db-name --remote",
  }
}

$ mkdir prisma/wrangler-migrations
$ pnpm migrate:generate
> xxx@0.1.0 migrate:generate xxx
> DATABASE_URL=file:./migration-db.sqlite prisma migrate dev && node ./scripts/convert_d1_migrations.mjs

Environment variables loaded from .env
Prisma schema loaded from prisma/schema.prisma
Datasource "db": SQLite database "migration-db.sqlite" at "file:./migration-db.sqlite"

Already in sync, no schema change or pending migration was found.

✔ Generated Kysely types (1.8.0) to ./src/server/db in 101ms

$ pnpm migrate:local   

> xxxt@0.1.0 migrate:local xxx
> wrangler d1 migrations apply my-app-db-name --local

 ⛅️ wrangler 3.37.0 (update available 3.39.0)
-------------------------------------------------------
Migrations to be applied:
┌─────────────────────────┐
│ name                    │
├─────────────────────────┤
│ 20240327171036_init.sql │
└─────────────────────────┘
? About to apply 1 migration(s)
✔ About to apply 1 migration(s)
Your database may not be available to serve requests during the migration, continue? … yes
🌀 Mapping SQL input into an array of statements
🌀 Executing on local database my-app-db-name (xxx) from .wrangler/state/v3/d1:
🌀 To execute on your remote database, add a --remote flag to your wrangler command.
┌─────────────────────────┬────────┐
│ name                    │ status │
├─────────────────────────┼────────┤
│ 20240327171036_init.sql │ ✅       │
└─────────────────────────┴────────┘

$ pnpm migrate:prod

> xxx@0.1.0 migrate:prod xxx
> wrangler d1 migrations apply my-app-db-name --remote

 ⛅️ wrangler 3.37.0 (update available 3.39.0)
-------------------------------------------------------
Migrations to be applied:
┌─────────────────────────┐
│ name                    │
├─────────────────────────┤
│ 20240327171036_init.sql │
└─────────────────────────┘
✔ About to apply 1 migration(s)
Your database may not be available to serve requests during the migration, continue? … yes

🌀 Mapping SQL input into an array of statements
🌀 Parsing 5 statements
🌀 Executing on remote database my-app-db-name (xxx):
🌀 To execute on your local development database, remove the --remote flag from your wrangler command.
🚣 Executed 5 commands in 0.7628ms
┌─────────────────────────┬────────┐
│ name                    │ status │
├─────────────────────────┼────────┤
│ 20240327171036_init.sql │ ✅       │
└─────────────────────────┴────────┘