SvelteKitアプリをGitHubからCloudflare Workersにデプロイした話

SvelteKitで作ったアプリをGitHubにプッシュし、Cloudflare Workersにデプロイしました。 Cloudflareのダッシュボードが新UIに変わっており、いくつか躓いたポイントがあったので手順と合わせて残しておきます。

全体の流れ

GitHubリポジトリ作成
      ↓
git init → commit → push
      ↓
Cloudflare Workers プロジェクト作成
      ↓
wrangler設定ファイルを追加
      ↓
デプロイ成功

1. GitHubリポジトリの作成

https://github.com/new にアクセスして以下の設定で作成します。

⚠️ 注意： Add README などにチェックを入れると初回pushで競合が発生します。既存のローカルリポジトリをpushする場合はすべてOffにしてください。

2. GitHubへのpush

git init が必要

npx sv create で作成したプロジェクトはgitが初期化されていません。まず git init から始める必要があります。

git init
git add .
git commit -m "first commit"
git remote add origin https://github.com/ユーザー名/sveltekit-blog.git
git branch -M main
git push -u origin main

⚠️ 注意： git init をせずに git remote add を実行すると以下のエラーが出ます。

fatal: not a git repository (or any of the parent directories): .git

GitHub CLIの認証エラー

pushの際に以下のエラーが出る場合があります：

remote: Repository not found.
fatal: repository 'https://github.com/...' not found

GitHub CLIの認証トークンが失効しているのが原因です。以下で再認証してください：

gh auth login

対話形式の質問には以下を選びます：

ブラウザでGitHubの認証を完了したら再度pushしてください。

3. Cloudflare Workersの設定

https://dash.cloudflare.com/ にアクセスして 「Workers & Pages」→「Create」→「Pages」→「Connect to Git」 を選択します。

⚠️ 注意： CloudflareのUIが新しくなり、PagesとWorkersが統合されています。「Workers & Pages」から進んでください。

GitHubとの連携画面では 「Only select repositories」 を選んで必要なリポジトリだけに権限を絞るのがおすすめです。

リポジトリを選択後のビルド設定：

詳細設定から環境変数を設定します：

4. wrangler設定ファイルの追加

Cloudflareの新しいデプロイフロー（npx wrangler deploy）では wrangler.jsonc と worker-configuration.d.ts が必要です。これらがないとデプロイステップで以下のエラーが出ます：

✘ [ERROR] Types file not found at worker-configuration.d.ts.

ローカルで以下を実行してファイルを生成します：

npm install -D wrangler

プロジェクトのルートに wrangler.jsonc を作成します：

{
  "$schema": "node_modules/wrangler/config-schema.json",
  "name": "sveltekit-blog",
  "compatibility_date": "2025-05-14",
  "observability": {
    "enabled": true
  },
  "main": ".svelte-kit/cloudflare/_worker.js",
  "assets": {
    "binding": "ASSETS",
    "directory": ".svelte-kit/cloudflare"
  },
  "compatibility_flags": [
    "nodejs_compat"
  ]
}

⚠️ 注意：compatibility_date は過去の日付にすること

未来の日付にするとデプロイ時に以下のエラーが出ます：

Can't set compatibility date in the future: 2026-05-15 [code: 10021]

compatibility_date には現在より前の日付（例：2025-05-14）を指定してください。

続けて型定義ファイルを生成します：

npx wrangler types

worker-configuration.d.ts が生成されたことを確認してコミット＆プッシュします：

git add .
git commit -m "add wrangler config"
git push

5. デプロイ再試行

Cloudflareのダッシュボードで「ビルドを再試行」を押すとデプロイが成功します。

デプロイが完了すると sveltekit-blog.xxxxx.workers.dev のようなURLでアプリが公開されます。

まとめ：躓いたポイント一覧