Localflare：Cloudflare Workers 用実践的ローカルダッシュボード

Cloudflare Workers をビジュアルインターフェースなしでデバッグするのに疲れていませんか？Localflare は、コードを変更せずに D1 データベース、KV 名前空間、R2 バケットなど Workers 内で動作する全てをリアルタイムで可視化できる 設定不要のダッシュボード を提供します。

Localflare とは？

Localflare は CLI ツール で、軽量な API ワーカーと合わせてローカルワーカーを起動します。API は studio.localflare.dev にホストされる直感的な React ダッシュボードを提供します。ワーカーが http://localhost:8787 で稼働していると、ダッシュボードは自動で wrangler.toml を検出し、__localflare/* で API を起動し、次の要素へワンクリックでアクセスできます：

• D1 Database Studio – 完全な SQL エディタ、インライン編集、バルク操作、ダミーデータ生成。
• KV Browser – キー・バリュー対の表示・編集・削除。
• R2 File Manager – 物件のアップロード、ダウンロード、管理。
• Queue Inspector – テストメッセージの送信とキュー状態の確認。
• Durable Objects – インスタンス状態の検査とリクエスト送信。
• Service Bindings – 自動プロキシ。

SDK もコード修正も不要 – プロジェクトフォルダで localflare を実行するだけです。

クイックスタートガイド

1. Workers プロジェクトに移動：

   cd /path/to/your-worker
   

2. Localflare をグローバルにインストール（npx も可）：

   npm i -g localflare
   # または
   pnpm add -g localflare
   

3. Localflare を実行：

   localflare
   

   *Localflare は次を行います：
4. wrangler.toml を読み込みます
5. http://localhost:8787 でワーカーを起動します
6. https://studio.localflare.dev でダッシュボードを開きます

コマンドラインのみ（ブラウザ自動開閉なし）を好む場合は：

localflare --no-open

ポートのカスタマイズ

localflare --port 9000

Wrangler オプションを直接渡す

特定環境を実行したい、環境変数を設定したい場合は -- を使って引数を転送します：

localflare -- --env staging
localflare -- --var API_KEY:secret

localflare --port 9000 -- --env production --remote

アタッチモード – Next.js、Remix、その他フレームワークに最適

開発スタックが別サーバーを起動する場合（例：pnpm dev）、Localflare は既存プロセスに アタッチ してバインディングを共有します。

1. ターミナル 1 – 開発サーバー起動

   pnpm dev   # または opennext dev、nuxt dev 等
   

2. ターミナル 2 – Localflare API 起動

   localflare attach
   

API は http://localhost:8788 でリッスンします。API ポートを変更したい場合は：

localflare attach --port 9000

ブラウザトラブルシューティング

現代のブラウザは studio.localflare.dev から localhost:8787 への接続をブロックすることがあります。解除方法は以下の通りです：

Chrome / Chromium – サイト情報ダイアログで ローカルネットワークアクセス を有効にし、リフレッシュ。

Safari / Brave – mkcert をインストールしローカル CA を生成してブラウザを再起動。

Brave 代替 – studio.localflare.dev の Shields をオフに。

サポートバインディング一覧

上記全ての機能は 設定不要 で即利用可能です。

なぜ Localflare なのか？

• ゼロ・コンフィグ – 自動で wrangler.toml を読み込みます。
• リアルなバインディング – モックなしで本番と同じデータを取得。
• クロスフレームワーク – Next.js、Remix、Nuxt、Astro、SvelteKit、素の Workers で動作。
• 開発者フレンドリー – インライン編集、ダミーデータ生成、SQL エディタ、ドラッグ＆ドロップアップロード。
• オープンソース – MIT ライセンスでコミュニティ主導。プロジェクトを存続させるためのスポンサーをご検討ください。

ヘルプと貢献

• ドキュメント：https://github.com/rohanprasadofficial/localflare
• GitHub Issues：バグや機能リクエストを提出。
• スポンサー：https://buy.stripe.com/9AQ8e7l6f2aG4g6gII（任意ですが歓迎）

総括

Localflare は Workers 開発における大きな摩擦点を解消します。ローカルでコードを走らせながら、すべてのバインドリソースを検査・編集・テストできます。素早いセットアップと堅牢な機能セット、そして Cloudflare Workers を扱うすべての開発者に最適です。

試してみませんか？リポジトリをクローンし、CLI をインストールしてローカルダッシュボードを数秒で稼働させてみましょう。ハッピーコーディング！