5. 고급 설정, 도메인 및 문제 해결
기본 배포 외에도 Vercel은 애플리케이션을 효과적으로 관리하기 위한 고급 기능과 도구를 제공합니다.
5.1. 사용자 지정 도메인 및 SSL
사용자 지정 도메인(예: API용 api.yourdomain.com, 프론트엔드용 yourdomain.com)을 사용하려면 Vercel 프로젝트 설정의 "Domains"로 이동합니다. 도메인을 추가하고 지침에 따라 DNS 레코드를 구성합니다.
Vercel은 도메인에 대한 SSL 인증서를 자동으로 프로비저닝하고 갱신하여 수동 구성 없이 안전한 통신(HTTPS)을 보장합니다.
5.2. 환경 변수 모범 사례
민감한 데이터(API 키, 데이터베이스 자격 증명)의 경우 하드코딩하는 대신 항상 Vercel의 환경 변수 기능을 사용하십시오. 이를 다양한 환경(Production, Preview, Development)에 적용할 수 있습니다.
예를 들어, Express.js API에 데이터베이스 URL이 필요한 경우:
- 이름:
DATABASE_URL - 값:
mongodb+srv://... - 환경: Production, Preview, Development
5.3. 로깅 및 디버깅
Vercel은 프로젝트 대시보드에 강력한 Logs 탭을 제공합니다. 여기에서 Next.js 서버 측 함수와 Express.js 서버리스 함수에서 실시간 로그를 볼 수 있습니다.
- 빌드 또는 런타임 중 오류가 있는지 로그를 확인하십시오.
- 서버리스 함수에서
console.log()를 사용하십시오. 이 로그는 Vercel 로그에 나타납니다. - 로컬 디버깅의 경우 Next.js 및 Express.js 앱이 각 포트에서 실행되고 통신할 수 있는지 확인하십시오.
5.4. 일반적인 문제 해결 팁
- API에 대한 "404 Not Found":
vercel.json의rewrites및functions경로를 다시 확인하십시오. Express.js 진입점(예:api/index.js)이 올바른지 확인하십시오. - CORS 오류: 개발 시 Express.js에
cors미들웨어가 활성화되어 있는지 확인하십시오. 프로덕션 환경에서는 모든 요청이 동일한 도메인을 통해 이루어지는 경우 Vercel의 라우팅으로 인해 CORS가 덜 문제가 되지만, API가 하위 도메인에 있는 경우cors를 올바르게 구성하십시오. - 빌드 실패: Vercel의 빌드 로그에서 특정 오류 메시지를 확인하십시오. 종종 종속성 누락 또는 잘못된 빌드 명령(Next.js의 경우 Vercel이 자동 감지를 잘하지만)이 원인입니다.
api/package.json에 Express 앱에 필요한 모든 종속성이 있는지 확인하십시오.
이 단계를 따르면 Next.js 및 Express.js 애플리케이션을 Vercel에 자신 있게 배포하고 관리할 수 있습니다.