배포란 무엇인가
배포(Deployment)는 로컬에서 동작하는 서비스를 인터넷 어디서나 접근 가능하도록 공개하는 과정입니다. 예전에는 직접 서버를 구매하고 운영체제를 설치하는 복잡한 작업이 필요했지만, 지금은 GitHub에 코드를 올리면 몇 분 만에 배포가 완료되는 환경이 갖춰졌습니다.
Vercel 배포 단계별 방법
Vercel은 Next.js를 만든 회사의 배포 플랫폼으로, Next.js 프로젝트에 가장 최적화되어 있습니다.
1단계: GitHub 저장소 연결
Vercel 대시보드에서 "Add New Project"를 클릭하고 GitHub 계정을 연동합니다. 배포할 저장소를 선택하면 Vercel이 프레임워크를 자동으로 감지합니다.
2단계: 환경변수 설정
배포 전에 .env.local에 있는 환경변수를 Vercel에 등록해야 합니다. 프로젝트 설정 → Environment Variables 메뉴에서 NEXT_PUBLIC_SUPABASE_URL 같은 변수를 추가합니다. Preview, Production 환경을 별도로 설정할 수 있습니다.
3단계: 첫 배포
"Deploy" 버튼을 클릭하면 배포가 시작됩니다. 빌드 로그를 실시간으로 확인할 수 있으며 보통 2~5분 안에 완료됩니다. 배포가 완료되면 your-project.vercel.app 형태의 URL이 발급됩니다.
4단계: 도메인 연결
"Domains" 탭에서 구매한 도메인을 입력합니다. 도메인 제공사에서 Vercel이 안내하는 DNS 레코드(CNAME 또는 A 레코드)를 추가하면 됩니다. HTTPS는 Vercel이 자동으로 설정합니다.
이후 main 브랜치에 코드를 push할 때마다 자동으로 프로덕션 배포가 이루어집니다.
Netlify vs Vercel 비교
| 항목 | Vercel | Netlify |
|---|---|---|
| 무료 플랜 | 취미 프로젝트 무료 | 무료 플랜 넉넉함 |
| Next.js 최적화 | 매우 뛰어남 | 지원하지만 Vercel만큼은 아님 |
| 빌드 시간 제한 | 무료 6,000분/월 | 무료 300분/월 |
| 서버리스 함수 | Edge Functions + Serverless | Netlify Functions |
| 폼 처리 | 별도 서비스 필요 | Netlify Forms 내장 |
| 팀 협업 | Pro부터 | 무료 플랜 포함 |
결론: Next.js 프로젝트는 Vercel, 정적 사이트나 Gatsby/Astro 프로젝트는 Netlify가 더 적합한 경우가 많습니다.
Railway로 백엔드 배포하는 방법
별도의 Node.js 서버, Python 서버, 또는 데이터베이스를 배포할 때 Railway를 사용합니다.
- railway.app에서 로그인 후 "New Project"를 선택합니다.
- GitHub 저장소를 연결하거나 템플릿(PostgreSQL, Redis 등)을 선택합니다.
- 환경변수를 설정합니다.
- 배포 후 발급된 URL을 프론트엔드의 환경변수에 추가합니다.
Railway는 사용량 기반 과금으로, 소규모 서비스는 월 $1~5 수준으로 운영 가능합니다. 무료 체험 크레딧으로 시작할 수 있습니다.
도메인 구매 및 연결 방법
도메인 구매
국내에서는 가비아가 가장 대중적입니다. .com은 연 1~2만원, .co.kr은 연 2만원 내외입니다.
해외 서비스를 운영한다면 Cloudflare Registrar를 추천합니다. 도메인 원가로 판매하여 가장 저렴하고, DNS 관리와 통합되어 있어 편리합니다.
DNS 설정 방법
Vercel에 도메인을 연결하는 방법:
- 가비아 DNS 관리 페이지에서 Vercel이 안내하는 네임서버로 변경하거나, CNAME 레코드를 추가합니다.
www서브도메인은cname.vercel-dns.com으로 CNAME 레코드를 추가합니다.- 루트 도메인(
example.com)은 Vercel이 제공하는 IP로 A 레코드를 추가합니다. - DNS 변경은 최대 48시간이 걸리지만 보통 1시간 이내에 적용됩니다.
HTTPS 설정 방법
Vercel과 Netlify는 Let's Encrypt를 통해 HTTPS를 자동으로 설정합니다. 별도로 할 일이 없습니다.
직접 서버를 운영한다면 Caddy 웹서버를 사용하면 HTTPS를 자동으로 처리합니다. Nginx를 사용한다면 Certbot으로 Let's Encrypt 인증서를 발급받아 설정합니다.
환경변수 관리 방법
환경변수는 API 키, 데이터베이스 URL 등 외부에 노출되면 안 되는 설정값입니다.
- 절대 GitHub에 올리지 않습니다:
.gitignore에.env*를 반드시 추가합니다. .env.example파일을 만듭니다: 실제 값은 없지만 어떤 변수가 필요한지 알 수 있는 예시 파일을 저장소에 포함합니다.- Vercel/Railway 환경변수 탭에서 관리합니다: 각 환경(개발, 스테이징, 프로덕션)별로 다른 값을 설정할 수 있습니다.
- 1Password나 Doppler를 사용하면 팀으로 환경변수를 안전하게 공유할 수 있습니다.
CI/CD 파이프라인 구성 기초
CI(지속적 통합)/CD(지속적 배포)는 코드 변경 시 자동으로 테스트하고 배포하는 파이프라인입니다. Vercel은 기본적으로 CD가 내장되어 있지만, 테스트를 추가하려면 GitHub Actions를 사용합니다.
# .github/workflows/ci.yml
name: CI
on:
push:
branches: [main]
pull_request:
branches: [main]
jobs:
test:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- uses: actions/setup-node@v4
with:
node-version: '20'
- run: npm ci
- run: npm run type-check
- run: npm run lint
- run: npm test
이 설정으로 PR을 올릴 때마다 타입 체크, 린트, 테스트가 자동으로 실행됩니다.
배포 후 모니터링
서비스를 배포했다고 끝이 아닙니다. 에러와 성능 문제를 빠르게 발견하는 모니터링이 필요합니다.
Sentry
JavaScript 에러를 실시간으로 수집하는 서비스입니다. 어떤 에러가 어떤 사용자 환경에서 발생했는지 상세히 보여주며 스택 트레이스도 확인할 수 있습니다. 무료 플랜으로 월 5,000건 에러까지 처리 가능합니다.
npm install @sentry/nextjs
npx @sentry/wizard@latest -i nextjs
LogRocket
사용자가 에러를 경험했을 때의 세션을 영상처럼 재생해볼 수 있는 서비스입니다. 어떤 조작 순서로 에러가 발생했는지 정확히 파악할 수 있어 디버깅이 훨씬 쉬워집니다. 무료 플랜은 월 1,000세션입니다.
모니터링 없이 운영하면 사용자가 에러를 경험해도 운영자가 모르는 상황이 생깁니다. 배포와 동시에 기본 모니터링을 세팅해두는 것을 강력히 권장합니다.