12일차_Vercel배포

Vercel 배포 과정 정리

Vercel Drop → CLI → GitHub 연동 → Claude 자동화

이 글은 hancom-nine.vercel.app/vercel.html 학습 허브 페이지에 정리된 순서를 바탕으로, 실제로 진행된 배포 흐름(① Vercel Drop 업로드 → ② CLI 배포 → ③ GitHub 연동 → ④ Claude 연동)을 다시 정리한 것입니다. 각 단계는 이전 단계에서 만든 같은 프로젝트·같은 URL을 이어받아 진행됩니다.

전체 흐름 한눈에 보기

네 단계는 순서대로 이어지며, 뒤 단계로 갈수록 더 적은 수동 작업으로 같은 사이트를 갱신하는 방법을 갖추게 됩니다.

단계방법핵심 특징

① Vercel Drop	브라우저 드래그 앤 드롭	Git·CLI·설치 없이 즉시 배포. 일회성
② CLI 배포	vercel / vercel --prod	터미널 명령으로 같은 프로젝트에 재배포
③ GitHub 연동	Git 저장소 연결	push할 때마다 자동으로 재배포
④ Claude 연동	"푸시해줘" 한마디	커밋·푸시를 Claude가 대신 실행, 이후는 ③번 자동배포 그대로 작동

1단계 · Vercel Drop — 브라우저에 끌어다 놓기

파일·폴더·.zip을 vercel.com/drop 화면에 드래그하면 배포됩니다. Git 저장소도, CLI 설치도 필요 없어 프로토타입이나 정적 사이트를 빠르게 공개할 때 적합합니다.

배포 순서 (클릭 4번)

• vercel.com/drop 접속
• 파일·폴더·.zip 드래그 (또는 파일/폴더 선택)
• 팀 선택 + 프로젝트 이름 입력
• Deploy 클릭 → Production URL 즉시 발급

알아둘 점

• 정적 사이트는 빌드 없이 그대로 게시되고, 프레임워크 프로젝트는 Vercel이 자동으로 감지해 빌드합니다.
• 최상위 폴더에 index.html이 없으면 Vercel이 첫 화면으로 무엇을 보여줄지 물어봅니다. "No root page"를 선택하면 루트(/) 주소는 404가 되고, 각 파일은 자기 경로로만 접속됩니다.

한계 — 재배포가 안 됩니다

Vercel Drop에는 "기존 프로젝트에 새 파일 드롭"이라는 기능이 없습니다. 같은 폴더를 또 드롭하면 완전히 새로운 프로젝트와 새로운 URL이 생성됩니다. 같은 URL을 유지하면서 업데이트하려면 2단계(CLI)의 vercel --prod 또는 3단계(GitHub 연동)가 필요합니다.

2단계 · CLI 배포 — 터미널 명령으로 재배포

배포란 결국 내 코드를 인터넷 서버에 올려서 누구나 접속할 수 있는 URL을 받는 일입니다. 1단계에서 만든 프로젝트를 같은 URL로 다시 배포하려면 터미널에서 Vercel CLI를 사용합니다.

어디서 실행하나요? — 프로젝트 폴더 안에서

vercel 명령은 실행한 현재 디렉토리를 배포 대상으로 인식합니다. package.json이 있는 프로젝트 루트 폴더 안에서 실행해야 하며, 폴더 밖에서 실행하면 엉뚱한 폴더가 올라갑니다.

cd my-app        # 프로젝트 루트로 이동 (package.json 있는 곳)
ls                # package.json이 보이면 위치가 맞는 것

설치 · 로그인 · 배포

npm i -g vercel   # CLI 설치 (최초 1회)
vercel login      # 브라우저 인증 (1회)
vercel            # preview 배포 — 임시 URL
vercel --prod     # production 배포 — 실서비스 URL

vercel 과 vercel --prod 의 차이

명령어결과비고

vercel	Preview 배포 (임시 URL)	실행할 때마다 새 임시 URL이 생기고 실서비스에는 영향 없음
vercel --prod	Production 배포 (실서비스 URL)	1단계 Drop에서 만든 것과 같은 도메인이 갱신됨

오타 주의: --prod를 --pord 등으로 잘못 입력하지 않도록 확인합니다.

3단계 · GitHub 연동 — push하면 자동 배포

GitHub 저장소를 Vercel 프로젝트에 연결하면, 그 뒤로는 git push할 때마다 Vercel이 자동으로 재배포합니다. 코드만 올리면 배포는 자동으로 이루어지는, 실무에서 가장 널리 쓰이는 방식입니다.

GitHub에 코드 올리기

git init
git add .
git commit -m "first deploy"
git branch -M main
git remote add origin https://github.com/내아이디/my-app.git
git push -u origin main

Vercel 웹에서 저장소 연동하기 (권장)

2단계에서 CLI로 만든 프로젝트에 Git을 연결하는 방법입니다. 클릭만으로 끝나며 CLI 인증이 꼬일 일이 없습니다.

• Vercel 웹사이트 로그인 → 해당 프로젝트 클릭
• 프로젝트 대시보드 진입 → 좌측 사이드바 맨 아래 Settings 클릭
• Settings 탭 목록에서 Git 선택
• Connect Git Repository 클릭 → GitHub 저장소 선택 후 연동
• 연동 후 git push → 자동 재배포가 켜짐

주의할 점

• .vercel/ 폴더는 프로젝트 연결 정보이므로 git에 커밋하지 않습니다.
• .gitignore에 node_modules, dist, .vercel이 포함되어 있는지 확인합니다.
• 모노레포 구조라면 Settings → Root Directory에서 배포할 하위 폴더를 지정합니다.

4단계 · Claude 연동 — "푸시해줘" 한마디로 배포

3단계에서 GitHub와 Vercel이 이미 연결되어 있으므로, 이제부터는 Claude에게 코드 작업을 시키고 "깃허브에 푸시해줘"라고만 하면 Vercel에 자동으로 반영됩니다. 터미널이나 CLI를 직접 만질 필요가 없습니다.

흐름

1. Claude에게 코드 수정 요청
2. "깃허브 푸시해줘" 한마디
3. Claude가 git add · commit · push 실행
4. Vercel이 push를 감지해 자동 재배포
5. 잠시 뒤 실서비스 URL에 반영

예시 대화

나: 버튼 색 파란색으로 바꾸고 깃허브에 푸시해줘

Claude: 색상 변경 완료. 커밋·푸시했습니다.
→ Vercel이 배포 시작 (1~2분 후 URL 반영)

주의: 커밋 author 이메일이 Vercel 계정과 연결된 이메일과 일치해야 정상적으로 배포됩니다. 배포가 안 되면 git config user.email 값을 확인합니다.

자주 쓰는 설정 위치 요약

하고 싶은 일메뉴 경로

GitHub 저장소 연결/변경	프로젝트 → Settings → Git → Connect Git Repository
배포 브랜치(Production Branch) 변경	프로젝트 → Settings → Environments → Production → Branch Tracking
코드 변경 없이 재빌드만	프로젝트 → Deployments → 최신 배포 ⋯ → Redeploy

연결한 작업 브랜치와 Production 브랜치(기본값 main)가 다르면 push해도 자동 배포가 되지 않습니다. Branch Tracking 설정을 원하는 브랜치로 바꾸거나, 작업 브랜치를 main에 머지해서 push하면 해결됩니다.

한 장 요약

• Vercel Drop = 일회성 배포. 다시 드롭하면 새 프로젝트가 생성됨
• 같은 URL로 계속 업데이트하려면 CLI의 vercel --prod 또는 GitHub 연결이 필요
• GitHub 연결은 Settings → Git → Connect Git Repository
• 배포 브랜치 변경은 Settings → Environments → Production → Branch Tracking
• 자동 배포 조건은 Production 브랜치에 push하는 것 (브랜치가 다르면 배포 안 됨)
• GitHub 연동이 끝나면 Claude에게 "푸시해줘"라고만 해도 배포가 자동으로 이어짐