Getting Started with Remote MCP Servers using Azure Container Apps (Node.js/TypeScript)

Azure Container Apps を使用したリモート MCP サーバーの入門（Node.js/TypeScript）

これは、Azure Container Apps を使用してリモート Model Context Protocol（MCP）サーバーをセットアップするための基本要素を紹介するクイックスタートガイドです。MCP サーバーは Node.js と TypeScript を使用して構築されており、サーバーレス環境でさまざまなツールやサービスを実行できます。このプロジェクトでは、JWT ベースの認証とロールベースのアクセス制御（RBAC）を組み合わせた多層セキュリティアーキテクチャも実装し、MCP サーバーのエンドポイントとツールを保護しています。

警告

ここに掲載されているコードはデモ目的のみです。固有のシナリオ（企業内の規則、特定のセキュリティ制御、その他の保護メカニズムなど）は、このリポジトリで説明しているものとは異なる場合があります。認証と認可が必要な本番環境向けおよび顧客向けの資産については、必ずセキュリティ監査と脅威モデリングを実施してください。

MCP とは？

Model Context Protocol（MCP）は、LLM が標準化された方法で外部のツールやサービスと連携できるようにするオープンプロトコルです。MCP により、LLM はデータベース、API、その他のサービスなど、さまざまなリソースにアクセスして利用できるため、機能を強化し、より正確で関連性の高い応答を提供できます。

一般的な MCP サーバー構成のアーキテクチャ図を以下に示します。

flowchart TD
    user(("fa:fa-users User"))
    host["VS Code, Copilot, LlamaIndex, Langchain..."]
    clientHttp[MCP HTTP Client]
    serverHttp([MCP HTTP Server])
    agent["Agents (not included in this demo)"]
    AzureOpenAI([Azure AI Foundry])
    GitHub([GitHub Models])
    OpenAI([OpenAI])
    
    tools["fa:fa-wrench Tools"]
    db[(sqlite DB)]

    user --> hostGroup 
    subgraph hostGroup["MCP Host"]
        host -.- agent
        host aaa@ -.- clientHttp
    end
    
    agent -.- AzureOpenAI & GitHub & OpenAI
    
    clientHttp aa@ ---> |"Streamable HTTP (authenticated)"| serverHttp

    subgraph container["ACA or localhost"]
      serverHttp a@ -.- tools
      tools b@ -.- add_todo 
      tools c@ -.- list_todos
      tools d@ -.- complete_todo
      tools e@ -.- delete_todo
    end

    add_todo bb@ --> db
    list_todos cc@--> db
    complete_todo dd@ --> db
    delete_todo ee@ --> db

    %% styles

    classDef animate stroke-dasharray: 9,5,stroke-dashoffset: 900,animation: dash 25s linear infinite;
    classDef highlight fill:#9B77E8,color:#fff,stroke:#5EB4D8,stroke-width:2px
    
    class a animate
    class aa animate
    class aaa animate
    class b animate
    class c animate
    class d animate
    class e animate
    class bb animate
    class cc animate
    class dd animate
    class ee animate

    class container highlight

Azure Container Apps を使用する理由

Azure Container Apps は、コンテナー化されたアプリケーションのデプロイと運用を簡素化する、フルマネージドのサーバーレスコンテナープラットフォームです。ACA はサーバーレス GPU もサポートしているため、独自のコンテナーを持ち込み、需要に応じて自動的にスケーリングする GPU 対応環境にデプロイできます。

主なメリット：

• オートスケーリング – アイドル時にはゼロまで縮小し、利用状況に応じてスケールアウトします
• 秒単位の従量課金 – 使用したコンピューティングリソース分のみお支払いいただきます
• 使いやすさ - 開発者の生産性を高め、あらゆるコンテナーを簡単に持ち込んでクラウド上の GPU で実行できます
• インフラストラクチャ管理が不要 – モデルとアプリに集中できます
• エンタープライズグレードの機能 – 独自の仮想ネットワーク、マネージド ID、プライベートエンドポイントなどを利用でき、包括的なデータガバナンスも標準でサポートします

前提条件

1. 最新バージョンの VS Code をインストールします
2. GitHub Copilot と GitHub Copilot Chat の拡張機能をインストールします

MCP サーバーをローカルで実行する

MCP サーバーをローカルで実行する場合は、次の手順に従ってください。

ローカルマシンに次のツールをインストールする必要があります。

• リポジトリのクローンに必要な git。
• Node.js と npm。

前提条件のインストールが完了したら、次の手順に従って MCP サーバーをローカルで実行できます。

1. このリポジトリをクローンします。

git clone https://github.com/Azure-Samples/mcp-container-ts
cd mcp-container-ts

2. プロジェクトの依存関係をインストールします

npm install

3. 新しい JWT 設定を生成します。

npm run generate-token -- --admin

メモ

--admin、--user、--readonly フラグを使用して、異なるロールのトークンを生成することもできます。生成されるトークンの権限は、選択したロールによって異なります（詳細は src/auth/authorization.ts を参照してください）。

これにより、プロジェクトのルートにある .env ファイルに新しい JWT 設定が追加（または作成）されます。生成されたトークンは、MCP サーバーへのリクエストの認証に使用されます。

重要

本番環境では、シークレットとトークンをより安全な方法で管理してください。

4. 開発サーバーを起動します

npm run dev

ターミナルに次の出力が表示されます。

  mcp:db 2025-07-23T16:48:05.381Z PRAGMA journal_mode = WAL +0ms
  mcp:db 2025-07-23T16:48:05.382Z CREATE TABLE IF NOT EXISTS todos (
  mcp:db      id INTEGER PRIMARY KEY AUTOINCREMENT,
  mcp:db      text TEXT NOT NULL,
  mcp:db      completed INTEGER NOT NULL DEFAULT 0
  mcp:db    ) +0ms
  mcp:db 2025-07-23T16:48:05.382Z Database "todos" initialized. +0ms
  mcp:index 2025-07-23T16:48:05.449Z MCP Stateless Streamable HTTP Server +0ms
  mcp:index 2025-07-23T16:48:05.449Z MCP endpoint: http://localhost:3000/mcp +0ms
  mcp:index 2025-07-23T16:48:05.449Z Press Ctrl+C to stop the server +0ms

4. MCP サーバーにアクセスして使用するには、以下の MCP サーバーを使用する セクションをお読みください。

メモ

アプリケーションの起動時に、サーバーは インメモリ SQLite データベースを作成します。このデータベースは、ツールの状態と、MCP サーバーとのやり取りを保存するために使用されます。

MCP サーバーを Azure Container Apps にデプロイする

MCP サーバーを Azure Container Apps にデプロイするには、Azure Developer CLI（azd）を使用できます。これにより、最小限の手間でプロジェクトを Azure にプロビジョニングしてデプロイできます。

• Azure Developer CLI をインストールします。

前提条件のインストールが完了したら、次の手順に従って MCP サーバーを Azure Container Apps にデプロイできます。

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

git clone https://github.com/azure-samples/mcp-container-ts.git
cd mcp-container-ts

2. Azure アカウントにログインします

azd auth login

GitHub Codespaces ユーザーの場合、前のコマンドが失敗したときは、次を試してください。

azd auth login --use-device-code

1. プロジェクトをプロビジョニングしてデプロイします（このコマンドを実行するときは、クローンしたリポジトリのフォルダーにいることを確認してください）。

azd up

4. デプロイが完了したら、出力に表示された URL を使用して MCP サーバーにアクセスできます。URL は次のような形式です。

https://<env-name>.<container-id>.<region>.azurecontainerapps.io

5. MCP サーバーにアクセスして使用するには、以下の MCP サーバーを使用する セクションをお読みください。

メモ

デプロイを試しただけの場合は、次のコマンドを実行して、デプロイしたすべてのリソースを削除・クリーンアップし、費用が発生しないようにできます。

azd down --purge --force

その他のインストール方法

このテンプレートを使い始める方法はほかにもいくつかあります。最も手早く始められるのは GitHub Codespaces です。必要なツールがすべてセットアップされ、ブラウザーで MCP サーバーを実行できます。

GitHub Codespaces

GitHub Codespaces を使用すると、このテンプレートを仮想環境で実行できます。ボタンをクリックすると、ブラウザーで Web ベースの VS Code インスタンスが開きます。

1. テンプレートを開きます（数分かかることがあります）。

   

2. ターミナルウィンドウを開きます。

3. 次の手順に進み、MCP サーバーをローカルで実行するか、Azure Container Apps にデプロイします。

メモ

GitHub Codespaces 内で mcp server を実行する場合は、ポートの公開設定を Public に変更してください。 「PORTS」タブをクリック → 開いているポート（デフォルトは 3000）を右クリック → Port visibility → Public。

VS Code Dev Containers

関連する方法として VS Code Dev Containers があります。Dev Containers extension を使用して、ローカルの VS Code でプロジェクトを開きます。

1. まだインストールしていない場合は、Docker Desktop と VS Code Dev Containers extension をインストールします。

2. Docker Desktop を起動します（まだインストールしていない場合はインストールしてください）。

3. プロジェクトを開きます。

   

4. ターミナルウィンドウを開きます。

5. 次の手順に進み、MCP サーバーをローカルで実行するか、Azure Container Apps にデプロイします。

MCP サーバーを使用する

オプション 0 - 提供されているクライアントの例を使用する

このリポジトリには、OpenAI モデルで MCP サーバーを使用する方法を示す例が含まれています。例は [examples/](./examples/) ディレクトリにあります。

オプション 1 - VS Code で mcp.json ファイルを使用する

MCP サーバーに接続する最も手早い方法は、提供されている .vscode/mcp.json 構成ファイルを使用して、VS Code 環境に MCP サーバーを設定することです。この構成ファイルには、URL やトランスポートの種類など、MCP サーバーに必要な設定が含まれています。

{
  "inputs": [
    {
      "password": true,
      "id": "mcp-server-token",
      "description": "Enter the token for the MCP server",
      "type": "promptString",
    }
  ],
  "servers": {
    "mcp-server": {
      "type": "http",
      "url": "http://localhost:3000/mcp",
      "headers": {
        "Authorization": "Bearer ${input:mcp-server-token}"
      }
    },
    "mcp-server-remote": {
      "type": "http",
      "url": "https://<env-name>.<container-id>.<region>.azurecontainerapps.io/mcp",
      "headers": {
        "Authorization": "Bearer ${input:mcp-server-token}"
      }
    }
  }
}

このファイルを開いたら、インラインアクションボタンの「start」をクリックすると、MCP サーバーに接続して利用可能なツールを取得できます。

重要： サーバーは JWT トークンで保護されているため、VS Code からトークンの入力を求められます。npm run generate-token コマンドで作成された .env ファイルから "JWT_TOKEN" の値をコピーしてください。

メモ

実際の運用では、トークンを検証し、より安全な認証方法を使用してください。これはテスト用のデモトークンにすぎません。サーバーをセキュリティで保護する方法については、こちらをご覧ください。

オプション 2 - MCP サーバーを VS Code に手動で追加する

1. コマンドパレットから MCP サーバーを追加し、実行中のサーバーの HTTP エンドポイントの URL を追加します。

ローカル開発の場合の URL は次のとおりです。

http://localhost:3000/mcp

Azure Container Apps の場合の URL は次のとおりです。

https://<env-name>.<container-id>.<region>.azurecontainerapps.io/mcp

1. 追加する MCP サーバーの種類として HTTP (HTTP or Server-Sent Events) を選択します。
2. /mcp パスを末尾に含めて、実行中の HTTP エンドポイントの URL を入力します。
3. サーバー ID を入力します（任意の名前を指定できます）。
4. User settings（すべてのアプリで利用可能）または Workspace settings（このアプリでのみ利用可能）のどちらで実行するかを選択します。
5. Copilot チャットのエージェントモードでプロンプトを入力し、ツールを呼び出します。たとえば、コードを選択して次のプロンプトを入力します。

I need to send an email to Dan, please add that to my todo list.

7. ツールの実行を求められたら、「Continue」をクリックして許可します。
8. 終了するには、ターミナルウィンドウで Ctrl+C を押して func.exe ホストプロセスを停止し、コマンドパレットから List MCP Servers を選択してローカルサーバーを停止します。

オプション 3 - MCP Inspector

1. 新しいターミナルウィンドウで、MCP Inspector をインストールして実行します。

npm run inspect

1. CTRL キーを押しながらクリックし、ターミナルに表示された URL（例：http://localhost:6274/?MCP_PROXY_AUTH_TOKEN=xyz）から MCP Inspector のウェブアプリを読み込みます。
2. トランスポートの種類を Streamable HTTP に設定します。
3. 認証ヘッダーとして Authorization と、npm run generate-token コマンドで作成された .env ファイル内の "JWT_TOKEN" の値であるベアラートークンを追加します。
4. 実行中のサーバーの HTTP エンドポイントを URL に設定し、接続します。

# for local development, use:
http://localhost:3000/mcp

# or use the Azure Container Apps URL:
https://<env-name>.<container-id>.<region>.azurecontainerapps.io/mcp

5. ［List Tools］をクリックします。ツールをクリックして、［Run Tool］をクリックします。

次のステップ

• Model Context Protocol の詳細をご覧ください
• Azure Container Apps の詳細をご覧ください
• Azure AI Foundry の詳細をご覧ください
• Microsoft の関連 MCP の取り組み の詳細をご覧ください

コミュニティに参加する

Azure AI Foundry Developer Community に参加して、経験を共有し、質問し、サポートを受けることをお勧めします。

• aka.ms/foundry/discord​ - Discord コミュニティに参加して、リアルタイムのディスカッションやサポートをご利用ください。
• aka.ms/foundry/forum - Azure AI Foundry Developer Forum にアクセスして、質問したり、知識を共有したりしてください。