Github Page 웹 배포 방법 netlify 배포 방법 정리

 

웹 배포 방법 정리 GitHub Pages부터 Vercel까지

웹 개발에서 빠질 수 없는 마지막 단계가 바로 배포입니다. 코드를 완성했다고 해도 사용자가 접근할 수 없다면, 실전 서비스라고 말하기 어렵습니다. 이번 글에서는 대표적인 배포 플랫폼인 GitHub Pages, Netlify, Vercel을 중심으로 **실제 배포 절차와 차이점**을 설명드립니다.

웹배포방법

“배포는 개발의 끝이 아니라 시작입니다.” – 스타트업 프론트엔드 리드 개발자

1. GitHub Pages로 정적 사이트 배포하기

GitHub Pages는 정적 HTML 파일만 배포할 수 있지만, 설정이 매우 간단하고 무료로 제공되기 때문에 포트폴리오나 간단한 소개 사이트에 적합합니다.

배포 절차

1. GitHub에 public repository 생성
2. index.html 포함한 정적 파일 push
3. Repository > Settings > Pages 이동
4. 브랜치(main 또는 gh-pages) 선택 후 저장
5. 생성된 URL 확인 (예: username.github.io/repo)

CLI 명령 예시

git init
git remote add origin https://github.com/username/portfolio.git
git add .
git commit -m "deploy"
git push -u origin main
  

React 프로젝트는 npm run build 후 build 폴더를 루트로 배포해야 정상 작동합니다.

2. Netlify: 정적 + SPA 사이트에 강력한 배포 툴

Netlify는 정적 사이트뿐 아니라 SPA(단일 페이지 애플리케이션)도 지원하며, 폼 처리나 리디렉션도 가능합니다. GitHub 연동만 하면 자동 배포가 가능하고, 브랜치 기반 프리뷰도 제공됩니다.

“PR 날릴 때마다 배포 URL이 따로 나오는 Netlify 덕분에 디자이너와 소통이 쉬워졌습니다.” – 프리랜서 프론트엔드 개발자

배포 절차

1. Netlify 로그인 → New site from Git
2. GitHub 계정 연동
3. 저장소 선택
4. Build command: npm run build
5. Publish directory: dist 또는 build
6. Deploy 클릭 → 자동 URL 생성

Netlify는 무료 플랜에서도 도메인 연결, HTTPS, CI/CD 기능까지 제공합니다.

3. Vercel: Next.js 공식 배포 파트너

Vercel은 Next.js의 제작사에서 만든 플랫폼으로, Next 프로젝트에 최적화된 배포 환경을 제공합니다. SSR(서버사이드 렌더링)이 필요한 경우 가장 많이 사용됩니다.

배포 절차

1. Vercel 가입 및 GitHub 연동
2. 저장소 선택 후 프레임워크 자동 감지
3. Next.js는 특별한 설정 없이 바로 배포 가능
4. 자동 서브도메인 발급 (.vercel.app)

CLI 배포 예시

npm install -g vercel
vercel login
vercel
  

프로젝트 루트에서 vercel 명령만 실행하면 자동으로 배포됩니다.

주요 배포 플랫폼 비교 도표

플랫폼	지원 유형	장점	단점
GitHub Pages	정적 HTML	완전 무료, 간단한 설정	SPA 미지원, 서버 기능 없음
Netlify	정적 + SPA	CI/CD, 폼, 리디렉션 기능	SSR, DB 지원 부족
Vercel	SSR, 정적, Next.js	Next 프로젝트 최적화	비Next 프로젝트는 세팅 필요