쉽고 빠른 웹사이트 배포: Netlify vs. Vercel
이 가이드에서는 Netlify와 Vercel을 이용한 웹사이트 배포 절차를 비교하고, 두 서비스의 무료 요금제를 정리합니다. 또한 CI/CD 설정 팁과 자주 발생하는 에러 해결 방법을 Q&A 형식으로 제공합니다.
1. 배포 절차
1.1 Netlify
- Netlify 계정에 로그인한 뒤 New site from Git 메뉴에서 GitHub·GitLab·Bitbucket 중 하나를 선택해 연동합니다.
- 빌드 명령(Build command)과 퍼블리시 디렉터리(Publish directory)를 설정합니다.
- 배포 버튼을 클릭하면 자동으로 빌드와 배포가 실행됩니다.
- 이후 Git에 커밋(push)할 때마다 자동으로 재배포가 진행되는 Continuous Deployment가 활성화됩니다.
1.2 Vercel
- Vercel에 로그인하고 Import Project에서 GitHub·GitLab·Bitbucket 저장소를 선택해 프로젝트를 가져옵니다.
- Framework Preset(Next.js, Nuxt.js 등)을 지정하고, 필요하다면 빌드 명령과 출력 디렉터리를 설정합니다.
- Deploy 버튼을 눌러 첫 배포를 완료합니다.
- Git 브랜치(main 또는 master)에 푸시(push)할 때마다 자동으로 빌드와 배포가 이루어집니다.
2. 무료 요금제 비교
| 구분 | Netlify 무료 요금제 | Vercel 무료 요금제 |
|---|---|---|
| 월 대역폭 (Bandwidth) | 100 GB | 100 GB |
| 월 빌드 시간 (Build Minutes) | 300 분 | 100 분 |
| 동시 빌드 (Concurrent Builds) | 1 | 1 |
| 서버리스 함수 호출량 | 125 000회 | 125 000회 |
| 커스텀 도메인 지원 | O | O |
| HTTPS 자동 발급 | O | O |
3. CI/CD 설정 팁
3.1 Netlify
- Git 저장소 연동 후 Site settings > Build & deploy에서 빌드 명령과 퍼블리시 디렉터리를 지정하세요.
- SPA 라우팅 문제를 해결하려면 루트에
netlify.toml을 두고 다음 리디렉션 규칙을 추가하세요.[[redirects]] from = "/*" to = "/index.html" status = 200 - 환경변수는 Site settings > Build & deploy > Environment에서 관리할 수 있습니다.
3.2 Vercel
- 프로젝트 가져오기를 할 때 Framework Preset을 선택하면 대부분의 설정이 자동으로 채워집니다.
- Settings > Environment Variables에서 API 키나 시크릿 값을 추가하세요. 빌드와 서버리스 함수 양쪽에서
process.env.VAR_NAME으로 접근할 수 있습니다. - Settings > Domains에서 커스텀 도메인을 연결하면 DNS 레코드를 안내해 줍니다. SSL 인증도 자동 발급됩니다.
4. 에러 해결 Q&A
Q1. SPA에서 특정 경로로 접근하면 404가 뜹니다.
A1. Netlify는 netlify.toml에 위의 리디렉트 규칙을 추가해야 합니다. Vercel은 vercel.json 또는 Next.js의 rewrites() 설정으로 모든 요청을 index.html 또는 /로 포워딩하세요.
Q2. Next.js API 라우트에 POST 요청 시 JSON 파싱 에러가 발생합니다.
A2. fetch('api/route') 대신 fetch('/api/route') 처럼 경로 앞에 슬래시(/)를 붙여서 호출해야 합니다.
Q3. 배포 중 빌드가 실패했습니다.
A3. 대부분 환경변수 누락이 원인입니다. Netlify와 Vercel 모두 대시보드에서 Environment Variables를 확인하고, 로컬과 동일하게 설정했는지 검증하세요.
Q4. 커스텀 도메인 검증이 되지 않습니다.
A4. DNS 레코드(A, CNAME)가 올바른지, TTL 값이 충분히 짧은지 확인합니다. Netlify는 대시보드에서, Vercel은 Settings > Domains에서 상태를 리프레시할 수 있습니다.
위 가이드를 따라하면 Netlify와 Vercel 중 자신에게 맞는 플랫폼을 빠르게 선택해 손쉽게 웹사이트를 배포할 수 있습니다. CI/CD와 무료 요금제 한도를 잘 활용해 안정적인 서비스 운영을 시작해 보세요.
관리자