Remote MCP Server On Cloudflare Q3y

🚀 Cloudflare上でのリモートMCPサーバーの運用

Cloudflare Workers上で動作するリモートMCPサーバーを構築し、OAuthログイン機能を統合しましょう！

🚀 クイックスタート

ローカル開発

# リポジトリをクローン
git clone git@github.com:cloudflare/ai.git

# 依存関係をインストール
cd ai
npm install

# ローカルサービスを起動
npx nx dev remote-mcp-server

ブラウザでhttp://localhost:8787/を開くことができるはずです。

MCPチェッカーをサーバーに接続する

新しいMCP APIを探索するには、MCPチェッカーを使用できます。

• 以下のコマンドで起動します：npx @modelcontextprotocol/inspector
• チェッカーで、転送タイプをSSEに切り替え、URLにhttp://localhost:8787/sseを入力してMCPサーバーに接続し、「接続」をクリックします。
• （模擬）ユーザーパスワードログイン画面にリダイレクトされます。任意のメールアドレスとパスワードを入力してログインします。
• ログインに成功すると、MCPチェッカーに戻り、定義されたすべてのツールを一覧表示して呼び出すことができます！

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

MCPチェッカーは強力なツールですが、実際にはClaudeと接続したいです！Anthropicのクイックスタートガイドに従って、Claude Desktopで設定 > 開発者 > 設定ファイルの編集を選択して、設定ファイルを見つけます。 テキストエディタでそのファイルを開き、以下の内容に置き換えます：

{
  "mcpServers": {
    "math": {
      "command": "npx",
      "args": [
        "mcp-remote",
        "http://localhost:8787/sse"
      ]
    }
  }
}

これにより、ClaudeがHTTPを介してMCPサーバーと通信できるようになるローカルプロキシが実行されます。 Claudeを開くと、ブラウザウィンドウが開き、ログインできるようになります。右下に使用可能なツールが表示されるはずです。

Cloudflareへのデプロイ

1. Upstashの登録と設定：
   • Upstashにアクセスし、無料アカウントを登録します。
   • 新しいPostgresデータベースを作成し、接続文字列（postgres://user:password@host:port/databaseの形式）を取得します。
2. 設定ファイルの更新：
   • プロジェクトのルートディレクトリで、.envファイルを作成または編集し、以下の内容を追加します：

     UPSTASH_URL=your_upstash_host
     UPSTASH_USER=username
     UPSTASH_PASSWORD=password
     

   • your_upstash_host、username、passwordを実際のUpstashの資格情報に置き換えます。
3. Cloudflare Pagesへのデプロイ：
   • プロジェクトリポジトリをGitリポジトリとして初期化します（まだ行っていない場合）。
   • package.jsonファイルを作成し、以下の内容を含めます：

     {
       "name": "mcp-server",
       "version": "1.0.0",
       "scripts": {
         "dev": "npx nx dev remote-mcp-server",
         "build": "npx nx build --configuration production"
       },
       "dependencies": {
         "@nx/webpack": "^14.0.0",
         "express": "^4.18.2",
         "pg": "^8.11.3",
         "typescript": "^5.3.2",
         "@types/node": "^20.11.0"
       }
     }
     

   • プロジェクトのルートディレクトリにtsconfig.jsonファイルを作成し、以下の内容を記述します：

     {
       "compilerOptions": {
         "target": "ES6",
         "module": "CommonJS",
         "outDir": "./dist",
         "rootDir": ".",
         "strict": true,
         "esModuleInterop": true,
         "skipLibCheck": true
       }
     }
     

   • 次に、Cloudflare Pagesを構成するためのpages.jsonファイルを作成します：

     {
       "type": "static",
       "build": {
         "command": "npm run build",
         "directory": "./dist"
       },
       "routes": [
         "* => $latest"
       ]
     }
     

   • これで、プロジェクトをGitHubまたはGitLabにプッシュし、Cloudflare Pagesに接続してデプロイすることができます。

デバッグ

問題が発生した場合は、以下の手順を参照してください：

1. Cloudflare Pagesのビルドログを確認し、すべての依存関係が正しくインストールされ、エラーがないことを確認します。
2. .envファイルにUpstashの資格情報が正しく設定されており、スペルミスがないことを検証します。
3. MCPサーバーがローカルで正常に動作することを確認してから、本番環境にデプロイしてください。

以上の手順に従えば、機能が充実したリモートMCPサーバーを構築し、Claude DesktopとMCPチェッカーとシームレスに統合することができます。