Netlify での MCP サーバーの構築、デプロイ、ホスト方法

Netlify上のMCPサーバーでAIワークフローを強化する準備はできていますか？Claude、Cursor、VS Code CopilotなどのAIエージェントに、Netlifyの洗練されたサーバーレスインフラストラクチャ上でホストされたプラットフォームのツールやデータへの直接アクセスを提供することを想像してみてください。この楽しく会話形式のガイドでは、Netlify上のMCPサーバーとは何か、なぜそれが素晴らしいのか、そしてそれを段階的に構築、デプロイ、ホストする方法を説明します。さらに、それが機能していることを確認するために、クールな例でテストします。さあ、AIをより賢くしましょう！

💡

美しいAPIドキュメントを生成する優れたAPIテストツールをお探しですか？

最大限の生産性で開発チームが協力できる、統合されたオールインワンプラットフォームをお探しですか？

Apidogはあなたのすべての要求に応え、Postmanをはるかに手頃な価格で置き換えます！

ボタン

MCPサーバーとは何か、そしてなぜNetlifyなのか？

Model Context Protocol (MCP)は、AIエージェントのためのユニバーサルアダプターのようなものです。これは、AIクライアント（例えば、Claude DesktopやCursor）がツール、データ、プロンプトを公開するサーバーと通信できるようにするオープンで軽量な標準です。これにより、AIはアプリの機能とリアルタイムで対話し、コンテキストを認識し、はるかに役立つものになります。

Netlify上にMCPサーバーをホストすることは、言うまでもなく賢明な選択です。Netlifyのサーバーレスプラットフォームはスケーラブルでメンテナンスが少なく、MCPサーバーのデプロイに最適です。トラフィックの急増、更新、セキュリティといった重い作業を処理してくれるため、クールなAI統合の構築に集中できます。ブログ、eコマースサイト、カスタムアプリにAIを追加する場合でも、Netlify上のMCPサーバーはシームレスな統合を可能にします。

NetlifyでMCPサーバーをホストするのが気に入る理由

Netlify上のMCPサーバーが革新的な理由を以下に示します。

スケーラブルなパワー：Netlifyのサーバーレス関数は、トラフィックの急増を楽々と処理します。
簡単なデプロイ：GitHubにプッシュするだけで、Netlifyがサーバーを自動デプロイします。DevOpsの学位は必要ありません！
AIフレンドリー：最小限の設定でAIエージェントをプラットフォームのデータとツールに接続します。
低いオーバーヘッド：サーバーレスなので、使用した分だけ支払い、コストを抑えられます。

AIを活性化させる準備はできましたか？さあ、Netlify上のMCPサーバーを設定しましょう！

NetlifyでのMCPサーバーの構築、デプロイ、ホスティング

前提条件

始める前に、以下を用意してください。

Node.js 20+：ローカル開発およびNetlify CLIの実行用（nodejs.org/en/download）。
Netlifyアカウント：netlify.comでサインアップ。
Netlify CLI：テストとデプロイのためにこれをインストールします。
Git：バージョン管理とデプロイ用。
MCP互換クライアント：テスト用のClaude Desktop、Cursor、Windsurf、またはVS Code Copilot。
GitHubアカウント：オプション、Gitベースのデプロイ用。

ステップ1：Netlifyプロジェクトを設定する

プロジェクト構造を設定する：

新しいプロジェクトフォルダ（例：mcp-netlify）を作成します。
その中に、MCPサーバーコード用の/netlify/functionsディレクトリを作成します。

例の構造：

/mcp-netlify
  /netlify
    /functions
      mcp.js

Netlifyサイトを作成する：

app.netlify.comにログインします。
New site from Gitをクリックするか、手動で新しいサイトを作成します。
Gitを使用する場合は、後でGitHub/GitLab/Bitbucketリポジトリを接続します。

ステップ2：MCPサーバー関数を実装する

/netlify/functionsにmcp.jsファイルを作成し、Netlify上のMCPサーバーを定義します。これはMCP SDKを使用して、ツール、リソース、プロンプトをAIクライアントに公開します。

mcp.jsの例を次に示します。

import { StreamableHTTPServerTransport } from "@modelcontextprotocol/sdk/server/streamableHttp.js";
import { toFetchResponse, toReqRes } from "fetch-to-node";
import { z } from "zod";
import { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js";
import {
  CallToolResult,
  ReadResourceResult,
  JSONRPCError
} from "@modelcontextprotocol/sdk/types.js";

// Netlifyサーバーレス関数ハンドラー。すべてのインバウンドリクエストを処理します。
export default async (req: Request) => {

  try {

    // ステートレスMCPの場合、initフェーズとリソース/ツールリクエストのイベント情報と共に送信される
    // POSTリクエストのみを使用します。
    if (req.method === "POST") {

      // RequestオブジェクトをNode.js Requestオブジェクトに変換します。
      const { req: nodeReq, res: nodeRes } = toReqRes(req);
      const server = getServer();

      const transport = new StreamableHTTPServerTransport({
        sessionIdGenerator: undefined,
      });

      await server.connect(transport);

      const body = await req.json();
      await transport.handleRequest(nodeReq, nodeRes, body);

      nodeRes.on("close", () => {
        console.log("Request closed");
        transport.close();
        server.close();
      });

      return toFetchResponse(nodeRes);

    }

    return new Response("Method not allowed", { status: 405 });

  } catch (error) {

    console.error("MCP error:", error);
    return new Response(
      JSON.stringify({
        jsonrpc: "2.0",
        error: {
          code: -32603,
          message: "Internal server error",
        },
        id: '',
      } satisfies JSONRPCError),
      {
        status: 500,
        headers: { "Content-Type": "application/json" }
      }
    );
  }
};

function getServer(): McpServer {

  // 機能とデータをすべてアタッチするMCPサーバーインスタンスを初期化します。
  const server = new McpServer(
    {
      name: "acme-devtool-server",
      version: "1.0.0",
    },
    { capabilities: { logging: {} } }
  );


  server.tool(
    "run-analysis-report",
    "Acme Devtoolで利用可能なデータをチェックし、最新の数値に関するすべての重要なデータを返します。",
    {
      days: z.number().describe("分析する日数").default(7),
    },
    async (
      { days },
    ): Promise<CallToolResult> => {

      const random = Math.random() * 100;

      return {
        content: [
          {
            type: "text",
            text: JSON.stringify({
              lastNDays: days,
              data: Array.from({ length: days }, (_, i) => `Day ${i + 1} had ${random * days} growth.`),
            }),
          },
        ],
      };
    }
  );

  // 特定のレポートを取得し、その情報を解析する必要があるエージェント向けのリソースを提供します。
  server.resource(
    "interpreting-reports",
    "acme://interpreting-reports",
    { mimeType: "text/plain" },
    async (): Promise<ReadResourceResult> => {
      return {
        contents: [
          {
            uri: "acme://interpreting-reports",
            text: `Acmeからのレポートには、その日数における成長を示すテキストの配列が含まれます。これは非構造化テキストですが、一貫性があるため、データを理解するために単一の行を見ることに基づいて情報を解析できます。`,
          },
        ],
      };
    }
  );

  return server;
};

// この関数が<domain>/mcpパスに応答することを確認します。
// これは任意のパスにすることができますが、使用/共有するmcpサーバー構成がこのパスと一致していることを確認する必要があります。
export const config = {
  path: "/mcp"
};

これにより、/.netlify/functions/mcpにサーバーレスMCPエンドポイントが作成されます。アプリのニーズ（例：API呼び出し、データベースクエリ）に基づいて、tools、resources、promptsをカスタマイズします。

ステップ3：依存関係をインストールする

プロジェクトフォルダで、Node.jsプロジェクトを初期化し、MCP SDKをインストールします。

npm init -y
npm install @modelcontextprotocol/sdk

ステップ4：ローカル開発とテスト

Netlify CLIをインストールする：

npm install -g netlify-cli

2. ローカルで実行する：

netlify dev

これにより、http://localhost:8888でローカルサーバーが起動します。Netlify上のMCPサーバーは以下のURLで利用可能になります。

http://localhost:8888/.netlify/functions/mcp

3. MCP Inspectorでテストする：

MCP Inspectorを使用してサーバーを確認します。

npx @modelcontextprotocol/inspector npx mcp-remote@next http://localhost:8888/mcp

ブラウザでhttp://localhost:6274を開き、サーバーのツールとリソースを対話的に探索します。

ステップ5：MCPサーバーをNetlifyにデプロイする

デプロイオプションは2つあります。

オプション1：Gitベースのデプロイ

プロジェクトをGitHub、GitLab、またはBitbucketリポジトリにプッシュします。
Netlifyで、Site configuration > Build & deployの下でリポジトリをサイトにリンクします。
Netlifyは、メインブランチへのプッシュごとに自動デプロイします。

オプション2：CLIデプロイ

Netlify CLIで直接デプロイします。

netlify deploy

本番環境の場合：

netlify deploy --prod

デプロイ後、Netlify上のMCPサーバーは以下のURLでライブになります。

https://your-site-name.netlify.app/.netlify/functions/mcp

次のステップのためにURLをメモしておいてください。

ステップ6：MCPクライアントをNetlify MCPサーバーに接続する

AIクライアント（Claude Desktop、Cursor、Windsurf、またはVS Code Copilot）を、デプロイされたNetlify上のMCPサーバーに接続するように設定します。以下のいずれかの設定を使用します。

ローカルテスト用

{
  "mcpServers": {
    "my-netlify-mcp": {
      "command": "npx",
      "args": [
        "mcp-remote@next",
        "http://localhost:8888/mcp"
      ]
    }
  }
}

デプロイ済みサーバー用

{
  "mcpServers": {
    "my-netlify-mcp": {
      "command": "npx",
      "args": [
        "mcp-remote@next",
        "https://your-site-name.netlify.app/mcp"
      ]
    }
  }
}

your-site-name.netlify.appを実際のNetlifyサイトのURLに置き換えてください。

クライアント設定

Claude Desktop：

設定 > 開発者 > 設定を編集に移動します。
claude_desktop_config.jsonを開き、設定を貼り付けて保存します。
Claude Desktopを再起動します。

Cursor：

設定 > ツールと統合 > カスタムMCPサーバーを追加に移動します。
設定を貼り付けて保存します。
チャットパネルでエージェントモードに切り替えます。

VS Code Copilot：

設定（Ctrl+,またはCmd+,）を開きます。
「MCP」を検索し、機能 > チャットの下で有効にします。
settings.jsonで編集をクリックし、設定を貼り付けて保存します。

ステップ7：MCPサーバーをテストする

MCPクライアントで以下のサンプルプロンプトを使用して、Netlify上のMCPサーバーをテストしましょう。

Netlify上のMCPサーバーを使って、過去3日間のレポートを実行してもらえますか？

上記のサンプルmcp.jsを使用した場合、AIは次のような応答をするはずです。

これにより、サーバーが機能していることが確認されます。より複雑なタスクのために、mcp.jsをカスタマイズして実際のツール（例：API統合、データベースクエリ）を追加してください。

ステップ8：検査とデバッグ

デプロイされたサーバーでMCP Inspectorを実行する：

npx @modelcontextprotocol/inspector npx mcp-remote@next https://your-site-name.netlify.app/mcp

NetlifyダッシュボードのNetlifyのFunction logsでエラーを確認します。
Netlifyの分析を使用して、使用状況を監視し、パフォーマンスを最適化します。
セキュリティのために、Netlifyの環境変数を使用して認証（例：APIキー）を追加します。

Netlify上のMCPサーバーのベストプラクティス

ステートレスに保つ：サーバーレス呼び出しは状態を保持しないため、関数を一時的なものとして設計します。
シークレットを保護する：APIキーやトークンはNetlifyの環境変数（サイト設定 > 環境変数）に保存します。
ハイブリッド設定：クライアントがストリーミングをサポートしていない場合、ローカルMCPプロキシを実行してNetlifyサーバーにブリッジします。
バージョン管理：Gitを使用して共同作業を行い、簡単にロールバックできるようにします。
パフォーマンスを最適化する：関数の実行時間を最小限に抑え、レイテンシとコストを削減します。

トラブルシューティングのヒント

サーバーが応答しない？ Netlify CLIログ（netlify dev）またはFunctionログでエラーを確認します。
クライアント接続の問題？ MCP設定URLを確認し、クライアントを再起動します。
Inspectorが機能しない？ MCP Inspectorパッケージが更新されていることを確認します（npx @modelcontextprotocol/inspector@latest）。
レート制限？ Netlifyの関数使用状況を監視し、高トラフィックのシナリオに合わせて調整します。

なぜNetlifyでMCPサーバーをホストするのか？

Netlify上のMCPサーバーは、AI駆動型ワークフローに最適です。Netlifyのサーバーレスプラットフォームは簡単にスケールするため、MCPサーバーは何千ものAIリクエストをクラッシュすることなく処理できます。さらに、GitベースのデプロイとCLIにより、更新が簡単になります。チャットボット、コンテンツ管理ツール、eコマース統合を構築している場合でも、Netlify上のMCPサーバーをホストすることで、AIエージェントがプラットフォームの機能にライブで動的にアクセスできるようになります。

例えば、アプリのAPIからユーザーデータを取得したり、AIプロンプトに基づいて自動ワークフローをトリガーしたりするMCPツールを作成できます。サーバーレス設定なので、サーバーを管理する必要はありません。コードを記述し、デプロイし、残りはNetlifyに任せるだけです。

結論

これで完了です！Netlify上のMCPサーバーを構築、デプロイ、ホストする方法を学び、AIエージェントを生産性の原動力に変えることができました。シンプルなサーバーレス関数の設定から、Claude、Cursor、VS Codeとの接続まで、このガイドはAIをプラットフォームと統合するのを簡単にします。私たちのテストプロンプト—「クエリを処理してください：Hello, Netlify!」—は、始めるのがいかに簡単であるかを示しています。

さらに進めたいですか？mcp.jsにカスタムツール（API呼び出しやデータベースクエリなど）を追加して、AIが素晴らしいことをするのを見てみましょう。

💡

ボタン