วิธีสร้าง ติดตั้ง และโฮสต์เซิร์ฟเวอร์ MCP บน Netlify

คุณพร้อมที่จะเพิ่มประสิทธิภาพเวิร์กโฟลว์ AI ของคุณด้วย **MCP Server บน Netlify** แล้วหรือยัง? ลองจินตนาการถึงการมอบช่องทางโดยตรงให้เอเจนต์ AI ของคุณ—เช่น Claude, Cursor หรือ VS Code Copilot—เข้าถึงเครื่องมือและข้อมูลของแพลตฟอร์มของคุณ ทั้งหมดนี้โฮสต์อยู่บนโครงสร้างพื้นฐานแบบ Serverless ที่ยอดเยี่ยมของ Netlify ในคู่มือที่สนุกและเป็นกันเองนี้ เราจะพาคุณไปทำความเข้าใจว่า **MCP Server บน Netlify** คืออะไร ทำไมมันถึงยอดเยี่ยม และวิธีการสร้าง, ปรับใช้ และโฮสต์ทีละขั้นตอน นอกจากนี้ เราจะทดสอบด้วยตัวอย่างที่น่าสนใจเพื่อให้แน่ใจว่ามันทำงานได้ดี มาเริ่มต้นและทำให้ AI ของคุณฉลาดขึ้นกันเถอะ!

💡

ต้องการเครื่องมือทดสอบ API ที่ยอดเยี่ยมที่สร้าง เอกสารประกอบ API ที่สวยงาม หรือไม่?

ต้องการแพลตฟอร์มแบบครบวงจรที่รวมทุกอย่างสำหรับทีมพัฒนาของคุณเพื่อทำงานร่วมกันด้วย ประสิทธิภาพสูงสุด หรือไม่?

Apidog ตอบสนองทุกความต้องการของคุณ และ เข้ามาแทนที่ Postman ในราคาที่ย่อมเยากว่ามาก!

button

MCP Server คืออะไร และทำไมต้องเป็น Netlify?

**Model Context Protocol (MCP)** เปรียบเสมือนอะแดปเตอร์สากลสำหรับเอเจนต์ AI เป็นมาตรฐานแบบเปิดและมีน้ำหนักเบาที่ช่วยให้ไคลเอ็นต์ AI (เช่น Claude Desktop หรือ Cursor) สามารถสื่อสารกับเซิร์ฟเวอร์ที่เปิดเผยเครื่องมือ, ข้อมูล และพร้อมต์ได้ ซึ่งหมายความว่า AI ของคุณสามารถโต้ตอบกับฟีเจอร์ของแอปพลิเคชันของคุณได้แบบเรียลไทม์ ทำให้มันรับรู้บริบทและมีประโยชน์มากขึ้นอย่างมาก

การโฮสต์ **MCP Server ของคุณบน Netlify** เป็นเรื่องง่ายมาก แพลตฟอร์ม Serverless ของ Netlify สามารถปรับขนาดได้, บำรุงรักษาน้อย และเหมาะอย่างยิ่งสำหรับการปรับใช้ MCP Server มันจัดการงานหนัก—เช่น ปริมาณการใช้งานที่เพิ่มขึ้น, การอัปเดต และความปลอดภัย—เพื่อให้คุณสามารถมุ่งเน้นไปที่การสร้างการผสานรวม AI ที่ยอดเยี่ยมได้ ไม่ว่าคุณจะเพิ่ม AI ลงในบล็อก, เว็บไซต์อีคอมเมิร์ซ หรือแอปพลิเคชันที่กำหนดเอง **MCP Server บน Netlify** ทำให้ทุกอย่างเป็นไปอย่างราบรื่น

ทำไมคุณถึงหลงรักการโฮสต์ MCP Server บน Netlify

นี่คือเหตุผลที่ **MCP Server บน Netlify** เป็นตัวเปลี่ยนเกม:

**พลังที่ปรับขนาดได้**: ฟังก์ชัน Serverless ของ Netlify จัดการกับปริมาณการใช้งานที่เพิ่มขึ้นได้อย่างสบายๆ
**ปรับใช้ได้ง่าย**: เพียงแค่พุชไปยัง GitHub, Netlify ก็จะปรับใช้เซิร์ฟเวอร์ของคุณโดยอัตโนมัติ ไม่ต้องมีความรู้ด้าน DevOps!
**เป็นมิตรกับ AI**: เชื่อมต่อเอเจนต์ AI เข้ากับข้อมูลและเครื่องมือของแพลตฟอร์มของคุณด้วยการตั้งค่าเพียงเล็กน้อย
**ค่าใช้จ่ายต่ำ**: Serverless หมายความว่าคุณจ่ายเฉพาะสิ่งที่คุณใช้เท่านั้น ช่วยลดต้นทุน

พร้อมที่จะทำให้ AI ของคุณมีชีวิตชีวาแล้วหรือยัง? มาตั้งค่า **MCP Server บน Netlify** ของคุณกันเถอะ!

การสร้าง, ปรับใช้ และโฮสต์ MCP Server บน 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 Server ของคุณ

โครงสร้างตัวอย่าง:

/mcp-netlify
  /netlify
    /functions
      mcp.js

**สร้างไซต์ Netlify:**

เข้าสู่ระบบ app.netlify.com
คลิก **New site from Git** หรือสร้างไซต์ใหม่ด้วยตนเอง
หากใช้ Git ให้เชื่อมต่อ repository GitHub/GitLab/Bitbucket ของคุณในภายหลัง

ขั้นตอนที่ 2: ใช้ฟังก์ชัน MCP Server

สร้างไฟล์ mcp.js ใน /netlify/functions เพื่อกำหนด **MCP Server บน Netlify** ของคุณ สิ่งนี้ใช้ 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 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 แบบ Serverless ที่ /.netlify/functions/mcp ปรับแต่ง tools, resources และ prompts ตามความต้องการของแอปพลิเคชันของคุณ (เช่น การเรียก API, การสืบค้นฐานข้อมูล)

ขั้นตอนที่ 3: ติดตั้ง Dependencies

ในโฟลเดอร์โปรเจกต์ของคุณ ให้เริ่มต้นโปรเจกต์ 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 Server บน 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 Server ของคุณไปยัง Netlify

คุณมีสองตัวเลือกในการปรับใช้:

**ตัวเลือกที่ 1: การปรับใช้ที่อิง Git**

พุชโปรเจกต์ของคุณไปยัง repository ของ GitHub, GitLab หรือ Bitbucket
ใน Netlify ให้เชื่อมโยง repository กับไซต์ของคุณภายใต้ **Site configuration > Build & deploy**
Netlify จะปรับใช้โดยอัตโนมัติทุกครั้งที่พุชไปยัง main branch ของคุณ

**ตัวเลือกที่ 2: การปรับใช้ด้วย CLI**

ปรับใช้โดยตรงด้วย Netlify CLI:

netlify deploy

สำหรับการใช้งานจริง (production):

netlify deploy --prod

หลังจากการปรับใช้ **MCP Server บน Netlify** ของคุณจะพร้อมใช้งานที่:

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

จด URL ไว้สำหรับขั้นตอนถัดไป

ขั้นตอนที่ 6: เชื่อมต่อไคลเอ็นต์ MCP กับ Netlify MCP Server ของคุณ

กำหนดค่าไคลเอ็นต์ AI ของคุณ (Claude Desktop, Cursor, Windsurf หรือ VS Code Copilot) เพื่อเชื่อมต่อกับ **MCP Server บน 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**
วางการกำหนดค่าและบันทึก
เปลี่ยนเป็น **Agent Mode** ในแผงแชท

**VS Code Copilot**:

เปิด **Settings** (Ctrl+, หรือ Cmd+,)
ค้นหา “MCP” และเปิดใช้งานภายใต้ **Features > Chat**
คลิก **Edit in settings.json**, วางการกำหนดค่า และบันทึก

ขั้นตอนที่ 7: ทดสอบ MCP Server ของคุณ

มาทดสอบ **MCP Server บน Netlify** ของคุณด้วยพร้อมต์ตัวอย่างในไคลเอ็นต์ MCP ของคุณ:

ใช้ MCP Server บน Netlify คุณสามารถเรียกใช้รายงานสำหรับ 3 วันที่ผ่านมาได้หรือไม่?

หากคุณใช้ mcp.js ตัวอย่างข้างต้น AI ควรตอบกลับด้วยบางอย่างเช่น:

สิ่งนี้ยืนยันว่าเซิร์ฟเวอร์ของคุณทำงานได้ ปรับแต่ง mcp.js ของคุณเพื่อเพิ่มเครื่องมือจริง (เช่น การผสานรวม API, การสืบค้นฐานข้อมูล) สำหรับงานที่ซับซ้อนยิ่งขึ้น

ขั้นตอนที่ 8: ตรวจสอบและดีบัก

**รัน MCP Inspector** บนเซิร์ฟเวอร์ที่คุณปรับใช้:

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

ตรวจสอบ **Function logs** ของ Netlify ในแดชบอร์ด Netlify เพื่อหาข้อผิดพลาด
ใช้การวิเคราะห์ของ Netlify เพื่อตรวจสอบการใช้งานและเพิ่มประสิทธิภาพ
เพิ่มการรับรองความถูกต้อง (เช่น API keys) ผ่านตัวแปรสภาพแวดล้อมของ Netlify เพื่อความปลอดภัย

แนวทางปฏิบัติที่ดีที่สุดสำหรับ MCP Server บน Netlify

**คงสถานะแบบ Stateless**: ออกแบบฟังก์ชันให้เป็นแบบชั่วคราว เนื่องจาก Serverless invocations จะไม่คงสถานะไว้
**รักษาความลับ**: จัดเก็บ API keys หรือโทเค็นใน **Environment variables** ของ Netlify (Site configuration > Environment variables)
**การตั้งค่าแบบไฮบริด**: หากไคลเอ็นต์ของคุณไม่รองรับการสตรีม ให้รัน MCP proxy ในเครื่องเพื่อเชื่อมต่อไปยัง Netlify Server ของคุณ
**การควบคุมเวอร์ชัน**: ใช้ Git สำหรับการทำงานร่วมกันและการย้อนกลับที่ง่ายดาย
**เพิ่มประสิทธิภาพ**: ลดเวลาการทำงานของฟังก์ชันให้น้อยที่สุดเพื่อลดเวลาแฝงและค่าใช้จ่าย

เคล็ดลับการแก้ไขปัญหา

**เซิร์ฟเวอร์ไม่ตอบสนอง?** ตรวจสอบบันทึก Netlify CLI (netlify dev) หรือ Function logs เพื่อหาข้อผิดพลาด
**ปัญหาการเชื่อมต่อไคลเอ็นต์?** ตรวจสอบ URL การกำหนดค่า MCP และรีสตาร์ทไคลเอ็นต์
**Inspector ไม่ทำงาน?** ตรวจสอบให้แน่ใจว่าแพ็กเกจ MCP Inspector ได้รับการอัปเดตแล้ว (npx @modelcontextprotocol/inspector@latest)
**ข้อจำกัดอัตรา (Rate Limits)?** ตรวจสอบการใช้งานฟังก์ชันของ Netlify และปรับให้เหมาะสมสำหรับสถานการณ์ที่มีการใช้งานสูง

ทำไมต้องโฮสต์ MCP Server บน Netlify?

**MCP Server บน Netlify** เป็นคู่ที่สมบูรณ์แบบสำหรับเวิร์กโฟลว์ที่ขับเคลื่อนด้วย AI แพลตฟอร์ม Serverless ของ Netlify สามารถปรับขนาดได้อย่างง่ายดาย ดังนั้น MCP Server ของคุณจึงสามารถจัดการกับคำขอ AI นับพันได้โดยไม่ล่ม นอกจากนี้ การปรับใช้ที่อิง Git และ CLI ยังทำให้การอัปเดตเป็นเรื่องง่าย ไม่ว่าคุณจะสร้างแชทบอท, เครื่องมือจัดการเนื้อหา หรือการผสานรวมอีคอมเมิร์ซ การโฮสต์ **MCP Server บน Netlify** ช่วยให้มั่นใจว่าเอเจนต์ AI ของคุณสามารถเข้าถึงคุณสมบัติของแพลตฟอร์มของคุณได้แบบเรียลไทม์และไดนามิก

ตัวอย่างเช่น คุณสามารถสร้างเครื่องมือ MCP เพื่อดึงข้อมูลผู้ใช้จาก API ของแอปของคุณ หรือเรียกใช้เวิร์กโฟลว์อัตโนมัติโดยอิงจากพร้อมต์ AI การตั้งค่าแบบ Serverless หมายความว่าคุณไม่จำเป็นต้องจัดการเซิร์ฟเวอร์—เพียงแค่เขียนโค้ด, ปรับใช้ และปล่อยให้ Netlify จัดการส่วนที่เหลือ

บทสรุป

และนี่คือทั้งหมด! คุณเพิ่งได้เรียนรู้วิธีการสร้าง, ปรับใช้ และโฮสต์ **MCP Server บน Netlify** ซึ่งเปลี่ยนเอเจนต์ AI ของคุณให้เป็นขุมพลังแห่งประสิทธิภาพ ตั้งแต่การตั้งค่าฟังก์ชัน Serverless อย่างง่ายไปจนถึงการเชื่อมต่อกับ Claude, Cursor หรือ VS Code คู่มือนี้ทำให้การผสานรวม AI เข้ากับแพลตฟอร์มของคุณเป็นเรื่องง่าย พร้อมต์ทดสอบของเรา—“process the query: Hello, Netlify!”—แสดงให้เห็นว่าการเริ่มต้นนั้นตรงไปตรงมาเพียงใด

พร้อมที่จะก้าวไปอีกขั้นแล้วหรือยัง? เพิ่มเครื่องมือที่กำหนดเองลงใน mcp.js ของคุณ เช่น การเรียก API หรือการสืบค้นฐานข้อมูล และดู AI ของคุณทำสิ่งมหัศจรรย์

💡

button