リモートMCPサーバー

Azure Functions を使用したリモート MCP サーバーの使用開始 (Node.js/TypeScript)

これは、Azure Functions を使用してカスタムリモート MCP サーバーを簡単に構築し、クラウドにデプロイするためのクイックスタートテンプレートです。ローカルマシンでクローン作成、復元、実行（デバッグ付き）し、数分でクラウドにazd upできます。MCP サーバーは、キーと HTTPS を使用して設計上セキュリティ保護されており、EasyAuth や API Management を使用した OAuth のオプションや、VNET を使用したネットワーク分離もサポートします。

ビデオの概要を見る

このサンプルを他の言語で探している場合は、.NET/C#およびPythonバージョンを確認してください。

以下は、Azure Functions を使用したリモート MCP サーバーのアーキテクチャ図です。

前提条件

Node.jsバージョン 18 以上
Azure Functions コアツール>= 4.0.7030
Azure 開発者 CLI
Visual Studio Code を使用してローカルで実行およびデバッグするには:
- ビジュアルスタジオコード
- Azure Functions 拡張機能
Azure ストレージエミュレーターである Azurite を実行するためのDocker (オプション)

ローカル環境を準備する

この特定のサンプルでは、BLOB ストレージからスニペットを保存および取得するため、Azure ストレージエミュレーターが必要です。

アズライトを始める
docker run -p 10000:10000 -p 10001:10001 -p 10002:10002 \ mcr.microsoft.com/azure-storage/azurite

注意: VS Code 拡張機能から取得した Azurite を使用する場合はAzurite: Start now」を実行する必要があります。そうしないとエラーが表示されます。

ターミナルからMCPサーバーをローカルで実行する

依存関係をインストールする
npm install
プロジェクトを構築する
npm run build
Functions ホストをローカルで起動します。
func start

デフォルトでは、Webhooksルート（ /runtime/webhooks/mcp/sseが使用されます。後ほど、Azureでクライアント/ホスト呼び出し時にキーを設定するために、 /runtime/webhooks/mcp/sse?code=<system_key>

クライアント/ホスト内からローカルMCP サーバーを使用する

VS Code - コパイロット編集

コマンドパレットからMCP サーバーを追加し、実行中の Function App の SSE エンドポイントに URL を追加します。
http://0.0.0.0:7071/runtime/webhooks/mcp/sse
追加する MCP サーバーのタイプとして**HTTP (Server-Sent-Events)**を選択します。
実行中の関数アプリのSSEエンドポイントのURLを入力します
サーバーIDを入力します。（任意の名前を指定できます）
これをユーザー設定（すべてのアプリで利用可能）で実行するか、ワークスペース設定（このアプリでのみ利用可能）で実行するかを選択します。
コマンドパレットからMCPサーバーの一覧を表示し、サーバーを起動します。前の手順でローカルサーバーが既に起動している可能性があります。その場合は、この手順をスキップしてください。
Copilot チャットエージェントモードでは、ツールを起動するためのプロンプトを入力します。たとえば、コードを選択してこのプロンプトを入力します。
Say Hello
Save this snippet as snippet1
Retrieve snippet1 and apply to newFile.ts
ツールを実行するように求められたら、 「続行」をクリックして同意します。
完了したら、ターミナルウィンドウで Ctrl + C を押してfunc.exeホストプロセスを停止し、コマンドパレットからMCP サーバーを一覧表示してローカルサーバーを停止します。

MCP検査官

新しいターミナルウィンドウで、MCP Inspectorをインストールして実行します。
npx @modelcontextprotocol/inspector node build/index.js
以前に関数アプリを停止した場合は、Functions ホストをローカルで起動します。
func start
Ctrl キーを押しながらクリックすると、アプリによって表示される URL (例: http://0.0.0.0:5173/#resources ) から MCP Inspector Web アプリが読み込まれます。
トランスポートタイプをSSEに設定する
実行中の Function App の SSE エンドポイントへの URL を設定し、接続します。
http://0.0.0.0:7071/runtime/webhooks/mcp/sse
ツールの一覧を表示します。ツールをクリックしてツールを実行してください。
完了したら、ターミナルウィンドウで Ctrl + C キーを押してfunc.exeホストプロセスを停止し、ターミナルウィンドウで Ctrl + C キーを押して@modelcontextprotocol/inspectorホストプロセスを停止します。

リモート MCP 用に Azure にデプロイする

オプションで、サンプルで使用されている VNet をオプトインできます。(これを選択する場合は、 azd upの前に実行してください)

azd env set VNET_ENABLED true

次のazdコマンドを実行して、必要な Azure リソースを使用して関数アプリをプロビジョニングし、コードをデプロイします。

azd up

注: API Management を使用すると、MCP サーバーのセキュリティとポリシーを強化できます。また、App Service の組み込み認証を使用すると、Entra などのお気に入りの OAuth プロバイダーを設定できます。

クライアントからリモートMCP サーバー関数アプリに接続する

クライアントは、新しいホスト型SSEエンドポイントを呼び出すためにキーを必要とします。このキーhttps://<funcappname>.azurewebsites.net/runtime/webhooks/mcp/sseという形式になります。ホスト型関数には、デフォルトでシステムキーが必要です。これはポータルまたはCLI（ az functionapp keys list --resource-group <resource_group> --name <function_app_name> ）から取得できますmcp_extensionという名前のシステムキーを取得してください。

MCP InspectorでリモートMCPサーバーに接続する

MCP Inspector の場合、URL にキーを含めることができます。

https://<funcappname>.azurewebsites.net/runtime/webhooks/mcp/sse?code=<your-mcp-extension-system-key>

VS CodeでリモートMCPサーバーに接続する - GitHub Copilot

VS Code内でGitHub Copilotを使用する場合は、 mcp.jsonのx-functions-keyヘッダーにキーを設定し、URLにはhttps://<funcappname>.azurewebsites.net/runtime/webhooks/mcp/sseを使用します。以下の例は、このリポジトリに含まれるmcp.jsonファイルからの抜粋です。VS Codeからサーバーを起動する際に、入力欄を使用してキーの入力を求めますmcp.jsonファイルは以下のようになります。

{
    "inputs": [
        {
            "type": "promptString",
            "id": "functions-mcp-extension-system-key",
            "description": "Azure Functions MCP Extension System Key",
            "password": true
        },
        {
            "type": "promptString",
            "id": "functionapp-name",
            "description": "Azure Functions App Name"
        }
    ],
    "servers": {
        "remote-mcp-function": {
            "type": "sse",
            "url": "https://${input:functionapp-name}.azurewebsites.net/runtime/webhooks/mcp/sse",
            "headers": {
                "x-functions-key": "${input:functions-mcp-extension-system-key}"
            }
        },
        "local-mcp-function": {
            "type": "sse",
            "url": "http://0.0.0.0:7071/runtime/webhooks/mcp/sse"
        }
    }
}

mcp.jsonファイル内のサーバーremote-mcp-functionで [開始] をクリックします。
VS Code からプロンプトが表示されたら、Azure Portal で作成した関数アプリの名前を入力します。
プロンプトにAzure Functions MCP Extension System Keyを入力します。Azureポータルから関数アプリの「Functions」メニュー項目に移動し、「アプリキー」を選択して、「システムキー」からmcp_extensionキーをコピーすることで、このキーをコピーできます。
Copilot チャットエージェントモードでは、ツールを起動するためのプロンプトを入力します。たとえば、コードを選択してこのプロンプトを入力します。
Say Hello
Save this snippet as snippet1
Retrieve snippet1 and apply to newFile.ts

コードを再デプロイする

Azure リソースをプロビジョニングし、関数アプリにコードの更新をデプロイするために必要な回数だけazd upコマンドを実行できます。

[!NOTE] デプロイされたコードファイルは常に最新のデプロイパッケージによって上書きされます。

リソースをクリーンアップする

関数アプリと関連リソースの操作が完了したら、次のコマンドを使用して、関数アプリと関連リソースを Azure から削除し、それ以上のコストが発生しないようにすることができます。

azd down

ソースコード

getSnippetおよびsaveSnippetエンドポイントの関数コードは、 srcディレクトリ内の TypeScript ファイルで定義されています。MCP 関数アノテーションは、これらの関数を MCP サーバーツールとして公開します。

これは、いくつかの MCP サーバー例 (文字列の取得、オブジェクトの取得、オブジェクトの保存) のコードを示しています。

// Hello function - responds with hello message
export async function mcpToolHello(context: InvocationContext): Promise<string> {
    return "Hello I am MCP Tool!";
}

// Register the hello tool
app.mcpTool('hello', {
    toolName: 'hello',
    description: 'Simple hello world MCP Tool that responses with a hello message.',
    handler: mcpToolHello
});

// GetSnippet function - retrieves a snippet by name
export async function getSnippet(_message: unknown, context: InvocationContext): Promise<string> {
    console.info('Getting snippet');
    
    // Get snippet name from the tool arguments
    const mcptoolargs = context.triggerMetadata.mcptoolargs as { snippetname?: string };
    const snippetName = mcptoolargs?.snippetname;

    console.info(`Snippet name: ${snippetName}`);
    
    if (!snippetName) {
        return "No snippet name provided";
    }
    
    // Get the content from blob binding - properly retrieving from extraInputs
    const snippetContent = context.extraInputs.get(blobInputBinding);
    
    if (!snippetContent) {
        return `Snippet '${snippetName}' not found`;
    }
    
    console.info(`Retrieved snippet: ${snippetName}`);
    return snippetContent as string;
}


// Register the GetSnippet tool
app.mcpTool('getsnippet', {
    toolName: GET_SNIPPET_TOOL_NAME,
    description: GET_SNIPPET_TOOL_DESCRIPTION,
    toolProperties: [
        {
            propertyName: SNIPPET_NAME_PROPERTY_NAME,
            propertyValue: PROPERTY_TYPE,
            description: SNIPPET_NAME_PROPERTY_DESCRIPTION,
        }
    ],
    extraInputs: [blobInputBinding],
    handler: getSnippet
});

// SaveSnippet function - saves a snippet with a name
export async function saveSnippet(_message: unknown, context: InvocationContext): Promise<string> {
    console.info('Saving snippet');
    
    // Get snippet name and content from the tool arguments
    const mcptoolargs = context.triggerMetadata.mcptoolargs as { 
        snippetname?: string;
        snippet?: string;
    };
    
    const snippetName = mcptoolargs?.snippetname;
    const snippet = mcptoolargs?.snippet;
    
    if (!snippetName) {
        return "No snippet name provided";
    }
    
    if (!snippet) {
        return "No snippet content provided";
    }
    
    // Save the snippet to blob storage using the output binding
    context.extraOutputs.set(blobOutputBinding, snippet);
    
    console.info(`Saved snippet: ${snippetName}`);
    return snippet;
}

// Register the SaveSnippet tool
app.mcpTool('savesnippet', {
    toolName: SAVE_SNIPPET_TOOL_NAME,
    description: SAVE_SNIPPET_TOOL_DESCRIPTION,
    toolProperties: [
        {
            propertyName: SNIPPET_NAME_PROPERTY_NAME,
            propertyValue: PROPERTY_TYPE,
            description: SNIPPET_NAME_PROPERTY_DESCRIPTION,
        },
        {
            propertyName: SNIPPET_PROPERTY_NAME,
            propertyValue: PROPERTY_TYPE,
            description: SNIPPET_PROPERTY_DESCRIPTION,
        }
    ],
    extraOutputs: [blobOutputBinding],
    handler: saveSnippet
});

host.jsonファイルには、この機能を利用するアプリに必要な実験的なバンドルへの参照も含まれていることに注意してください。

"extensionBundle": {
  "id": "Microsoft.Azure.Functions.ExtensionBundle.Experimental",
  "version": "[4.*, 5.0.0)"
}

次のステップ

MCP サーバーにAPI 管理を追加します (認証、ゲートウェイ、ポリシーなど)
MCPサーバーに組み込み認証を追加する
VNET_ENABLED=true フラグを使用して VNET を有効にする
Microsoft の MCP 関連取り組みについて詳しくは、こちらをご覧ください。

Remote MCP Server

Integrations

Azure Functions を使用したリモート MCP サーバーの使用開始 (Node.js/TypeScript)

前提条件

ローカル環境を準備する

ターミナルからMCPサーバーをローカルで実行する

クライアント/ホスト内からローカルMCP サーバーを使用する

VS Code - コパイロット編集

MCP検査官

リモート MCP 用に Azure にデプロイする

クライアントからリモートMCP サーバー関数アプリに接続する

MCP InspectorでリモートMCPサーバーに接続する

VS CodeでリモートMCPサーバーに接続する - GitHub Copilot

コードを再デプロイする

リソースをクリーンアップする

ソースコード

次のステップ

Related MCP Servers

Code Snippet Server

Code Sandbox MCP

ServeMyAPI

Azure MCP Server

Appeared in Searches

New MCP Servers