AWS Lambda + Next.js로 Remote MCP 구축 가이드
AI Store에서 AI코딩으로 만들어진 앱을 만나보세요!
지금 바로 방문하기

제목

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

웹 개발자 및 클라우드 아키텍처 전문가 (중간~고급 난이도)

핵심 요약

  • AWS Lambda + Next.js 기반의 Remote MCP 아키텍처 (Cline/Cursor → MCP → Web App)
  • Upstash Redis를 활용한 세션 데이터 저장 및 AWS Lambda Web Adapter를 통한 Next.js 호스팅
  • @vercel/mcp-adapternext.config.ts 설정을 통한 빌드 최적화 및 배포 프로세스

섹션별 세부 요약

1. 프로젝트 초기 설정

  • create-next-app으로 Next.js 프로젝트 생성
  • @vercel/mcp-adapter, zod, @upstash/redis 패키지 설치
  • MCP 서버 로직 (generate_meme 툴) 구현 및 URL 매핑 설정

2. 프론트엔드/백엔드 코드 구현

  • app/page.tsx: 사용자 입력값을 기반으로 fetchMemeText API 호출 (4초 주기로 반복)
  • app/api/generate-meme/route.ts: Redis에 noText/yesText 저장 및 GET 요청 처리
  • public 폴더에 template_no.png, template_yes.png 이미지 파일 배치

3. AWS Lambda 배포 단계

  • Lambda 함수 생성: Enable function URL 설정, run.sh 스크립트 생성
  • next.config.ts: output: 'standalone' 설정으로 빌드 최적화
  • ZIP 파일 생성: .next/standalone 폴더 포함하여 Lambda에 업로드
  • 환경 변수 설정: UPSTASH_REDIS_REST_URL, UPSTASH_REDIS_REST_TOKEN 입력

4. Cline/Cursor 설정

  • cline_mcp_settings.jsonmcp.json 파일 생성 (Streamable HTTP/SSE 프로토콜 지원)
  • mcp-remote 명령어를 통해 Lambda 엔드포인트에 연결

5. 테스트 및 사용 예시

  • generate_meme 툴을 활용한 Meme 생성 테스트 (noText/yesText 입력)
  • Cline/Cursor가 자동으로 텍스트 생성 및 이미지 렌더링 처리
  • 테스트 후 Lambda 함수 즉시 삭제 권장 (지속적 요청 방지)

결론

  • AWS Lambda + Next.js 환경에서 MCP를 구현할 때는 @vercel/mcp-adapterAWS Lambda Web Adapter의 호환성 확인 필수
  • Upstash Redis는 간단한 텍스트 저장용으로, 복잡한 데이터 처리는 DynamoDB 또는 S3 사용 권장
  • 배포 후 Lambda 함수 삭제를 통해 리소스 누수 방지 및 비용 절감 실현
  • next.config.tsoutput: 'standalone' 설정과 ZIP 파일 구성이 성공적인 배포의 핵심 요소