はじめに
こんにちは、サイオステクノロジーの小沼 俊治です。
以前公開した以下の記事では、ローカル環境で動作するオリジナルの MCP サーバーを開発する手順を案内しました。今回はその続編として、ローカル MCP サーバーを Remote MCP サーバーへ改良し、リモートサーバーで動作させる方法を共有します。
構成概要
筆者が動かした際の主な構成要素は以下の通りです。
- Windows 10 Professional
- WSL 2.4.12.0
- Ubuntu 24.04.2 LTS
- Node.js v22.15.0
- Claude desktop for Windows version 0.9.3
- Visual Studio Code version 1.99.3
ハンズオンを構成する環境は以下の通りです。
- MCP ホストは、Claude desktop for Windows のネイティブアプリ版を利用します。
- 2025年5月現在、Web 版 Calude で Remote MCP サーバーを利用できるのは、Max、Team、Enterprise プランのみです。Pro、および Free プランにはまだロールアウトされてないため、desktop 版を利用します。
- Claude から Remote MCP サーバーへは、remote-mcp の npm パッケージを介して連携するため、Windows 環境に Node.js を必要とします。
- Remote MCP サーバーの構成における主な考慮事項は以下の通りです。
- WSL 環境に構築する Ubuntu を、Remote MCP サーバーが動作するリモートサーバーとして扱います。
- Node.js の Express パッケージを利用して HTTP プロトコルで 8787 ポートをリッスンします。
- トランスポートには、ローカル MCP サーバーの STDIO から、Remote MCP サーバーでは Server-Sent Events（SSE）を使います。
- Remote MCP サーバーで提供するツールの機能は、改良前の MCP サーバーと同じです。
ハンズオンの手順で作成する Remote MCP サーバーの設定ファイルやソースコードは、以下の GitHub リポジトリで公開しています。手順と合わせてご確認ください。
基礎環境の構築
Remoe MCP サーバー環境 on WSL
WSL 環境の Ubuntu 側に Remote MCP サーバーの稼働環境を構築します。
WSL 環境の構築
以下手順を参考に Windows PC へ Linux ディストリビューション（Ubuntu）環境を用意します。
Node.js インストール
JavaScript で実装された Remote MCP サーバーを実行するために Ubuntu へ Node.js をインストールします。
$ sudo apt install -y npm
$ node -v
v18.19.1
apt でインストールされる Node.js はバージョンが古いためアップデートします。
$ sudo npm install n -g
$ sudo n 22.15.0
インストールしたコンソールを一度閉じて新たにコンソールを開き直し、導入したバージョンをセッションに反映します。
$ node -v
v22.15.0
MCP ホスト環境 on Windows
Windows 側に MCP ホストの稼働環境を構築します。
Claude desktop for Windows インストール
MCP ホストに Web 版ではなくアプリ版の Claude desktop for Windows を利用するため、以下公式手順を参考に Windows PC へインストールします。
Node.js インストール
MCP ホストの Claude から Remote MCP サーバーのツールへアクセスする際に、Node.js の「remote-mcp」npm パッケージを介して実行するため、以下手順を参考に Windows PC へ Node.js をインストールします。
Visual Studio Code インストール
WSL 環境の Ubuntu で TypeScript ソースコードを実装するためのエディターとして、Windows 環境にインストールした Visual Studio Code (VS Code) を WSL 環境へリモート接続して利用する方法をお薦めします。VS Code のインストール手順については、ネット上でたくさんのコンテンツが親切に説明されているので、本資料の範囲外とさせて頂きます。
なお、VS Code 以外のお気に入りのエディターを利用される場合は、文中の VS Code をご利用のエディターに置き換えて読み進めてください。
Remote MPC サーバーへ改良
WSL 環境の Ubuntu で Remote MCP サーバーを開発するため、Ubuntu にログインし、ハンズオン用のフォルダを作成して作業を進めます。
$ mkdir -p ~/handson/
$ cd ~/handson/
改良前のローカル MCP サーバーを用意
以前掲載した以下の記事を参考に、Remote MCP サーバーの改良元となるローカル MCP サーバーを Ubuntu 環境に用意してください。なお、当該記事は Windows 環境で動作するローカル MCP サーバーの構築について記載していますが、今回の Remote MCP サーバーは Ubuntu 環境で動作させるため、Ubuntu 環境に用意してください。
また、改良前のローカル MCP サーバーのソースコードは、以下の GitHub リポジトリに「v1.0.0」タグで保存しているので、Git コマンドで取得して用意頂くこともできます。
$ git clone https://github.com/Toshiharu-Konuma-sti/hands-on-mcp-sios-apisl.git -b v1.0.0
プロジェクト設定の改良
改良作業前に、現在設定されている「package.json」に従い依存パッケージをインストールします。
$ npm install
Remote MCP サーバーの改良に当たり、追加で必要になる依存パッケージをインストールします。
$ npm install express @types/express
ソースコードの改良
Remote MCP サーバーで起動するように「src/index.ts」の3か所を改良します。
まずは1点目の改良として、主に利用するトランスポートに関連する依存パッケージを置き換えます。以下の差分イメージでは、行頭の「+」は追加する行、「-」は削除する行を表します。
import { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js";
- import { StdioServerTransport } from "@modelcontextprotocol/sdk/server/stdio.js";
+ import { SSEServerTransport } from "@modelcontextprotocol/sdk/server/sse.js";
+ import express from "express";
import { z } from "zod";
:
次に2点目の改良として、STDIO トランスポートの実装を削除します。
- async function main() {
- const transport = new StdioServerTransport();
- await server.connect(transport);
- console.error("MCP Server running on stdio");
- }
-
- main().catch((error) => {
- console.error("Fatal error in main():", error);
- process.exit(1);
- });
最後の3点目の改良として、STDIO トランスポートが実装されていた箇所に、HTTP で通信する Server-Sent Events (SSE) トランスポートを実装します。
+ const app = express();
+ const port = 8787;
+ let transport: SSEServerTransport | null = null;
+
+ app.get("/sse", async (_, res) => {
+ console.log("Received connection");
+ transport = new SSEServerTransport("/message", res);
+ await server.connect(transport);
+ });
+
+ app.post("/message", async (req, res) => {
+ console.log("Received message");
+ transport?.handlePostMessage(req, res);
+ });
+
+ app.listen(port, () => {
+ console.log("Remote MCP server listening on port", port);
+ });
- 改良後のできあがりは以下を参考にしてください。
ビルドしてトランスパイル
改良後のできあがりを動作確認するために、ビルドして TypeScript から JavaScript のソースコードを生成します。
$ npm run build
> hands-on-mcp-sios-apisl@1.0.0 build
> tsc
MCP Inspector で動作確認
MCP Inspector と Remote MCP サーバーを起動するには、2つのコンソールを使用します。まず、1つ目のコンソールで MCP Inspector を起動します。
$ npx -y @modelcontextprotocol/inspector@latest
Starting MCP inspector...
Proxy server listening on port 6277
MCP Inspector is up and running at http://127.0.0.1:6274
コンソールログに表示された URL のホスト部「127.0.0.1」を「localhost」に置き換え、その URL（例: http://localhost:6274）でブラウザから MCP Inspector にアクセスします。
次に2つ目のコンソールを立ち上げて Remote MCP サーバーを起動します。
$ node build/index.js
Remote MCP server listening on port 8787
Received connection
MCP Inspector をアクティブにして、Transport Type 項目に「SSE」を選択し、URL 項目は Remote MCP サーバーを起動したホスト名とコンソールログに表示されたポート番号に「/sse」のパスを使った URL（例: http://localhost:8787/sse）を入力します。「Connect」ボタンをクリックすると MCP Inspector が Remote MCP サーバーに接続します。
接続したら画面中央の「List Tools」ボタンをクリックするとツール一覧が表示されます。
それ以降の動作確認は、ローカル MCP サーバーと同じため、以前の記事を参考に確認を進めます
Claude（MCP ホスト）に組み込み
連携する MCP サーバーの設定
オリジナルの Remote MCP サーバーを Claude から利用できるように設定ファイルを編集するため、Windows のスタートメニュー「A」セクションから「Anthropic > Claude」を選択して起動します。
Claude が起動したら画面左上のハンバーガーメニューから「ファイル > 設定…」を選択します。
オリジナルの Remote MCP サーバーが利用できるようにするために、「開発者」タブの「構成を編集」ボタンをクリックします。
エクスプローラーが立ち上がり、Claude の設定ファイルに該当する「claude_desktop_config.json」ファイルをダブルクリックしてエディターで開きます。
「claude_desktop_config.json」ファイルにオリジナルの Remote MCP サーバーを利用するための設定を書いて保存します。
{
"mcpServers": {
"mcp-remote-sios-apisl-demo": {
"command": "npx",
"args":[
"mcp-remote",
"http://localhost:8787/sse"
]
}
}
}
「claude_desktop_config.json」ファイルの編集における主な考慮事項は以下の通りです。
- 「mcpServers > mcp-sios-apisl-demo > args」フィールドで主な考慮事項は以下の通りです。
- npx コマンドの第1引数に mcp-remote パッケージを指定することで、Retemo MCP サーバーと連携します。
- npx コマンドの第2引数に mcp-remote パッケージが連携する Remote MCP サーバーの URL を指定します。
Claude の再起動で設定反映
変更した設定ファイルの適用に、ウィンドウの「×」ボタンで終了させるだけではなく、Claude のプロセスを完全に終了させる必要があるため、Windows タスクバーの画面右側のアイコン表示領域から Claude アイコン（トゲトゲのウニの様なデザイン）を探し、右クリックで表示されるメニューから「終了」を選択してプロセスを完全に終了させます。
Windows のスタートメニュー「A」セクションから「Anthropic > Claude」を選択して起動します。
Claude が起動したら画面中央のテキストボックス内の左下にある「検索とツール」アイコンをクリックします。表示されたメニューに、「mcp-remote-sios-apisl-demo」の項目と右横に数字が表示されていたら、オリジナルの MCP サーバーは正常に設定できました。
オリジナルの Remote MCP サーバーのデモ
提供するツールの機能は Remote MCP サーバーでもローカル MCP サーバーと同じため、以前の記事を参照ください。
（動画内で MCP サーバーを有効化する際、表示されているサーバー名『mcp-sios-apisl-demo』を『mcp-remote-sios-apisl-demo』に読み替えてご覧ください）
まとめ
リモート MCP サーバーの実装手順は、いかがでしたでしょうか？MCP はまだ発展中の仕様のため引き続き動向をウォッチしながら得られたノウハウを共有していきたいと思います。
