# Cloudflare + Honoで作る最速リモートMCPサーバー
リモートMCPサーバー、思ったより簡単にデプロイできます。
この記事では、Cloudflare WorkersとHonoを使って、5分でMCPサーバーを公開する方法を紹介します。
## なぜ Cloudflare + Hono？
| 技術 | メリット |
|------|----------|
| **Cloudflare Workers** | 無料枠で十分、設定ファイル1つでデプロイ、世界中のエッジで高速レスポンス |
| **Hono** | 軽量・高速、Cloudflare最適化済み、`@hono/mcp`でMCP対応が簡単 |
サーバー管理不要、コマンド1つでデプロイ。個人開発に最適な組み合わせです。
## アーキテクチャ
Claude DesktopなどのMCPクライアントから、Streamable HTTP経由でCloudflare Workers上のサーバーにリクエストが届きます。
サーバー内部は3層構成:
1. **Hono** - HTTPリクエストを受け取るWebフレームワーク
2. **@hono/mcp** - MCPプロトコルを処理するミドルウェア
3. **factorizeツール** - 実際のビジネスロジック（素因数分解）
たった1ファイル、約50行で完結するシンプルな構成です。
（図）
<!--
📊 図1: システム構成図
■ 図作成プロンプト:
技術ブログ用のシステム構成図を作成してください。
【構成要素】
- 左側: 「Claude Desktop」（PCアイコンまたはチャットアイコン）
- 中央: 「Cloudflare Workers」（オレンジ色の雲または六角形のロゴ風）
- 中央の内部に3層構造:
1. Hono（炎のアイコン、フレームワーク層）
2. @hono/mcp（MCPプロトコル層）
3. factorize ツール（計算機アイコン、ビジネスロジック層）
- 左から右へ「Streamable HTTP」と書かれた矢印で接続
【スタイル】
- フラットデザイン、モダンな技術ブログ風
- 背景: 白または薄いグレー
- 配色: Cloudflareオレンジ(#F6821F)、Honoの炎(#FF6B35)をアクセントに
- 角丸の四角形でコンポーネントを表現
- 日本語ラベル、フォントはゴシック体
- サイズ: 横長（16:9程度）、ブログ記事に埋め込みやすいサイズ
-->
## 作るもの
素因数分解ツールを提供するMCPサーバーです。
```
12 → [2, 2, 3]（割り算3回）
```
## 前提条件
- Node.js v18以上
- Cloudflareアカウント（無料）
## セットアップ
```bash
mkdir simple-mcp-server && cd simple-mcp-server
npm init -y
npm install hono @hono/mcp @modelcontextprotocol/sdk zod
npm install -D wrangler typescript @cloudflare/workers-types
```
## wrangler.toml
```toml
name = "simple-mcp-server"
main = "src/index.ts"
compatibility_date = "2024-01-01"
```
## tsconfig.json
```json
{
"compilerOptions": {
"target": "ES2022",
"module": "ESNext",
"moduleResolution": "bundler",
"strict": true,
"types": ["@cloudflare/workers-types"]
},
"include": ["src/**/*"]
}
```
## src/index.ts
```typescript
import { Hono } from "hono";
import { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js";
import { createMcpHandler } from "@hono/mcp";
import { z } from "zod";
const app = new Hono();
// 素因数分解
function factorize(n: number): { factors: number[]; divisionCount: number } {
if (n === 1) return { factors: [1], divisionCount: 0 };
const factors: number[] = [];
let remaining = n;
let count = 0;
while (remaining % 2 === 0) {
factors.push(2);
remaining /= 2;
count++;
}
let d = 3;
while (d * d <= remaining) {
while (remaining % d === 0) {
factors.push(d);
remaining /= d;
count++;
}
d += 2;
}
if (remaining > 1) factors.push(remaining);
return { factors, divisionCount: count };
}
// MCPサーバー設定
const server = new McpServer({ name: "simple-mcp-server", version: "1.0.0" });
server.tool(
"factorize",
"正の整数を素因数分解します",
{ number: z.number().int().min(1).max(999999999999999) },
async ({ number }) => {
const { factors, divisionCount } = factorize(number);
return {
content: [
{
type: "text" as const,
text: `${number}の素因数分解結果:\n素因数: [${factors.join(", ")}]\n割り算回数: ${divisionCount}回`,
},
],
};
}
);
// MCPエンドポイント
app.all("/mcp", createMcpHandler(server));
export default app;
```
## ローカルで動かす
```bash
npx wrangler dev
```
`http://localhost:8787/mcp` でMCPサーバーが起動します。
## デプロイ
```bash
npx wrangler deploy
```
これだけです。URLが発行されるので、MCPクライアントから接続できます。
（図）
<!--
📊 図2: デプロイフロー図
■ 図作成プロンプト:
技術ブログ用の開発・デプロイフロー図を作成してください。
【構成要素】
- 左側: 「ローカル開発環境」（ノートPCアイコン、コードエディタのイメージ）
- 中央から2つの矢印が分岐:
- 上の矢印: 「npx wrangler dev」のラベル付き
→ 「localhost:8787」（ブラウザアイコン、開発中を示す点線の枠）
- 下の矢印: 「npx wrangler deploy」のラベル付き
→ 「Cloudflare Edge」（世界地図上に複数のエッジサーバーを示す点）
→ 「https://xxx.workers.dev」（URLとグローブアイコン）
【フロー説明テキスト（図中に含める）】
- 上のフロー: 「開発時」
- 下のフロー: 「本番デプロイ」
【スタイル】
- フラットデザイン、モダンな技術ブログ風
- 背景: 白または薄いグレー
- 開発フローは青系（#3B82F6）、デプロイフローはオレンジ系（#F6821F）で色分け
- 矢印は太めで視認性を高く
- 日本語ラベル、フォントはゴシック体
- サイズ: 横長（16:9程度）
-->
## Claude Desktopから接続
`~/Library/Application Support/Claude/claude_desktop_config.json`:
```json
{
"mcpServers": {
"simple-mcp-server": {
"url": "https://your-worker.your-subdomain.workers.dev/mcp"
}
}
}
```
（図）
<!--
📊 図3: 動作イメージ（チャットUI）
■ 図作成プロンプト:
技術ブログ用のチャットUI動作イメージ図を作成してください。
【画面構成】
Claude Desktopのチャット画面を模したモックアップ。以下の会話を表示:
1. ユーザーメッセージ（右寄せ、薄い青の吹き出し）:
「12を素因数分解して」
2. AIメッセージ（左寄せ、薄いグレーの吹き出し）:
「factorizeツールを使用します...」
3. ツール実行結果（AIメッセージ内、コードブロック風の枠）:
```
12の素因数分解結果:
素因数: [2, 2, 3]
割り算回数: 3回
```
4. AIメッセージ続き:
「12は 2×2×3 に分解されました。」
【UI要素】
- 画面上部: 「Claude」のロゴまたはタイトルバー
- 画面下部: メッセージ入力欄（「メッセージを入力...」プレースホルダー）
- ツール使用を示すアイコン（歯車または工具アイコン）を2のメッセージに付ける
【スタイル】
- macOSのウィンドウ風（左上に赤黄緑の丸ボタン）
- 背景: 白
- 吹き出し: 角丸、影付き
- フォント: システムフォント風、日本語
- サイズ: 縦長（9:16程度）または正方形、スマホ画面を意識
-->
## まとめ
- Cloudflare Workers + Hono + @hono/mcp で最小構成のMCPサーバー
- 認証なしのシンプルな構成（本番では認証を追加推奨）
- 無料枠で十分動作
## 次のステップへ
この実装はあえてシンプルにしています。ここから発展させて、あなただけのMCPサーバーを作ってみてください。
**発展アイデア:**
| やりたいこと | 実装のヒント |
|-------------|-------------|
| 認証を追加 | Honoの`bearerAuth`ミドルウェア、またはCloudflare Access |
| データを保存 | Cloudflare KV、D1（SQLite）、R2（オブジェクトストレージ） |
| 外部APIと連携 | 天気API、翻訳API、ニュースAPIなどを呼び出すツール |
| 複数ツールを追加 | フィボナッチ、素数判定、単位変換など |
MCPサーバーは「AIに新しい能力を与える」仕組みです。
自分の業務やホビーに合わせたツールを作れば、Claudeがあなた専用のアシスタントになります。
リポジトリ: [GitHub](https://github.com/your-username/simple-mcp-server)
