كيفية بناء ونشر واستضافة خوادم MCP على Netlify

هل أنت مستعد لتعزيز سير عمل الذكاء الاصطناعي الخاص بك باستخدام خادم MCP على Netlify؟ تخيل أنك تمنح وكلاء الذكاء الاصطناعي لديك - مثل Claude أو Cursor أو VS Code Copilot - خطًا مباشرًا لأدوات وبيانات منصتك، وكل ذلك مستضاف على البنية التحتية الخالية من الخوادم (serverless) الرائعة من Netlify. في هذا الدليل الممتع والودي، سنتناول ماهية خادم MCP على Netlify، ولماذا هو رائع، وكيفية بنائه ونشره واستضافته خطوة بخطوة. بالإضافة إلى ذلك، سنقوم باختباره بمثال رائع للتأكد من أنه يعمل. دعنا نتعمق ونجعل ذكاءك الاصطناعي أكثر ذكاءً!

💡

هل تريد أداة رائعة لاختبار واجهة برمجة التطبيقات (API) تولد وثائق API جميلة؟

هل تريد منصة متكاملة وشاملة لفريق المطورين الخاص بك للعمل معًا بـ أقصى إنتاجية؟

Apidog يلبي جميع متطلباتك، و يحل محل Postman بسعر أكثر بأسعار معقولة!

button

ما هو خادم MCP ولماذا Netlify؟

بروتوكول سياق النموذج (MCP) يشبه محولًا عالميًا لوكلاء الذكاء الاصطناعي. إنه معيار مفتوح وخفيف الوزن يتيح لعملاء الذكاء الاصطناعي (على سبيل المثال، Claude Desktop أو Cursor) التحدث إلى الخوادم التي تعرض الأدوات والبيانات والمطالبات. هذا يعني أن ذكاءك الاصطناعي يمكنه التفاعل مع ميزات تطبيقك في الوقت الفعلي، مما يجعله واعيًا بالسياق وأكثر فائدة بكثير.

استضافة خادم MCP الخاص بك على Netlify أمر لا يحتاج إلى تفكير. منصة Netlify الخالية من الخوادم (serverless) قابلة للتوسع، وتتطلب صيانة منخفضة، ومثالية لنشر خوادم MCP. إنها تتعامل مع الأعباء الثقيلة - ارتفاع حركة المرور والتحديثات والأمان - حتى تتمكن من التركيز على بناء تكاملات ذكاء اصطناعي رائعة. سواء كنت تضيف الذكاء الاصطناعي إلى مدونة أو موقع تجارة إلكترونية أو تطبيق مخصص، فإن خادم MCP على Netlify يجعله سلسًا.

لماذا ستحب استضافة خوادم MCP على Netlify

إليك سبب كون خادم MCP على Netlify مغيرًا للعبة:

قوة قابلة للتوسع: تتعامل وظائف Netlify الخالية من الخوادم مع ارتفاعات حركة المرور دون عناء.
نشر سهل: قم بالدفع إلى GitHub، و Netlify ينشر خادمك تلقائيًا. لا تتطلب شهادة DevOps!
صديق للذكاء الاصطناعي: يربط وكلاء الذكاء الاصطناعي ببيانات وأدوات منصتك بأقل قدر من الإعداد.
تكاليف منخفضة: يعني الخادم بدون خادم أنك تدفع فقط مقابل ما تستخدمه، مما يحافظ على انخفاض التكاليف.

هل أنت مستعد لإحياء ذكائك الاصطناعي؟ دعنا نعد خادم MCP الخاص بك على Netlify!

بناء ونشر واستضافة خوادم MCP على Netlify

المتطلبات الأساسية

قبل أن نبدأ، تأكد من أن لديك:

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).
داخله، أنشئ دليل /netlify/functions لرمز خادم MCP الخاص بك.

مثال على الهيكل:

/mcp-netlify
  /netlify
    /functions
      mcp.js

إنشاء موقع Netlify:

سجل الدخول إلى app.netlify.com.
انقر فوق موقع جديد من Git أو أنشئ موقعًا جديدًا يدويًا.
إذا كنت تستخدم Git، قم بربط مستودع GitHub/GitLab/Bitbucket الخاص بك لاحقًا.

الخطوة 2: تنفيذ وظيفة خادم MCP

أنشئ ملف mcp.js في /netlify/functions لتعريف خادم MCP الخاص بك على Netlify. يستخدم هذا SDK الخاص بـ MCP لعرض الأدوات والموارد والمطالبات لعملاء الذكاء الاصطناعي.

إليك مثال لـ 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 serverless function handler which handles all inbound requests
export default async (req: Request) => {

  try {

    // for stateless MCP, we'll only use the POST requests that are sent
    // with event information for the init phase and resource/tool requests
    if (req.method === "POST") {

      // Convert the Request object into a Node.js Request object
      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 {

  // initialize our MCP Server instance that we will
  // attach all of our functionality and data.
  const server = new McpServer(
    {
      name: "acme-devtool-server",
      version: "1.0.0",
    },
    { capabilities: { logging: {} } }
  );


  server.tool(
    "run-analysis-report",
    "Checks the data available in Acme Devtool and returns all of the important data regarding the latest numbers.",
    {
      days: z.number().describe("Number of days to analyze").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.`),
            }),
          },
        ],
      };
    }
  );

  // providing a resource for agents that might need to take a given report
  // and parse the information in it
  server.resource(
    "interpreting-reports",
    "acme://interpreting-reports",
    { mimeType: "text/plain" },
    async (): Promise<ReadResourceResult> => {
      return {
        contents: [
          {
            uri: "acme://interpreting-reports",
            text: `Reports from Acme will include an array of text that informs the growth of over that number of days. It's unstructured text but is consistent so parsing the information can be based on looking at a single line to understand where the data is.`,
          },
        ],
      };
    }
  );

  return server;
};

// Ensure this function responds to the <domain>/mcp path
// This can be any path you want but you'll need to ensure the
// mcp server config you use/share matches this path.
export const config = {
  path: "/mcp"
};

ينشئ هذا نقطة نهاية MCP بدون خادم في /.netlify/functions/mcp. قم بتخصيص tools و resources و prompts بناءً على احتياجات تطبيقك (على سبيل المثال، استدعاءات API، استعلامات قواعد البيانات).

الخطوة 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. سيكون خادم MCP الخاص بك على Netlify متاحًا على:

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

لديك خياران للنشر:

الخيار 1: النشر المستند إلى Git

ادفع مشروعك إلى مستودع GitHub أو GitLab أو Bitbucket.
في Netlify، اربط المستودع بموقعك ضمن Site configuration > Build & deploy (إعدادات الموقع > البناء والنشر).
يقوم Netlify بالنشر تلقائيًا عند كل دفع إلى فرعك الرئيسي.

الخيار 2: النشر عبر CLI

انشر مباشرة باستخدام Netlify CLI:

netlify deploy

للإنتاج:

netlify deploy --prod

بعد النشر، سيكون خادم MCP الخاص بك على Netlify مباشرًا على:

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

لاحظ عنوان URL للخطوة التالية.

الخطوة 6: ربط عملاء MCP بخادم MCP الخاص بك على Netlify

قم بتكوين عميل الذكاء الاصطناعي الخاص بك (Claude Desktop أو Cursor أو Windsurf أو VS Code Copilot) للاتصال بخادم MCP الخاص بك المنشور على Netlify. استخدم أحد هذه التكوينات:

للاختبار المحلي

{
  "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 بعنوان URL الفعلي لموقع Netlify الخاص بك.

تكوين العميل

Claude Desktop:

انتقل إلى Settings > Developer > Edit Config (الإعدادات > المطور > تحرير التكوين).
افتح claude_desktop_config.json، الصق التكوين، واحفظ.
أعد تشغيل Claude Desktop.

Cursor:

انتقل إلى Settings > Tools and Integrations > Add a Custom MCP Server (الإعدادات > الأدوات والتكاملات > إضافة خادم MCP مخصص).
الصق التكوين واحفظ.
قم بالتبديل إلى Agent Mode (وضع الوكيل) في لوحة الدردشة.

VS Code Copilot:

افتح Settings (الإعدادات) (Ctrl+, أو Cmd+,).
ابحث عن "MCP" وقم بتمكينه ضمن Features > Chat (الميزات > الدردشة).
انقر فوق Edit in settings.json (تحرير في settings.json)، الصق التكوين، واحفظ.

الخطوة 7: اختبار خادم MCP الخاص بك

دعنا نختبر خادم MCP الخاص بك على Netlify باستخدام مطالبة نموذجية في عميل MCP الخاص بك:

باستخدام خادم MCP على Netlify، هل يمكنك تشغيل تقرير لآخر 3 أيام؟

إذا استخدمت نموذج mcp.js أعلاه، يجب أن يستجيب الذكاء الاصطناعي بشيء مثل:

هذا يؤكد أن خادمك يعمل. قم بتخصيص mcp.js الخاص بك لإضافة أدوات حقيقية (على سبيل المثال، تكاملات API، استعلامات قواعد البيانات) لمهام أكثر تعقيدًا.

الخطوة 8: الفحص والتصحيح

قم بتشغيل MCP Inspector على خادمك المنشور:

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

تحقق من سجلات الوظائف (Function logs) في لوحة تحكم Netlify بحثًا عن الأخطاء.
استخدم تحليلات Netlify لمراقبة الاستخدام وتحسين الأداء.
أضف المصادقة (على سبيل المثال، مفاتيح API) عبر متغيرات بيئة Netlify للأمان.

أفضل الممارسات لخوادم MCP على Netlify

اجعلها عديمة الحالة (Stateless): صمم الوظائف لتكون مؤقتة، حيث لا تحتفظ استدعاءات الخادم بدون خادم بالحالة.
تأمين الأسرار: قم بتخزين مفاتيح API أو الرموز المميزة في متغيرات البيئة (Environment variables) الخاصة بـ Netlify (Site configuration > Environment variables).
إعداد هجين: إذا كان عميلك لا يدعم التدفق، قم بتشغيل وكيل MCP محلي للربط بخادم Netlify الخاص بك.
التحكم في الإصدار: استخدم Git للتعاون والعودة السهلة للإصدارات السابقة.
تحسين الأداء: قلل وقت تنفيذ الوظيفة لتقليل زمن الاستجابة والتكاليف.

نصائح استكشاف الأخطاء وإصلاحها

الخادم لا يستجيب؟ تحقق من سجلات Netlify CLI (netlify dev) أو سجلات الوظائف بحثًا عن الأخطاء.
مشاكل اتصال العميل؟ تحقق من عنوان URL لتكوين MCP وأعد تشغيل العميل.
المفتش لا يعمل؟ تأكد من تحديث حزمة MCP Inspector (npx @modelcontextprotocol/inspector@latest).
حدود المعدل؟ راقب استخدام وظائف Netlify واضبطها لسيناريوهات حركة المرور العالية.

لماذا تستضيف خوادم MCP على Netlify؟

يعد خادم MCP على Netlify تطابقًا مثاليًا لسير العمل المدفوع بالذكاء الاصطناعي. تتوسع منصة Netlify الخالية من الخوادم بسهولة، لذا يمكن لخادم MCP الخاص بك التعامل مع آلاف طلبات الذكاء الاصطناعي دون تعطل. بالإضافة إلى ذلك، فإن نشرها المستند إلى Git و CLI يجعل التحديثات سهلة. سواء كنت تقوم ببناء روبوت محادثة، أو أداة لإدارة المحتوى، أو تكامل للتجارة الإلكترونية، فإن استضافة خادم MCP الخاص بك على Netlify تضمن وصول وكلاء الذكاء الاصطناعي لديك بشكل مباشر وديناميكي إلى ميزات منصتك.

على سبيل المثال، يمكنك إنشاء أداة MCP لجلب بيانات المستخدم من API تطبيقك أو تشغيل سير عمل آلي بناءً على مطالبات الذكاء الاصطناعي. يعني الإعداد الخالي من الخوادم أنك لا تحتاج إلى إدارة الخوادم - فقط قم بالترميز والنشر ودع Netlify يقوم بالباقي.

الخاتمة

وها قد وصلت! لقد تعلمت للتو كيفية بناء ونشر واستضافة خادم MCP على Netlify، لتحويل وكلاء الذكاء الاصطناعي لديك إلى قوى إنتاجية. من إعداد وظيفة بسيطة بدون خادم إلى ربطها بـ Claude أو Cursor أو VS Code، يجعل هذا الدليل من السهل دمج الذكاء الاصطناعي مع منصتك. يوضح طلب الاختبار الخاص بنا - "معالجة الاستعلام: مرحبًا يا Netlify!" - مدى سهولة البدء.

هل أنت مستعد للمضي قدمًا؟ أضف أدوات مخصصة إلى ملف mcp.js الخاص بك، مثل استدعاءات API أو استعلامات قواعد البيانات، وشاهد ذكائك الاصطناعي يقوم بأشياء مذهلة.

💡

button