Vercel/Netlify로 프론트엔드 무료 배포하기

---

React, Vue, Next.js로 만든 프로젝트를 올릴 때 개발자들이 가장 먼저 찾는 서비스가 Vercel과 Netlify입니다.

단순 HTML 파일이 아니라 프레임워크로 만든 프로젝트도 클릭 몇 번으로 배포됩니다.

---

이 두 서비스가 특별한 이유

GitHub Pages나 Cloudflare Pages는 빌드를 직접 해서 결과물을 올려야 합니다. Vercel과 Netlify는 소스코드를 올리면 빌드부터 배포까지 알아서 해줍니다.

기존 방식
내 PC에서 빌드 → 결과물 업로드 → 배포

Vercel/Netlify
소스코드 push → 자동 빌드 → 자동 배포

코드만 올리면 나머지는 다 해줍니다.

---

Netlify 배포하기

무료 플랜 제공 항목

✅ 월 100GB 트래픽
✅ 빌드 시간 월 300분
✅ HTTPS 자동 적용
✅ 커스텀 도메인 연결
✅ 드래그앤드롭 배포 가능
✅ 서브도메인 무료 (yoursite.netlify.app)

---

방법 1 - 드래그앤드롭 (가장 쉬움)

빌드된 결과물(dist 폴더)을 바로 올리는 방법입니다.

1. npm run build 실행
2. netlify.com 접속 → 로그인
3. 대시보드 하단 드래그앤드롭 영역에
   dist 폴더째로 드래그
4. 30초 후 완료

---

방법 2 - GitHub 연동 (자동 배포)

1. netlify.com → Add new site
   → Import an existing project
2. GitHub 연결 → 저장소 선택
3. 빌드 설정 입력

   React:
   Build command: npm run build
   Publish directory: dist

   Next.js:
   Build command: npm run build
   Publish directory: .next

   Vue:
   Build command: npm run build
   Publish directory: dist

4. Deploy site 클릭

이후 GitHub에 push하면 자동으로 빌드 후 배포됩니다.

---

Vercel 배포하기

Next.js를 만든 회사의 서비스입니다. Next.js 프로젝트라면 Vercel이 가장 궁합이 좋습니다.

무료 플랜 제공 항목

✅ 트래픽 월 100GB
✅ 빌드 시간 월 6000분
✅ HTTPS 자동 적용
✅ 커스텀 도메인 연결
✅ 서버리스 함수 지원
✅ 서브도메인 무료 (yoursite.vercel.app)

Netlify보다 빌드 시간이 20배 넉넉합니다.

---

GitHub 연동 배포

1. vercel.com 접속 → GitHub로 로그인
2. Add New → Project
3. GitHub 저장소 선택
4. 프레임워크 자동 감지됨
   (React/Next.js/Vue 자동 설정)
5. Deploy 클릭

대부분 설정을 건드릴 필요 없이 자동으로 감지해서 배포합니다.

---

Netlify vs Vercel 비교

Netlify Vercel

드래그앤드롭	✅	❌
빌드 시간	월 300분	월 6000분
Next.js 최적화	보통	최고
서버리스 함수	✅	✅
어울리는 프레임워크	React/Vue/기타	Next.js 특히 강함
난이도	쉬움	쉬움

---

프레임워크별 추천

Next.js        → Vercel (만든 회사라 궁합 최고)
React/Vue/Svelte → Netlify 또는 Vercel 둘 다 무방
단순 HTML      → Netlify (드래그앤드롭 편함)
트래픽 무제한  → Cloudflare Pages

---

배포 후 자동화 흐름

GitHub 연동까지 마치면 이후 작업 흐름이 이렇게 됩니다.

코드 수정
   ↓
git push
   ↓
자동 빌드 (1~2분)
   ↓
자동 배포 완료
   ↓
사이트 자동 반영

서버 관리, 빌드 스크립트, FTP 업로드 같은 작업이 전부 사라집니다.

---

마치며

Netlify와 Vercel 모두 무료로 쓰기에 충분합니다. 처음엔 드래그앤드롭이 되는 Netlify로 시작하고, Next.js 프로젝트를 시작하면 Vercel로 옮기는 흐름이 자연스럽습니다.

다음 글에서는 남는 안드로이드 폰으로 웹서버 만들기를 다뤄보겠습니다. 서랍 속에 잠자는 폰이 있다면 꺼내두세요.

---