Node.js 앱을 Vercel에 배포하는 방법 (API 라우트 지원)
카테고리
프로그래밍/소프트웨어 개발
서브카테고리
DevOps
대상자
Node.js 앱을 배포하고 서버리스 기능을 활용하는 개발자, 특히 API 라우트와 Serverless Function을 사용하는 프론트엔드/풀스택 개발자
핵심 요약
- Vercel의 주요 특징: 서버리스 아키텍처, 자동 확장, 0 설정 배포, Edge CDN 제공, 내장 CI/CD
- API 라우트 구조:
api/폴더 내 파일은/api/파일명엔드포인트로 자동 매핑 (예:api/hello.js→/api/hello) - 배포 흐름:
vercel dev로 로컬 테스트 →vercelCLI 또는 GitHub 연동으로 배포 →vercel.json으로 라우팅 및 환경 변수 관리
섹션별 세부 요약
1. 서버리스 아키텍처와 Vercel의 장점
- Serverless Function 지원으로 API 라우트 자동 확장 가능
- Zero Configuration 배포: Git 푸시만으로 자동 배포
- Edge CDN을 통해 정적 자산과 동적 콘텐츠 빠른 제공
2. 폴더 구조 및 API 라우트 설정
api/: 서버리스 함수로 매핑 (예:api/users.js→/api/users)public/: 정적 자산 (이미지 등)vercel.json: 배포 설정 및 라우팅 정의pages/: Next.js 같은 프론트엔드 프레임워크 사용 시
3. API 라우트 생성 예시
- ESM 및 CommonJS 모두 지원 (일관된 선택 필요)
- 예시 코드:
```javascript
module.exports = (req, res) => {
res.status(200).json({ message: 'Hello from Node.js on Vercel!' });
};
```
api/users.js에서 사용자 목록 반환 예시
4. 로컬 테스트 및 배포
- Vercel CLI 설치:
npm install -g vercel - 로컬 테스트:
vercel dev - 배포: GitHub 연동 또는
vercel명령어 사용
5. `vercel.json` 설정 예시
- 빌드 설정:
api/**/*.js→@vercel/node사용 - 라우팅:
/api/(.*)→/api/$1.js매핑 - 예시:
```json
{
"version": 2,
"builds": [
{ "src": "api/**/*.js", "use": "@vercel/node" }
],
"routes": [
{ "src": "/api/(.*)", "dest": "/api/$1.js" }
]
}
```
6. 환경 변수 관리
- Vercel 대시보드에서
MONGO_URI,JWT_SECRET등 설정 - 프론트엔드에서 사용 시
NEXT_PUBLIC_접두사 필요 (Next.js 기준) - 환경 변수는 정적 파일이나 프론트엔드에서 직접적으로 접근 불가
7. CORS 처리
cors패키지 설치:npm install cors- 예시 코드:
```javascript
const cors = require('cors');
const handler = (req, res) => {
res.setHeader('Access-Control-Allow-Origin', '*');
res.status(200).json({ message: 'CORS-enabled!' });
};
module.exports = handler;
```
8. API 라우트 정리 패턴
api/users/get.js→/api/users/get매핑- 폴더 구조 예시:
```
api/
├── users/
│ ├── get.js
│ └── post.js
└── auth/
└── login.js
```
9. 일반적인 오류 및 해결 방법
- 파일명 대소문자 일치 확인
vercel.json라우팅 정의 오류- 환경 변수 미설정
- Node.js 모듈 중
fs사용 시 서버리스 비호환성 주의
10. 프론트엔드 통합 예시
- React/Next.js에서 API 호출:
```javascript
useEffect(() => {
fetch('/api/users')
.then(res => res.json())
.then(data => console.log(data));
}, []);
```
- API 라우트는 인증, DB 호출, 외부 API 연동에 적합
결론
- Vercel 배포 흐름:
api/폴더에 API 라우트 작성 →vercel dev로 로컬 테스트 →vercel명령어로 배포 →vercel.json으로 설정 관리 - 중요 팁: 환경 변수는 Vercel 대시보드에서 관리, CORS 처리 필수,
fs모듈 사용 주의, Serverless Function에 적합한 로직 설계