로컬호스트 탈출! Vercel과 Netlify로 리액트 무료 배포하기
밤을 새워가며 완벽한 웹 애플리케이션을 만들었습니다. 지난 14편에서 배운 대로 이미지와 렌더링 속도도 최적화했고, 15편에서 다룬 비트(Vite)를 이용해 눈 깜짝할 사이에 빌드(Build)까지 마쳤죠. 화면은 완벽하게 동작합니다. 너무 뿌듯한 마음에 친구에게 자랑하려고 링크를 보냅니다.
"야, 이거 내가 만든 사이트인데 한번 들어가 봐! 주소는 http://localhost:5173 이야!"
혹시 이런 경험 있으신가요? 안타깝게도 친구의 스마트폰에서는 '사이트에 연결할 수 없음'이라는 에러 화면만 뜰 것입니다. `localhost`는 내 컴퓨터 안에서만 유효한 주소이기 때문이죠. 우리가 만든 웹 서비스가 진정한 의미를 가지려면, 전 세계 누구나 접속할 수 있는 '인터넷 공간'으로 내보내야 합니다. 이것을 우리는 배포(Deployment)라고 부릅니다.
오늘은 내 컴퓨터 안에 갇혀 있던 프로젝트를 세상에 공개하는 마법 같은 도구, Vercel(버셀)과 Netlify(네틀리파이)를 활용한 프론트엔드 배포 가이드를 준비했습니다.
과거의 배포 vs 현대의 프론트엔드 배포
불과 몇 년 전만 해도 웹사이트를 배포하는 과정은 초보자에게 큰 진입장벽이었습니다. 호스팅 서버를 임대하고, 리눅스 명령어를 쳐서 서버 환경을 세팅하고, FTP 프로그램으로 빌드된 파일을 일일이 업로드해야 했죠. 코드 한 줄을 수정하면 이 복잡한 과정을 처음부터 다시 반복해야 했습니다.
하지만 프론트엔드 개발 생태계가 발전하면서 '서버리스(Serverless)'와 '정적 사이트 호스팅(Static Site Hosting)'이라는 개념이 등장했습니다. 우리가 15편에서 Vite로 빌드한 결과물(`dist` 폴더 안의 HTML, CSS, JS 파일들)은 사실 복잡한 서버 로직 없이 브라우저만 있으면 실행되는 '정적 파일'들입니다. Vercel과 Netlify는 바로 이 정적 파일들을 전 세계에 깔려 있는 초고속 CDN(콘텐츠 전송 네트워크)에 알아서 뿌려주는 혁신적인 서비스입니다.
💡 여기서 중요한 포인트는요:
이제 프론트엔드 개발자는 서버(인프라) 관리에 신경 쓸 필요 없이, 오직 '사용자 경험(UX)'과 'UI 코드'에만 집중할 수 있게 되었습니다.
프론트엔드 배포의 양대산맥: Vercel vs Netlify
현재 리액트(React)나 뷰(Vue) 기반의 프론트엔드 프로젝트를 배포할 때 가장 많이 쓰이는 두 가지 서비스가 바로 Vercel과 Netlify입니다. 두 서비스 모두 개인 프로젝트 수준에서는 '평생 무료'로 사용할 수 있다는 엄청난 장점이 있습니다. 그렇다면 어떤 것을 선택해야 할까요?
| 비교 항목 | Vercel (버셀) | Netlify (네틀리파이) |
|---|---|---|
| 주요 특징 | Next.js를 만든 회사에서 운영. 리액트 생태계와 찰떡궁합. | Jamstack(잼스택) 생태계의 선구자. 기능이 매우 다양함. |
| 배포 속도 | 매우 빠름 (특히 Next.js, Vite 환경에서 압도적) | 빠름 (안정적인 빌드 환경 제공) |
| UI/UX | 세련되고 직관적인 대시보드 | 개발자 친화적이고 세밀한 설정 가능 |
| 추천 대상 | React, Next.js 사용자, 깔끔한 UI를 선호하는 분 | 다양한 플러그인과 폼(Form) 기능이 필요한 분 |
결론부터 말씀드리면, 순수 React(CRA 또는 Vite) 프로젝트라면 둘 중 어느 것을 써도 무방합니다. 다만 최근 프론트엔드 트렌드에서는 압도적인 속도와 깔끔한 UI를 자랑하는 Vercel의 점유율이 조금 더 높아지는 추세입니다. 이번 가이드에서는 두 서비스의 공통적인 배포 워크플로우를 중심으로 설명하겠습니다.
마우스 클릭 3번으로 끝나는 CI/CD 자동 배포
Vercel과 Netlify가 혁신적인 이유는 단순히 서버 공간을 빌려주는 것을 넘어, GitHub과 연동된 자동화된 배포 파이프라인(CI/CD)을 제공한다는 점입니다.
1단계: GitHub에 내 코드 올리기
배포의 첫걸음은 내 로컬 코드를 GitHub 레포지토리에 Push하는 것입니다. 이때 주의할 점은, 빌드된 결과물인 `dist` 폴더나 필수 모듈인 `node_modules`는 `.gitignore` 파일에 포함하여 올라가지 않도록 해야 합니다. 순수한 소스 코드만 올려주세요.
2단계: Vercel/Netlify에서 GitHub 레포지토리 연결
Vercel이나 Netlify 웹사이트에 접속해 GitHub 계정으로 로그인합니다. 'Add New Project' 또는 'New site from Git' 버튼을 누르면 내 GitHub 레포지토리 목록이 뜹니다. 방금 코드를 올린 레포지토리를 선택(Import)합니다.
3단계: 빌드 명령어 확인 및 Deploy 클릭
레포지토리를 선택하면, Vercel과 Netlify는 우리 코드를 분석하여 "아, 이거 Vite로 만든 React 프로젝트구나!"라고 스스로 판단합니다. 그리고 빌드 명령어(`npm run build`)와 결과물이 저장될 폴더(`dist`)를 자동으로 세팅해 줍니다. 우리가 할 일은 그저 하단의 'Deploy(배포)' 버튼을 누르는 것뿐입니다.
약 1~2분 정도의 시간이 지나면 축하 꽃가루 애니메이션과 함께 전 세계 어디서든 접속 가능한 나만의 URL(예: my-project.vercel.app)이 발급됩니다. 이제 이 링크를 친구들이나 이력서에 당당하게 올릴 수 있습니다!
실무에서 무조건 마주치는 배포 트러블슈팅 3가지
배포 버튼만 누르면 끝날 줄 알았는데, 막상 배포된 사이트에 들어가면 예상치 못한 에러를 마주하는 경우가 많습니다. 실무에서 가장 흔하게 겪는 3가지 문제와 해결책을 정리해 드립니다.
1. 환경 변수(.env) 누락으로 인한 API 호출 실패
13편에서 Fetch와 Axios를 배울 때, 날씨 API 키나 백엔드 서버 주소 같은 민감한 정보는 `.env` 파일에 숨겨야 한다고 배웠습니다. 그런데 `.env` 파일은 GitHub에 올라가지 않기 때문에, 배포된 서버(Vercel/Netlify)는 이 환경 변수들을 알지 못합니다. 당연히 API 호출이 실패하겠죠?
해결책: Vercel이나 Netlify의 프로젝트 설정(Settings) 메뉴에 들어가 'Environment Variables(환경 변수)' 탭을 찾으세요. 이곳에 로컬 `.env` 파일에 적어두었던 키와 값을 그대로 복사해서 붙여넣고 다시 배포(Redeploy)해야 합니다.
2. 새로고침 시 나타나는 '404 Not Found' 에러 (SPA 라우팅 문제)
리액트 라우터(React Router)를 사용해 여러 페이지를 만들었다고 가정해 봅시다. 메인 페이지(`my-site.com`)로 접속한 뒤 '소개 페이지'로 이동하면 주소가 `my-site.com/about`으로 바뀝니다. 잘 작동하죠. 그런데 이 `/about` 페이지에서 키보드 F5(새로고침)를 누르면 갑자기 404 에러 화면이 뜹니다. 왜 그럴까요?
우리가 만든 리액트 앱은 사실 `index.html` 파일 딱 하나만 존재하는 싱글 페이지 애플리케이션(SPA)입니다. 브라우저가 서버에 `/about`이라는 경로의 파일을 달라고 요청하지만, 서버에는 `index.html`밖에 없으니 404 에러를 뱉는 것입니다.
해결책: "사용자가 어떤 경로로 접속하든, 무조건 `index.html`을 보여줘라"라는 설정을 추가해야 합니다.
- Vercel: 프로젝트 최상단 루트에 `vercel.json` 파일을 만들고 아래 코드를 넣습니다.
`{ "rewrites": [ { "source": "/(.*)", "destination": "/index.html" } ] }` - Netlify: `public` 폴더 안에 `_redirects`라는 이름의 파일을 만들고 아래 한 줄을 넣습니다.
`/* /index.html 200`
3. 나만의 멋진 도메인(Custom Domain) 연결하기
기본적으로 제공되는 `.vercel.app`이나 `.netlify.app` 주소도 좋지만, 포트폴리오나 실제 서비스라면 `www.my-awesome-service.com` 같은 나만의 도메인이 필요합니다. 가비아, 호스팅케이알 등에서 도메인을 구매한 뒤, Vercel/Netlify의 'Domains' 설정에 구매한 도메인을 입력하세요. 이후 도메인 구매 사이트의 DNS 설정에서 Vercel/Netlify가 안내하는 네임서버(또는 A 레코드) 값만 입력해주면, 몇 시간 내로 나만의 도메인으로 사이트가 연결됩니다. (심지어 HTTPS 보안 인증서도 무료로 자동 적용해 줍니다!)
마치며: 배포는 끝이 아닌 새로운 시작
축하합니다! 이제 여러분의 컴퓨터 안에서만 돌던 코드가 전 세계 누구나 접속할 수 있는 살아있는 웹 서비스가 되었습니다. 코드를 수정하고 GitHub에 Push할 때마다 Vercel과 Netlify가 알아서 새로운 버전으로 업데이트(Continuous Deployment)해주는 편리함도 경험하시게 될 겁니다.
하지만 서비스를 세상에 내놓았다고 해서 프론트엔드 개발자의 역할이 끝나는 것은 아닙니다. 사용자가 많아지면 예상치 못한 버그가 발생하고, 코드는 점점 방대해집니다. 다음 최종편(17편)에서는 우리가 만든 웹 서비스가 무너지지 않도록 지켜주는 방패, '프론트엔드 테스트(Jest, Cypress)와 지속 가능한 코드 유지보수 전략'에 대해 알아보며 대망의 시리즈를 마무리하겠습니다.