Blog

Hướng Dẫn Xây Dựng, Triển Khai và Lưu Trữ Máy Chủ MCP trên Netlify

Ashley Goolam

Ashley Goolam

15 tháng 7 2025

Hướng Dẫn Xây Dựng, Triển Khai và Lưu Trữ Máy Chủ MCP trên Netlify

Bạn đã sẵn sàng tăng tốc quy trình làm việc AI của mình với **Máy chủ MCP trên Netlify** chưa? Hãy tưởng tượng việc cung cấp cho các tác nhân AI của bạn—như Claude, Cursor hoặc VS Code Copilot—một đường dây trực tiếp đến các công cụ và dữ liệu của nền tảng, tất cả đều được lưu trữ trên cơ sở hạ tầng phi máy chủ (serverless) mượt mà của Netlify. Trong hướng dẫn thú vị, mang tính trò chuyện này, chúng ta sẽ cùng tìm hiểu **Máy chủ MCP trên Netlify** là gì, tại sao nó tuyệt vời, và cách xây dựng, triển khai, cũng như lưu trữ nó từng bước một. Ngoài ra, chúng ta sẽ thử nghiệm nó với một ví dụ thú vị để đảm bảo nó hoạt động. Hãy cùng bắt đầu và làm cho AI của bạn thông minh hơn!

💡
Bạn muốn một công cụ kiểm thử API tuyệt vời có thể tạo Tài liệu API đẹp mắt?

Bạn muốn một nền tảng tích hợp, tất cả trong một cho Đội ngũ Phát triển của mình để làm việc cùng nhau với năng suất tối đa?

Apidog đáp ứng mọi yêu cầu của bạn, và thay thế Postman với mức giá phải chăng hơn nhiều!
Nút

Máy chủ MCP là gì và tại sao lại là Netlify?

**Giao thức Ngữ cảnh Mô hình (Model Context Protocol - MCP)** giống như một bộ chuyển đổi phổ quát cho các tác nhân AI. Đây là một tiêu chuẩn mở, nhẹ cho phép các máy khách AI (ví dụ: Claude Desktop hoặc Cursor) giao tiếp với các máy chủ cung cấp công cụ, dữ liệu và lời nhắc. Điều này có nghĩa là AI của bạn có thể tương tác với các tính năng của ứng dụng trong thời gian thực, giúp nó nhận biết ngữ cảnh và hữu ích hơn nhiều.

Việc lưu trữ **Máy chủ MCP của bạn trên Netlify** là một lựa chọn không cần suy nghĩ. Nền tảng phi máy chủ của Netlify có khả năng mở rộng, ít cần bảo trì và hoàn hảo để triển khai các máy chủ MCP. Nó xử lý các công việc nặng nhọc—lưu lượng truy cập tăng đột biến, cập nhật và bảo mật—để bạn có thể tập trung vào việc xây dựng các tích hợp AI thú vị. Dù bạn đang thêm AI vào blog, trang thương mại điện tử hay ứng dụng tùy chỉnh, **Máy chủ MCP trên Netlify** đều giúp việc này trở nên liền mạch.

trang web chính thức của netlify

Tại sao bạn sẽ yêu thích việc lưu trữ Máy chủ MCP trên Netlify

Đây là lý do tại sao **Máy chủ MCP trên Netlify** là một yếu tố thay đổi cuộc chơi:

Sẵn sàng đưa AI của bạn vào cuộc sống chưa? Hãy cùng thiết lập **Máy chủ MCP của bạn trên Netlify**!

triển khai lên netlify

Xây dựng, Triển khai và Lưu trữ Máy chủ MCP trên Netlify

Điều kiện tiên quyết

Trước khi bắt đầu, hãy đảm bảo bạn có:

Bước 1: Thiết lập Dự án Netlify của bạn

Thiết lập Cấu trúc Dự án:

Cấu trúc ví dụ:

/mcp-netlify
  /netlify
    /functions
      mcp.js

Tạo một Trang Netlify:

Bước 2: Triển khai Chức năng Máy chủ MCP

Tạo tệp `mcp.js` trong `/netlify/functions` để định nghĩa **Máy chủ MCP của bạn trên Netlify**. Điều này sử dụng MCP SDK để cung cấp các công cụ, tài nguyên và lời nhắc cho các máy khách AI.

Đây là một ví dụ cho `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"
};

Điều này tạo ra một điểm cuối MCP phi máy chủ tại `/.netlify/functions/mcp`. Tùy chỉnh `tools` (công cụ), `resources` (tài nguyên) và `prompts` (lời nhắc) dựa trên nhu cầu của ứng dụng của bạn (ví dụ: gọi API, truy vấn cơ sở dữ liệu).

Bước 3: Cài đặt các phụ thuộc

Trong thư mục dự án của bạn, khởi tạo một dự án Node.js và cài đặt MCP SDK:

npm init -y
npm install @modelcontextprotocol/sdk

Bước 4: Phát triển và Kiểm thử cục bộ

  1. Cài đặt Netlify CLI:
npm install -g netlify-cli

2. Chạy cục bộ:

netlify dev

Điều này khởi động một máy chủ cục bộ tại `http://localhost:8888`. **Máy chủ MCP của bạn trên Netlify** sẽ có sẵn tại:

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

3. Kiểm thử với MCP Inspector:

Sử dụng MCP Inspector để xác minh máy chủ của bạn:

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

Mở http://localhost:6274 trong trình duyệt của bạn để khám phá các công cụ và tài nguyên của máy chủ một cách tương tác.

kiểm thử với mcp inspector

Bước 5: Triển khai Máy chủ MCP của bạn lên Netlify

Bạn có hai tùy chọn triển khai:

Tùy chọn 1: Triển khai dựa trên Git

  1. Đẩy dự án của bạn lên một kho lưu trữ GitHub, GitLab hoặc Bitbucket.
  2. Trong Netlify, liên kết kho lưu trữ với trang của bạn trong phần **Site configuration > Build & deploy** (Cấu hình trang > Xây dựng & triển khai).
  3. Netlify tự động triển khai trên mỗi lần đẩy lên nhánh chính của bạn.
cài đặt netlify vào kho lưu trữ github

Tùy chọn 2: Triển khai CLI

Triển khai trực tiếp với Netlify CLI:

netlify deploy

Đối với môi trường sản xuất:

netlify deploy --prod

Sau khi triển khai, **Máy chủ MCP của bạn trên Netlify** sẽ hoạt động tại:

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

Ghi chú URL cho bước tiếp theo.

Bước 6: Kết nối Máy khách MCP với Máy chủ MCP Netlify của bạn

Cấu hình máy khách AI của bạn (Claude Desktop, Cursor, Windsurf, hoặc VS Code Copilot) để kết nối với **Máy chủ MCP đã triển khai của bạn trên Netlify**. Sử dụng một trong các cấu hình sau:

Để kiểm thử cục bộ

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

Đối với Máy chủ đã triển khai

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

Thay thế `your-site-name.netlify.app` bằng URL trang Netlify thực tế của bạn.

Cấu hình Máy khách

Claude Desktop:

  1. Chuyển đến **Cài đặt > Nhà phát triển > Chỉnh sửa Cấu hình**.
  2. Mở `claude_desktop_config.json`, dán cấu hình và lưu.
  3. Khởi động lại Claude Desktop.
claude chỉnh sửa cấu hình mcp

Cursor:

  1. Chuyển đến **Cài đặt > Công cụ và Tích hợp > Thêm Máy chủ MCP Tùy chỉnh**.
  2. Dán cấu hình và lưu.
  3. Chuyển sang **Chế độ Tác nhân** trong bảng trò chuyện.
chỉnh sửa cấu hình mcp của cursor

VS Code Copilot:

  1. Mở **Cài đặt** (`Ctrl+,` hoặc `Cmd+,`).
  2. Tìm kiếm “MCP” và bật nó trong **Tính năng > Trò chuyện**.
  3. Nhấp vào **Chỉnh sửa trong settings.json**, dán cấu hình và lưu.
chỉnh sửa cấu hình mcp của vs code

Bước 7: Kiểm thử Máy chủ MCP của bạn

Hãy kiểm thử **Máy chủ MCP của bạn trên Netlify** với một lời nhắc mẫu trong máy khách MCP của bạn:

Sử dụng Máy chủ MCP trên Netlify, bạn có thể chạy báo cáo trong 3 ngày qua không?

Nếu bạn đã sử dụng tệp `mcp.js` mẫu ở trên, AI sẽ phản hồi với nội dung tương tự như:

kiểm thử máy chủ mcp từ xa

Điều này xác nhận máy chủ của bạn đang hoạt động. Tùy chỉnh tệp `mcp.js` của bạn để thêm các công cụ thực tế (ví dụ: tích hợp API, truy vấn cơ sở dữ liệu) cho các tác vụ phức tạp hơn.

Bước 8: Kiểm tra và Gỡ lỗi

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

Các Thực hành Tốt nhất cho Máy chủ MCP trên Netlify

Mẹo khắc phục sự cố

Tại sao nên lưu trữ Máy chủ MCP trên Netlify?

**Máy chủ MCP trên Netlify** là một sự kết hợp hoàn hảo cho các quy trình làm việc dựa trên AI. Nền tảng phi máy chủ của Netlify mở rộng dễ dàng, vì vậy máy chủ MCP của bạn có thể xử lý hàng nghìn yêu cầu AI mà không bị sập. Hơn nữa, việc triển khai dựa trên Git và CLI của nó giúp việc cập nhật trở nên dễ dàng. Cho dù bạn đang xây dựng một chatbot, một công cụ quản lý nội dung hay một tích hợp thương mại điện tử, việc lưu trữ **Máy chủ MCP của bạn trên Netlify** đảm bảo các tác nhân AI của bạn có quyền truy cập trực tiếp, động vào các tính năng của nền tảng.

Ví dụ, bạn có thể tạo một công cụ MCP để lấy dữ liệu người dùng từ API của ứng dụng hoặc kích hoạt các quy trình làm việc tự động dựa trên lời nhắc AI. Thiết lập phi máy chủ có nghĩa là bạn không cần phải quản lý máy chủ—chỉ cần viết mã, triển khai và để Netlify làm phần còn lại.

Kết luận

Và thế là xong! Bạn vừa học cách xây dựng, triển khai và lưu trữ **Máy chủ MCP trên Netlify**, biến các tác nhân AI của bạn thành những cỗ máy năng suất. Từ việc thiết lập một hàm phi máy chủ đơn giản đến việc kết nối nó với Claude, Cursor hoặc VS Code, hướng dẫn này giúp việc tích hợp AI với nền tảng của bạn trở nên dễ dàng. Lời nhắc kiểm thử của chúng tôi—“xử lý truy vấn: Xin chào, Netlify!”—cho thấy việc bắt đầu dễ dàng đến mức nào.

Sẵn sàng tiến xa hơn? Thêm các công cụ tùy chỉnh vào tệp `mcp.js` của bạn, như các cuộc gọi API hoặc truy vấn cơ sở dữ liệu, và xem AI của bạn làm những điều tuyệt vời.

💡
Bạn muốn một công cụ kiểm thử API tuyệt vời có thể tạo Tài liệu API đẹp mắt?

Bạn muốn một nền tảng tích hợp, tất cả trong một cho Đội ngũ Phát triển của mình để làm việc cùng nhau với năng suất tối đa?

Apidog đáp ứng mọi yêu cầu của bạn, và thay thế Postman với mức giá phải chăng hơn nhiều!
Nút

Thực hành thiết kế API trong Apidog

Khám phá cách dễ dàng hơn để xây dựng và sử dụng API

Đăng ký miễn phíTải xuống