Building a Remote MCP Server on Cloudflare (Without Auth)

Cloudflare でリモート MCP サーバーを構築する（認証なし）

この例では、認証不要のリモート MCP サーバーを Cloudflare Workers にデプロイできます。

はじめに：

これにより、次のような URL に MCP サーバーがデプロイされます：remote-mcp-server-authless.<your-account>.workers.dev/sse

または、以下のコマンドラインを使って、ローカルマシン上にリモート MCP サーバーを作成できます：

npm create cloudflare@latest -- my-mcp-server --template=cloudflare/ai/demos/remote-mcp-authless

独自の Cloudflare Worker へのデプロイ

ワンクリックデプロイボタンを使う代わりに、このリポジトリをクローンして、Cloudflare アカウントに手動でデプロイできます。

1. リポジトリをクローンします：

   git clone <repository-url>
   cd <repository-directory>
   

2. 依存関係をインストールします：

   npm install
   

3. Cloudflare にログインします：

   npx wrangler login
   

4. デプロイします：

   npx wrangler deploy
   

   このコマンドで Worker がビルドされ、デプロイされます。Wrangler から、Worker のデプロイ先 URL（例：my-mcp-server.<your-account>.workers.dev/sse）が通知されます。

シークレット（API キー）の管理

カスタムツールで API キーなどのシークレットが必要な場合は、安全に設定する必要があります。

本番環境のシークレット（Cloudflare Dashboard/Wrangler）

デプロイ済みの Worker では、Cloudflare のシークレット管理機能を使用します：

1. Wrangler を使用する場合：

   npx wrangler secret put YOUR_SECRET_NAME
   

   Wrangler からシークレット値の入力を求められます。この値は暗号化されて安全に保存され、Worker のコードのみがアクセスできます。

2. Cloudflare Dashboard を使用する場合： Cloudflare ダッシュボードで Worker を開き、Settings -> Variables -> Environment Variables -> Add Variable に移動します。安全に保存するには、必ず「Encrypt」をクリックしてください。

ローカル開発用シークレット（.dev.vars）

npx wrangler dev を使ったローカルテストでは、プロジェクトディレクトリのルートに .dev.vars という名前のファイルを作成します。このファイルを Git にコミットしないでください。 次のように、このファイルにシークレットを追加します：

# .dev.vars - For local development only!
YOUR_SECRET_NAME="your_secret_value_here"
ANOTHER_SECRET="another_value"

コードでのシークレットへのアクセス

src/index.ts などの TypeScript ファイルでは、fetch ハンドラーに渡される env オブジェクト経由でシークレットにアクセスできます。また、初期化時に env オブジェクトを渡す場合は、init() メソッド内でもアクセスできます：

// Example in src/index.ts
export default {
  async fetch(
    request: Request,
    env: Env,
    ctx: ExecutionContext
  ): Promise<Response> {
    // Access secrets like this:
    const apiKey = env.YOUR_SECRET_NAME;
    // ... rest of your code
  },
};

// Example structure if you need env in init()
class MyMCPImplementation {
  server: MCP;
  env: Env; // Store env if needed

  constructor(env: Env) {
    this.env = env;
    this.server = new MCP();
    this.init();
  }

  init() {
    // Access secrets here:
    const apiKey = this.env.YOUR_SECRET_NAME;

    // Define tools using the secrets if necessary
    this.server.tool(/* ... */);
  }
  // ... rest of the class
}

export default {
  async fetch(
    request: Request,
    env: Env,
    ctx: ExecutionContext
  ): Promise<Response> {
    const mcpImplementation = new MyMCPImplementation(env);
    return mcpImplementation.server.handle(request);
  },
};

// Define the Env interface (if not already defined)
interface Env {
  YOUR_SECRET_NAME: string;
  ANOTHER_SECRET: string;
  // Add other secrets/bindings here
}

通常は src/index.ts にある Env インターフェースで、シークレットの型を定義することを忘れないでください。

MCP サーバーのカスタマイズ

MCP サーバーに独自のツールを追加するには、src/index.ts の init() メソッド内で this.server.tool(...) を使って各ツールを定義します。

Cloudflare AI Playground に接続する

リモート MCP クライアントである Cloudflare AI Playground から、MCP サーバーに接続できます：

1. https://playground.ai.cloudflare.com/ にアクセスします
2. デプロイした MCP サーバーの URL（remote-mcp-server-authless.<your-account>.workers.dev/sse）を入力します
3. これで、Playground から MCP ツールを直接使用できます！

Claude Desktop を MCP サーバーに接続する

mcp-remote プロキシを使うと、ローカルの MCP クライアントからリモート MCP サーバーに接続することもできます。

Claude Desktop から MCP サーバーに接続するには、Anthropic のクイックスタートに従い、Claude Desktop で Settings > Developer > Edit Config に移動します。

次の設定を追加します：

{
  "mcpServers": {
    "calculator": {
      "command": "npx",
      "args": [
        "mcp-remote",
        "http://localhost:8787/sse" // or remote-mcp-server-authless.your-account.workers.dev/sse
      ]
    }
  }
}

Claude を再起動すると、ツールが利用可能になります。