Cloudflareで実現！ローカル認証情報不要のMCP

Takaaki Kakei
2025.04.08
こんにちは、@TakaakiKakei です。
AIモデルが外部ツールやAPIと連携するためのプロトコルであるMCP (Model Context Protocol) は非常に便利です。しかし、従来の方法では利用時にローカル環境へ認証情報を保存する必要があり、その管理や展開に手間がかかるという課題がありました。
Cloudflareが提供するツールを活用すれば、この課題を解決し、ローカルに認証情報を持つことなくMCPを利用できる環境を構築できます。
 Cloudflareによる解決策Cloudflareは、リモートで動作するMCPサーバーを構築するためのソリューションを提供しています。詳細は以下の公式ブログ記事で解説されています。
https://blog.cloudflare.com/remote-model-context-protocol-servers-mcp/
従来、MCPは下図のように、ユーザー自身の端末（ローカル環境）で実行されることが一般的でした。そのため、連携に必要な認証情報もローカルに保存する必要がありました。


図1: 従来のローカル環境でのMCP実行
Cloudflareのツールを利用すると、下図のようにCloudflare上にMCPサーバーを構築できます。このサーバーへのアクセス時にOAuth 2.0認証（例: GitHub認証）を要求するように設定することで、ユーザーはローカルに認証情報を持つ必要がなくなります。


図2: Cloudflare上に構築したリモートMCPサーバー
この構成により、以下のようなメリットが期待できます。
セキュリティ向上: ローカルに認証情報を保存する必要がなくなり、情報漏洩のリスクを低減できます。
管理・展開の容易化: 認証情報の一元管理が可能になり、複数ユーザーへの展開が容易になります。
Webアプリケーション化: MCP機能をWebアプリケーションの一部として提供しやすくなります。
 実際に構築してみるCloudflareの公式ドキュメントを参考に、GitHubのOAuth 2.0認証を行うMCPサーバーを実際に構築してみましょう。
https://developers.cloudflare.com/agents/guides/remote-mcp-server/
 1. MCPサーバープロジェクトの作成とデプロイまず、作業用の適切なフォルダに移動し、ターミナルで以下のコマンドを実行してプロジェクトを作成します。
npm create cloudflare@latest -- my-mcp-server-github-auth --template=cloudflare/ai/demos/remote-mcp-github-oauth
途中で You're in an existing git repository. Do you want to use git for version control? と聞かれた場合は Yes を選択します。
Do you want to deploy your application? と聞かれた場合は No を選択します（後ほど手動でデプロイするため）。
これにより、指定したテンプレートを元にした新しいCloudflare Workersプロジェクト (my-mcp-server-github-auth) が作成されます。テンプレートのソースコードは以下で確認できます。
https://github.com/cloudflare/ai/tree/main/demos/remote-mcp-github-oauth


図3: プロジェクト作成時のターミナル画面
作成されたプロジェクトをお好みのエディタで開きます。
次に、OAuth認証のトークンなどを保存するためのCloudflare Workers KVを作成します。ターミナルでプロジェクトディレクトリに移動し、以下のコマンドを実行してください。
cd my-mcp-server-github-auth
wrangler kv namespace create "OAUTH_KV"
コマンドが成功すると、KVのIDが表示されます。このIDをコピーしておきましょう。
🌀 Creating namespace with title "my-mcp-server-github-auth-OAUTH_KV"
✨ Success!
Add the following to your configuration file in your kv_namespaces array:
{
  "kv_namespaces": [
    {
      "binding": "OAUTH_KV",
      "id": "<KV_ID>" # このIDをコピー
    }
  ]
}
エディタで wrangler.jsonc ファイルを開き、kv_namespaces セクションを見つけて、id の値を先ほどコピーしたIDに書き換えます。
// wrangler.jsonc の例
"kv_namespaces": [
    {
        "binding": "OAUTH_KV",
        "id": "<コピーしたKV_ID>" // ここを書き換える
    }
],
最後に、以下のコマンドを実行して、作成したMCPサーバーをCloudflareにデプロイします。
npm run deploy
デプロイが成功すると、Cloudflare WorkersのURL（例: https://my-mcp-server-github-auth.your-account.workers.dev）が表示されます。このURLは後ほど使用するため、メモしておきましょう。
 2. GitHub OAuth Appの作成次に、GitHubでOAuthアプリケーションを作成します。以下のURLにアクセスしてください。
https://github.com/settings/developers


図4: GitHub Developer settings
「OAuth Apps」セクションで「New OAuth App」ボタンをクリックします。
以下の情報を入力します。
Application name: 任意の分かりやすい名前（例: My MCP Server Auth)
Homepage URL: 先ほどメモしたCloudflare WorkersのURL（例: https://my-mcp-server-github-auth.your-account.workers.dev）
Authorization callback URL: Cloudflare WorkersのURLの末尾に /callback を追加したURL（例: https://my-mcp-server-github-auth.your-account.workers.dev/callback）

「Register application」ボタンをクリックします。
作成後、アプリケーションの詳細ページが表示されます。
Client ID: 表示されているClient IDをメモします。
Client secrets: 「Generate a new client secret」ボタンをクリックして新しいシークレットを生成し、表示された値を必ずメモしてください（この値は一度しか表示されません）。
エディタに戻り、ターミナルで以下のコマンドを実行して、メモしたClient IDとClient SecretをCloudflare Workersのシークレットとして安全に保存します。コマンド実行後、それぞれの値を入力するプロンプトが表示されます。
# Client IDを保存
wrangler secret put GITHUB_CLIENT_ID
# プロンプトが表示されたら、メモしたClient IDを入力

# Client Secretを保存
wrangler secret put GITHUB_CLIENT_SECRET
# プロンプトが表示されたら、メモしたClient Secretを入力
これらのシークレットは、デプロイされたWorkerから環境変数として参照できるようになります。
 3. MCP Inspectorで動作確認デプロイしたMCPサーバーに接続して動作を確認してみましょう。今回は、MCPのデバッグツールである MCP inspector を利用します。
ターミナルで以下のコマンドを実行して、MCP inspectorを起動します。
npx @modelcontextprotocol/inspector@latest
起動後、ブラウザでMCP inspectorを開くためのURLが表示されるので、そのURLにアクセスします。


図5: MCP Inspector 起動時のターミナル画面
MCP inspectorの画面で、以下のように設定します。
Transport Type: SSE を選択します。
URL: メモしたCloudflare WorkersのURLの末尾に /sse を追加したURL（例: https://my-mcp-server-github-auth.your-account.workers.dev/sse）


図6: MCP Inspector での接続設定
「Connect」ボタンをクリックします。
すると、GitHubの認証画面にリダイレクトされます。作成したOAuth Appへのアクセス許可を求められるので、「Authorize [アプリケーション名]」ボタンをクリックしてください。


図7: GitHub 認証画面 (1)


図8: GitHub 認証画面 (2)
認証が成功すると、MCP inspectorの画面に戻り、MCPサーバーとの接続が確立されます。
「List Tools」ボタンをクリックすると、このMCPサーバーで現在利用可能なツールの一覧が表示されます。執筆時点のテンプレートでは、以下のツールが定義されています。
add: 2つの数値を加算するツール。
userInfoOctokit: 認証したGitHubアカウントのユーザー情報を取得するツール。
generateImage: 画像生成を行うツール（デフォルトでは無効。コード修正で利用可能になりますが、今回は割愛します）。


図9: 利用可能なツール一覧
addツールを試してみましょう。下図のように入力し、「Run」ボタンをクリックすると、計算結果が表示されます。


図10: add ツールの実行例
次に userInfoOctokit ツールを試します。このツールは、GitHub APIを操作するためのJavaScriptライブラリであるOctokitを利用して、認証したGitHubアカウントのユーザー情報を取得するものです。下図のように入力し、「Run」ボタンをクリックすると、ローカルに認証情報を持たずにGitHubのユーザー情報が取得できることが確認できます。


図11: userInfoOctokit ツールの実行例
これで、ローカルに認証情報を持つことなく、GitHub認証を経由してリモートのMCPサーバーを利用し、GitHub APIも操作することができました。
 4. 補足Cursorなどから利用したい場合は、以下のJSONを設定すると使うことができます。
{
  "mcpServers": {
    "<任意のツール名>": {
      "command": "npx",
      "args": [
        "mcp-remote",
        "<メモしたCloudflare WorkersのURLの末尾に `/sse` を追加したURL>"
      ]
    }
  }
}
簡単にWeb上のMCP Clientから試したい場合は、Cloudflareが用意しているプレイグランドを使うと便利です。
Workers AI LLM Playground


図12: CloudflareのWorkers AI LLM Playground
プレイグランドでは、以下のように設定します。
Model: llama-3.3-70b-instruct-fp8-fast など、MCPに対応しているモデルを選択します。
Enter MCP Server URL: 先ほどメモしたCloudflare WorkersのURLの末尾に /sse を追加したURL（例: https://my-mcp-server-github-auth.your-account.workers.dev/sse）


図13: CloudflareのWorkers AI LLM Playgroundでの設定例
「Connect」ボタンをクリックします。あとは、MCP Inspectorのときと同様に、認証を行うと、接続できるようになります。


図14: CloudflareのWorkers AI LLM Playgroundでの実行例
 まとめCloudflareが提供するツールを利用することで、OAuth認証を組み込んだリモートMCPサーバーを比較的簡単に構築でき、ローカルでの認証情報管理の手間から解放されます。これにより、MCPの活用範囲が大きく広がり、より安全で管理しやすい形でAI連携機能を実装できるようになるでしょう。
今回試したGitHub認証以外にも、他のOAuthプロバイダーに対応させることも可能です。この仕組みは非常に強力であり、例えば自社プロダクト（私の場合はAI-Starter）へのMCP機能追加など、様々な応用が考えられます。ぜひ活用を検討してみてください。
それでは、また。
 更新履歴2024/04/09: Web上のMCP Clientを試したい場合の情報を追加
2024/04/08: KVの作成コマンドと /sse のパスに誤りがあったので修正
2024/04/08: 初版公開