Netlify MCP 서버 구축, 배포 및 호스팅 방법

Netlify의 MCP 서버로 AI 워크플로우를 강화할 준비가 되셨나요? Claude, Cursor 또는 VS Code Copilot과 같은 AI 에이전트에게 Netlify의 매끄러운 서버리스 인프라에 호스팅된 플랫폼의 도구 및 데이터에 직접 연결할 수 있는 라인을 제공한다고 상상해 보세요. 이 재미있고 대화식 가이드에서는 Netlify의 MCP 서버가 무엇인지, 왜 대단한지, 그리고 단계별로 구축, 배포 및 호스팅하는 방법을 살펴봅니다. 또한, 제대로 작동하는지 확인하기 위해 멋진 예시로 테스트할 것입니다. 뛰어들어 AI를 더 똑똑하게 만들어 봅시다!

💡

아름다운 API 문서를 생성하는 훌륭한 API 테스트 도구를 원하시나요?

개발팀이 최고의 생산성으로 함께 작업할 수 있는 통합된 올인원 플랫폼을 원하시나요?

Apidog는 모든 요구 사항을 충족하며, Postman을 훨씬 저렴한 가격으로 대체합니다!

버튼

MCP 서버란 무엇이며, 왜 Netlify인가요?

모델 컨텍스트 프로토콜(MCP)은 AI 에이전트를 위한 범용 어댑터와 같습니다. AI 클라이언트(예: Claude Desktop 또는 Cursor)가 도구, 데이터 및 프롬프트를 노출하는 서버와 통신할 수 있도록 하는 개방적이고 가벼운 표준입니다. 이는 AI가 앱의 기능과 실시간으로 상호 작용하여 문맥을 인지하고 훨씬 더 유용하게 만들 수 있음을 의미합니다.

Netlify에 MCP 서버를 호스팅하는 것은 당연한 선택입니다. Netlify의 서버리스 플랫폼은 확장 가능하고 유지보수가 적으며 MCP 서버 배포에 완벽합니다. 트래픽 급증, 업데이트, 보안과 같은 어려운 작업을 처리하므로 멋진 AI 통합 구축에 집중할 수 있습니다. 블로그, 전자상거래 사이트 또는 사용자 지정 앱에 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에 로그인합니다.
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 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"
};

이렇게 하면 /.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 서버는 다음에서 사용할 수 있습니다:

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단계: Netlify에 MCP 서버 배포

두 가지 배포 옵션이 있습니다:

옵션 1: Git 기반 배포

프로젝트를 GitHub, GitLab 또는 Bitbucket 저장소에 푸시합니다.
Netlify에서 사이트 구성 > 빌드 및 배포 아래에서 저장소를 사이트에 연결합니다.
Netlify는 메인 브랜치에 푸시할 때마다 자동으로 배포합니다.

옵션 2: CLI 배포

Netlify CLI로 직접 배포:

netlify deploy

운영 환경의 경우:

netlify deploy --prod

배포 후, Netlify의 MCP 서버는 다음에서 라이브 상태가 됩니다:

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 함수 로그에서 오류를 확인합니다.
Netlify의 분석 기능을 사용하여 사용량을 모니터링하고 성능을 최적화합니다.
보안을 위해 Netlify의 환경 변수를 통해 인증(예: API 키)을 추가합니다.

Netlify의 MCP 서버를 위한 모범 사례

무상태 유지: 서버리스 호출은 상태를 유지하지 않으므로 함수를 일시적으로 설계합니다.
보안 비밀 관리: API 키 또는 토큰을 Netlify의 환경 변수(사이트 구성 > 환경 변수)에 저장합니다.
하이브리드 설정: 클라이언트가 스트리밍을 지원하지 않는 경우, 로컬 MCP 프록시를 실행하여 Netlify 서버에 연결합니다.
버전 관리: 협업 및 쉬운 롤백을 위해 Git을 사용합니다.
성능 최적화: 지연 시간 및 비용을 줄이기 위해 함수 실행 시간을 최소화합니다.

문제 해결 팁

서버가 응답하지 않나요? Netlify CLI 로그(netlify dev) 또는 함수 로그에서 오류를 확인합니다.
클라이언트 연결 문제인가요? MCP 구성 URL을 확인하고 클라이언트를 다시 시작합니다.
Inspector가 작동하지 않나요? MCP Inspector 패키지가 업데이트되었는지 확인합니다(npx @modelcontextprotocol/inspector@latest).
속도 제한인가요? Netlify의 함수 사용량을 모니터링하고 트래픽이 많은 시나리오에 맞게 조정합니다.

Netlify에 MCP 서버를 호스팅해야 하는 이유

Netlify의 MCP 서버는 AI 기반 워크플로우에 완벽하게 일치합니다. Netlify의 서버리스 플랫폼은 손쉽게 확장되므로 MCP 서버는 충돌 없이 수천 개의 AI 요청을 처리할 수 있습니다. 또한, Git 기반 배포 및 CLI는 업데이트를 쉽게 만듭니다. 챗봇, 콘텐츠 관리 도구 또는 전자상거래 통합을 구축하든, Netlify에 MCP 서버를 호스팅하면 AI 에이전트가 플랫폼 기능에 실시간으로 동적으로 액세스할 수 있도록 보장합니다.

예를 들어, 앱의 API에서 사용자 데이터를 가져오거나 AI 프롬프트에 기반한 자동화된 워크플로우를 트리거하는 MCP 도구를 만들 수 있습니다. 서버리스 설정은 서버를 관리할 필요 없이 코딩하고 배포하면 Netlify가 나머지를 처리한다는 것을 의미합니다.

결론

자, 여기 있습니다! 방금 Netlify에 MCP 서버를 구축, 배포 및 호스팅하여 AI 에이전트를 생산성의 강력한 원천으로 만드는 방법을 배웠습니다. 간단한 서버리스 함수 설정부터 Claude, Cursor 또는 VS Code와의 연결에 이르기까지, 이 가이드는 AI를 플랫폼과 쉽게 통합할 수 있도록 합니다. 저희의 테스트 프롬프트인 "쿼리 처리: 안녕하세요, Netlify!"는 시작하기가 얼마나 간단한지 보여줍니다.

더 나아가고 싶으신가요? API 호출이나 데이터베이스 쿼리와 같은 사용자 지정 도구를 mcp.js에 추가하고 AI가 놀라운 일을 하는 것을 지켜보세요.

💡

버튼