Closed2

SvelteKit + Cloudflare D1 + DrizzleORMの連携を行う。

ymgnymgn

SvelteKit + D1の準備

wrangler.tomlの[[d1_databases]]に書いたbindingの値をsrc/app.d.tsのPlatform.envに割り当てる。

# wrangler.toml

name = "name"
account_id = "..."

main = "./.cloudflare/worker.js"
site.bucket = "./.cloudflare/public"

build.command = "npm run build"

compatibility_date = "2023-10-11"
workers_dev = true

[[d1_databases]]
binding = "DB"
database_name = "..."
database_id = "..."

// src/app.d.ts

import type { Theme } from "$lib/types";

// See https://kit.svelte.dev/docs/types#app
// for information about these interfaces
declare global {
  namespace App {
    // ...
    interface Platform {
      env: {
        DB: D1Database;
      }
    }
  }
}

export {};

SvelteKit + DrizzleORMの準備

1. packageインストール&設定ファイル追加

npm install drizzle-orm
npm install -D drizzle-kit

package.jsonのscriptsにmigrateを追加する。

"scripts": {
  "dev": "vite dev",
  "build": "vite build",
  "preview": "vite preview",
  ...
  "migrate": "drizzle-kit generate:sqlite"
},

DrizzleORMの設定ファイルをプロジェクトルートに用意する。

import type { Config } from 'drizzle-kit';

export default {
  schema: './src/lib/server/db/schema.ts',
  out: './drizzle',
  breakpoints: true,
} satisfies Config;

2. フロント側のコード用意

Drizzleのインスタンスを生成する用に、lib/server/に2つのファイルを用意する。
schema.tsはテーブル定義。

// lib/server/db/db-client.ts

import { drizzle } from 'drizzle-orm/d1';

export const dbClient = (db: D1Database | undefined) => {
  if (!db) {
    return undefined;
  }
  return drizzle(db);
}

// lib/server/db/schema.ts

import { sql } from 'drizzle-orm';
import { integer, sqliteTable, text } from 'drizzle-orm/sqlite-core';

export const posts = sqliteTable('posts', {
  id: integer('id').primaryKey(),
  title: text('title').notNull(),
  content: text('content').notNull(),
  createdAt: text('created_at')
    .notNull()
    .default(sql`CURRENT_TIMESTAMP`),
  updatedAt: text('updated_at')
    .notNull()
    .default(sql`CURRENT_TIMESTAMP`),
  deletedAt: text('deleted_at')
    .notNull()
    .default(sql`(datetime('1990-12-31 23:59:59'))`),
  isPublished: integer('is_published', { mode: 'boolean' }).notNull().default(true),
});

テーブル作成

schema.tsに書いたテーブル定義をもとにSQLを生成し、D1側にテーブルやレコードを作成する。

npm run migrate

wrangler d1 table_name execute -- file [npm run migrateで生成されたSQLファイルのパス]

ビルド起動＆Cloudflare Workersへデプロイ

# Dev環境起動
wrangler dev

# デプロイ
wrangler deploy
このスクラップは2023/11/13にクローズされました