Cloudflare D1をローカル開発環境でエミュレートする

完全なる作業メモです。

ローカルで既存サーバー（next.jsやviteなど）を使う必要がない場合

wranglerをインストールして、wranglerサーバーで開発する。
一番カンタン。

ローカルで既存サーバーを使っている場合

既にviteなどのサーバーを使っていて、wranglerサーバーを採用できないケースです。その場合は、miniflareのエミューレーション機能を使います。
wranglerがcloudflare開発の全般的な機能(プロジェクト管理、開発エミュレート、デプロイなど)を有しているのに対し、miniflareは各種サービス(D1やkeyvalueなど)のエミュレート機能だけに限定されるようです。

miniflareインストール

npm install --save-dev miniflare

wrangler.tomlの作成

[[d1_databases]]
binding = "DB"
database_name = "YOUR_DATABASE_NAME"
database_id = "your-database-id"

miniflareの実行

npx wrangler dev --local --persist

FWがCloudflare機能を提供している場合も

SvelteKitやAstroには、Cloudflareのアダプタが用意されており、その場合はminiflareをインストールする必要はないようです。SvelteKitはViteサーバーで動いているため、自分の場合はかなり混乱しました。以下はSvelteKitの例です。

アダプターインストール

npm install -D @cloudflare/workers-types

src/app.d.tsファイルを編集し、D1の型定義を追加

declare global {
  namespace App {
    interface Platform {
      env: {
        DB: D1Database;
      };
    }
  }
}
export {};

wrangler.tomlの作成

[[d1_databases]]
binding = "DB"
database_name = "YOUR_DATABASE_NAME"
database_id = "your-database-id"

D1を利用する

基本的には読み込むだけで利用できる

import type { D1Database } from '@cloudflare/workers-types'