GitHub 연동 배포 실습 예시

1. 코드를 GitHub 저장소에 올린다

   git/GitHub란? git은 코드 변경을 시점별로 기록·관리하는 도구이고, GitHub는 그 기록을 인터넷에 보관·공유하는 저장소 서비스입니다. 아래 5줄은 차례로 '기록 시작(init) → 현재 파일 묶기(add) → 한 시점으로 저장(commit) → 올릴 곳 지정(remote add) → 실제 업로드(push)'를 뜻하며, 이 push가 곧 Vercel 배포의 방아쇠입니다.

   사전 준비: git이 설치돼 있고 최초 1회 사용자 정보(git config --global user.name "이름" / git config --global user.email "메일")가 설정돼 있어야 합니다. 또 HTTPS로 push하면 GitHub 로그인 인증이 필요한데, 가장 쉬운 길은 gh auth login(GitHub CLI)으로 한 번 인증해 두는 것입니다(또는 Personal Access Token 발급). push할 때 인증 창이나 토큰 입력 프롬프트가 뜨는 것은 정상입니다. GitHub에서 새 저장소를 만든 뒤, 프로젝트 폴더에서 아래를 실행합니다. (저장소 주소는 GitHub가 안내하는 값으로 바꾸세요.)

   git init -b main
   git add .
   git commit -m "first commit"
   git remote add origin https://github.com/내계정/my-first-app.git
   git push -u origin main

2. Vercel에서 Import 한다

   대시보드 Add New ▾ → Project → 방금 올린 저장소 옆 Import 클릭.

3. 구성 화면에서 Deploy

   Framework Preset이 Next.js로 자동 감지되면 그대로 Deploy. 환경 변수가 필요하면 여기서 추가합니다(G-4 참고).

4. 빌드가 끝나면 라이브 URL 확인

   완료되면 my-first-app.vercel.app 형태의 주소가 발급됩니다. 이 링크를 누구에게나 공유할 수 있습니다.

1. 코드를 수정한다

   예를 들어 메인 페이지의 제목 텍스트를 바꿉니다.

2. 변경을 main에 올린다

   git add .
   git commit -m "헤더 문구 수정"
   git push

3. Vercel 대시보드에서 새 배포를 지켜본다

   프로젝트 → Deployments에 새 항목이 Building 상태로 뜨고, 곧 Ready로 바뀝니다.

   vercel.com/my-first-app/deployments

   헤더 문구 수정  main · 방금● Building

   first commit  main · 5분 전Production
4. 완료되면 사이트 새로고침

   같은 주소(...vercel.app)에서 바뀐 문구가 보입니다. 주소는 그대로, 내용만 갱신됩니다.

1. 새 브랜치를 만들어 작업한다

   git checkout -b redesign
   # ...수정...
   git add . && git commit -m "디자인 개편 초안"
   git push -u origin redesign

2. GitHub에서 PR을 연다

   redesign → main 방향으로 Pull Request를 생성합니다.

3. Vercel 봇의 미리보기 코멘트를 연다

   잠시 뒤 PR에 미리보기 URL 코멘트가 달립니다. Visit Preview를 누르면 main과 분리된, 이 변경만 반영된 화면이 열립니다.

   github.com/.../pull/7

   ▲vercel bot

   ✓ Ready  redesign-my-first-app.vercel.app ↗
4. 검토가 끝나면 Merge

   PR을 main에 합치면, 그 순간 프로덕션 배포가 생성되어 실서비스에 반영됩니다.

1. 코드에서 키를 환경 변수 참조로 바꾼다

   키 문자열 대신 process.env.MY_API_KEY 같은 참조를 쓰도록 AI에게 요청합니다. 실제 값은 코드에 남기지 않습니다.

   ⚠️ 중요: 환경 변수가 비밀로 지켜지는 것은 그 키를 서버 사이드(Vercel Functions, API 라우트, 서버 컴포넌트)에서만 쓸 때입니다. 브라우저에서 직접 호출하는 코드(클라이언트 컴포넌트·정적 페이지)에 넣은 키나, NEXT_PUBLIC_(Vite는 VITE_) 접두사를 붙인 변수는 빌드 시 브라우저 번들에 그대로 포함되어 최종 사용자에게 노출됩니다. 외부 API 키 같은 비밀값에는 절대 이 접두사를 붙이지 말고, 반드시 서버 함수를 거쳐 호출하세요.

2. Vercel 대시보드에 값을 등록한다

   프로젝트 Settings → Environment Variables에서 이름(MY_API_KEY)과 값을 추가합니다. 적용 환경을 Production / Preview / Development에서 선택합니다.

   vercel.com/my-first-app/settings/environment-variables

   MY_API_KEY

   ••••••••••••

   적용: Production Preview
3. 재배포로 값을 반영한다

   환경 변수를 추가/변경한 뒤에는 다시 배포해야 적용됩니다. 새 commit을 push하거나 대시보드에서 Redeploy 합니다. 대시보드 Redeploy 시에는 빌드 캐시(Use existing Build Cache)를 끄고 재빌드하는 것이 안전합니다 — 캐시를 그대로 쓰면 빌드 시점에 주입되는 변수가 갱신되지 않아 '바꿨는데 옛 값이 그대로'인 상황이 생길 수 있습니다.

1. 프로젝트 Overview → Production Deployment 타일

   Instant Rollback을 선택하고, 되돌릴 과거 배포(직전 정상 버전)를 고릅니다.

2. Confirm Rollback

   재빌드 없이 도메인을 그 배포로 다시 연결하므로 거의 즉시 반영됩니다. 프로덕션 사고 복구에 적합합니다.

git revert HEAD      # 문제 커밋을 되돌리는 새 커밋 생성
git push             # main 갱신 → 이전 상태로 재배포