Blog

Cara Membuat, Deploy, dan Hosting Server MCP di Netlify

Ashley Goolam

Ashley Goolam

15 July 2025

Cara Membuat, Deploy, dan Hosting Server MCP di Netlify

Siapkah Anda untuk meningkatkan alur kerja AI Anda dengan MCP Server di Netlify? Bayangkan memberikan agen AI Anda—seperti Claude, Cursor, atau VS Code Copilot—akses langsung ke alat dan data platform Anda, semuanya di-hosting di infrastruktur serverless Netlify yang canggih. Dalam panduan yang menyenangkan dan santai ini, kita akan membahas apa itu MCP Server di Netlify, mengapa itu luar biasa, dan cara membangun, menyebarkan, serta meng-hostingnya langkah demi langkah. Ditambah lagi, kita akan mengujinya dengan contoh menarik untuk memastikan berfungsi. Mari selami dan buat AI Anda lebih cerdas!

💡
Ingin alat Pengujian API hebat yang menghasilkan Dokumentasi API yang indah?

Ingin platform Terintegrasi, All-in-One untuk Tim Pengembang Anda agar dapat bekerja sama dengan produktivitas maksimal?

Apidog memenuhi semua kebutuhan Anda, dan menggantikan Postman dengan harga yang jauh lebih terjangkau!

button

Apa Itu MCP Server dan Mengapa Netlify?

Model Context Protocol (MCP) ibarat adaptor universal untuk agen AI. Ini adalah standar terbuka dan ringan yang memungkinkan klien AI (misalnya, Claude Desktop atau Cursor) berkomunikasi dengan server yang mengekspos alat, data, dan perintah. Ini berarti AI Anda dapat berinteraksi dengan fitur aplikasi Anda secara real-time, menjadikannya sadar konteks dan jauh lebih berguna.

Meng-hosting MCP Server Anda di Netlify adalah pilihan yang mudah. Platform serverless Netlify dapat diskalakan, rendah perawatan, dan sempurna untuk menyebarkan server MCP. Ini menangani pekerjaan berat—lonjakan lalu lintas, pembaruan, dan keamanan—sehingga Anda dapat fokus membangun integrasi AI yang keren. Baik Anda menambahkan AI ke blog, situs e-commerce, atau aplikasi kustom, MCP Server di Netlify membuatnya mulus.

situs web resmi netlify

Mengapa Anda Akan Menyukai Hosting MCP Server di Netlify

Berikut adalah mengapa MCP Server di Netlify adalah pengubah permainan:

Siap menghidupkan AI Anda? Mari kita siapkan MCP Server Anda di Netlify!

deploy ke netlify

Membangun, Menyebarkan, dan Meng-hosting MCP Server di Netlify

Prasyarat

Sebelum kita mulai, pastikan Anda memiliki:

Langkah 1: Siapkan Proyek Netlify Anda

Siapkan Struktur Proyek:

Contoh struktur:

/mcp-netlify
  /netlify
    /functions
      mcp.js

Buat Situs Netlify:

Langkah 2: Implementasikan Fungsi Server MCP

Buat file mcp.js di /netlify/functions untuk mendefinisikan MCP Server Anda di Netlify. Ini menggunakan MCP SDK untuk mengekspos alat, sumber daya, dan perintah ke klien AI.

Berikut adalah contoh untuk 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"
};

Ini membuat titik akhir MCP serverless di /.netlify/functions/mcp. Sesuaikan tools, resources, dan prompts berdasarkan kebutuhan aplikasi Anda (misalnya, panggilan API, kueri basis data).

Langkah 3: Instal Dependensi

Di folder proyek Anda, inisialisasi proyek Node.js dan instal MCP SDK:

npm init -y
npm install @modelcontextprotocol/sdk

Langkah 4: Pengembangan dan Pengujian Lokal

  1. Instal Netlify CLI:
npm install -g netlify-cli

2. Jalankan Secara Lokal:

netlify dev

Ini memulai server lokal di http://localhost:8888. MCP Server Anda di Netlify akan tersedia di:

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

3. Uji dengan MCP Inspector:

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

Buka http://localhost:6274 di browser Anda untuk menjelajahi alat dan sumber daya server Anda secara interaktif.

uji dengan mcp inspector

Langkah 5: Sebarkan MCP Server Anda ke Netlify

Anda memiliki dua opsi penyebaran:

Opsi 1: Penyebaran Berbasis Git

  1. Dorong proyek Anda ke repositori GitHub, GitLab, atau Bitbucket.
  2. Di Netlify, tautkan repositori ke situs Anda di bawah Konfigurasi situs > Build & deploy.
  3. Netlify secara otomatis menyebarkan pada setiap dorongan ke cabang utama Anda.
instal netlify ke repo github

Opsi 2: Penyebaran CLI

Sebarkan langsung dengan Netlify CLI:

netlify deploy

Untuk produksi:

netlify deploy --prod

Setelah penyebaran, MCP Server Anda di Netlify akan aktif di:

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

Catat URL untuk langkah berikutnya.

Langkah 6: Hubungkan Klien MCP ke MCP Server Netlify Anda

Konfigurasikan klien AI Anda (Claude Desktop, Cursor, Windsurf, atau VS Code Copilot) untuk terhubung ke MCP Server Anda yang telah disebarkan di Netlify. Gunakan salah satu konfigurasi berikut:

Untuk Pengujian Lokal

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

Untuk Server yang Telah Disebarkan

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

Ganti your-site-name.netlify.app dengan URL situs Netlify Anda yang sebenarnya.

Konfigurasi Klien

Claude Desktop:

  1. Buka Settings > Developer > Edit Config.
  2. Buka claude_desktop_config.json, tempel konfigurasi, dan simpan.
  3. Mulai ulang Claude Desktop.
claude edit konfigurasi mcp

Cursor:

  1. Buka Settings > Tools and Integrations > Add a Custom MCP Server.
  2. Tempel konfigurasi dan simpan.
  3. Beralih ke Agent Mode di panel obrolan.
edit konfigurasi mcp cursor

VS Code Copilot:

  1. Buka Settings (Ctrl+, atau Cmd+,).
  2. Cari “MCP” dan aktifkan di bawah Features > Chat.
  3. Klik Edit in settings.json, tempel konfigurasi, dan simpan.
edit konfigurasi mcp vs code

Langkah 7: Uji MCP Server Anda

Mari kita uji MCP Server Anda di Netlify dengan contoh perintah di klien MCP Anda:

Menggunakan MCP Server di Netlify, bisakah Anda menjalankan laporan untuk 3 hari terakhir?

Jika Anda menggunakan contoh mcp.js di atas, AI akan merespons dengan sesuatu seperti:

menguji remote mcp server

Ini mengonfirmasi bahwa server Anda berfungsi. Sesuaikan mcp.js Anda untuk menambahkan alat nyata (misalnya, integrasi API, kueri basis data) untuk tugas yang lebih kompleks.

Langkah 8: Periksa dan Debug

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

Praktik Terbaik untuk MCP Server di Netlify

Tips Pemecahan Masalah

Mengapa Meng-host MCP Server di Netlify?

MCP Server di Netlify adalah pasangan yang sempurna untuk alur kerja berbasis AI. Platform serverless Netlify dapat diskalakan dengan mudah, sehingga server MCP Anda dapat menangani ribuan permintaan AI tanpa macet. Selain itu, penyebaran berbasis Git dan CLI-nya membuat pembaruan menjadi sangat mudah. Baik Anda membangun chatbot, alat manajemen konten, atau integrasi e-commerce, meng-hosting MCP Server Anda di Netlify memastikan agen AI Anda memiliki akses langsung dan dinamis ke fitur platform Anda.

Misalnya, Anda dapat membuat alat MCP untuk mengambil data pengguna dari API aplikasi Anda atau memicu alur kerja otomatis berdasarkan perintah AI. Pengaturan serverless berarti Anda tidak perlu mengelola server—cukup kode, sebarkan, dan biarkan Netlify melakukan sisanya.

Kesimpulan

Dan selesai! Anda baru saja mempelajari cara membangun, menyebarkan, dan meng-hosting MCP Server di Netlify, mengubah agen AI Anda menjadi pembangkit produktivitas. Dari menyiapkan fungsi serverless sederhana hingga menghubungkannya dengan Claude, Cursor, atau VS Code, panduan ini memudahkan integrasi AI dengan platform Anda. Perintah uji kami—“proses kueri: Halo, Netlify!”—menunjukkan betapa mudahnya untuk memulai.

Siap melangkah lebih jauh? Tambahkan alat kustom ke mcp.js Anda, seperti panggilan API atau kueri basis data, dan saksikan AI Anda melakukan hal-hal menakjubkan.

💡
Ingin alat Pengujian API hebat yang menghasilkan Dokumentasi API yang indah?

Ingin platform Terintegrasi, All-in-One untuk Tim Pengembang Anda agar dapat bekerja sama dengan produktivitas maksimal?

Apidog memenuhi semua kebutuhan Anda, dan menggantikan Postman dengan harga yang jauh lebih terjangkau!

button

Mengembangkan API dengan Apidog

Apidog adalah alat pengembangan API yang membantu Anda mengembangkan API dengan lebih mudah dan efisien.

Daftar gratisUnduh