家計簿アプリを作る #9：Cloudflare Pages へのデプロイ

家計簿アプリ作成シリーズの第9回です。今回は Cloudflare Pages へのデプロイを行います。ハマりポイントが多かったので詳しくまとめます。

事前準備：GitHub リポジトリの作成

Cloudflare Pages は GitHub リポジトリと連携してデプロイします。まだリポジトリがない場合は作成します。

git init
git add .
git commit -m "first commit"
git branch -M main
git remote add origin https://github.com/your-username/kakeibo-app.git
git push -u origin main

注意： GitHub でリポジトリを作成する際は README・.gitignore・license の追加チェックを外すこと（既存コードがあるため）。

.gitignore に以下が含まれているか確認します。

.dev.vars
*.db
.wrangler/
node_modules/

Step 1：wrangler.jsonc を設定する

ビルドに必要な設定を wrangler.jsonc に追加します。

{
  "name": "kakeibo-app",
  "compatibility_date": "2026-06-01",
  "compatibility_flags": ["nodejs_compat"],
  "main": ".svelte-kit/cloudflare/entry.js",
  "assets": {
    "directory": ".svelte-kit/cloudflare/_assets",
    "binding": "ASSETS"
  },
  "d1_databases": [
    {
      "binding": "DB",
      "database_name": "kakeibo-app-db",
      "database_id": "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"
    }
  ]
}

ハマりポイント①：assets.directory が必要

npm run build で以下のエラーが出ます。

Error: You must specify the `assets.directory` key in wrangler.jsonc.

assets.directory と assets.binding の両方が必要です。

ハマりポイント②：nodejs_compat フラグが必要

better-auth が node:async_hooks・node:crypto を使用するため、compatibility_flags に nodejs_compat を追加する必要があります。

Step 2：kysely のバージョン問題を解決する

デプロイ時に以下のエラーが出ます。

✘ [ERROR] No matching export in "node_modules/kysely/dist/index.js"
          for import "DEFAULT_MIGRATION_LOCK_TABLE"

原因： kysely@0.28.0 でこれらの定数が公開 API から削除されましたが、@better-auth/kysely-adapter がまだ古い版を前提にしているため起きます。

解決策： package.json の overrides で kysely を 0.27.4 に固定します。

"overrides": {
  "kysely": "0.27.4"
}

注意： dependencies に kysely を直接指定していると以下のエラーが出ます。

npm error code EOVERRIDE
npm error Override for kysely@^0.29.2 conflicts with direct dependency

kysely は dependencies から削除してください。better-auth の依存として自動的にインストールされます。

Step 3：Cloudflare Pages でプロジェクトを作成する

Cloudflare ダッシュボードから Workers & Pages → Create → Pages → Connect to Git を選択します。

GitHub アカウントとの連携で対象リポジトリが表示されない場合は、GitHub App の権限設定でリポジトリへのアクセスを追加してください。

ビルド設定は以下のとおりです。

Step 4：D1 のリモートマイグレーションを適用する

本番環境の D1 にマイグレーションを適用します。

npx wrangler login  # 未ログインの場合
npx wrangler d1 migrations apply kakeibo-app-db --remote

--remote フラグで Cloudflare 上の D1 に適用されます（--local なしで実行すると --remote が必要）。

Step 5：環境変数を設定する

Cloudflare Pages の Settings → Environment variables に以下を追加します。

設定後に再デプロイします。

まとめ

次回は UI のスタイリングを実装します。