제목
카테고리
프로그래밍/소프트웨어 개발
서브카테고리
웹 개발
대상자
웹 개발자 및 클라우드 아키텍처 전문가 (중간~고급 난이도)
핵심 요약
- AWS Lambda + Next.js 기반의 Remote MCP 아키텍처 (Cline/Cursor → MCP → Web App)
- Upstash Redis를 활용한 세션 데이터 저장 및 AWS Lambda Web Adapter를 통한 Next.js 호스팅
@vercel/mcp-adapter
와next.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.json
및mcp.json
파일 생성 (Streamable HTTP/SSE 프로토콜 지원)mcp-remote
명령어를 통해 Lambda 엔드포인트에 연결
5. 테스트 및 사용 예시
generate_meme
툴을 활용한 Meme 생성 테스트 (noText/yesText 입력)- Cline/Cursor가 자동으로 텍스트 생성 및 이미지 렌더링 처리
- 테스트 후 Lambda 함수 즉시 삭제 권장 (지속적 요청 방지)
결론
- AWS Lambda + Next.js 환경에서 MCP를 구현할 때는
@vercel/mcp-adapter
와AWS Lambda Web Adapter
의 호환성 확인 필수 - Upstash Redis는 간단한 텍스트 저장용으로, 복잡한 데이터 처리는
DynamoDB
또는S3
사용 권장 - 배포 후 Lambda 함수 삭제를 통해 리소스 누수 방지 및 비용 절감 실현
next.config.ts
의output: 'standalone'
설정과 ZIP 파일 구성이 성공적인 배포의 핵심 요소