이 단계에서 하는 것: 코드를 GitHub에 올리고, Vercel에 연결해 공개 URL을 만든다. 비밀값은 Vercel 환경변수로 넣고, 배포 도메인을 Supabase에 등록한다. 다음 단계로 넘길 것: 남의 컴퓨터에서도 열리는 공개 URL.
GitHub 인증과 Vercel 연결은 내가 터미널·브라우저에서 직접 하는 수동 작업이다. Claude가 대시보드를 대신 눌러 줄 수 없다. 아래 순서대로 직접 한다.
http://localhost:3000)에서 회원가입·거래·통계·AI·결제가 동작한다.[도구 설치] 이 장은 GitHub와 Vercel을 다룬다. 쓸 CLI를 미리 깔아 둔다. (설치도 Claude에게 "이거 설치해줘"라고 시켜도 된다.) - GitHub CLI (
gh) — Mac:brew install gh· Windows:winget install GitHub.CLI- Vercel CLI — 어느 OS든npm i -g vercel- (선택) MCP로 자동화: Claude Code에 GitHub MCP·Vercel MCP를 붙이면, 저장소 생성·배포·환경변수 설정을 Claude가 직접 한다. 붙이는 법은claude mcp add로 안내되며, 이때도 로그인(인증)만 사람이 한다. MCP를 안 붙이면 아래처럼 CLI로 한다.
'인프라' 역할을 만들어줘. 저장소·비밀값·배포를 담당한다. 커밋은 docs/가이드/깃커밋컨벤션.pdf를 따른다.
인프라 역할로, .env.local 같은 비밀값 파일이 안 올라가게 .gitignore를 확인해줘.
지금까지 만든 것을 깃커밋컨벤션에 맞춰 커밋하고, 무엇이 커밋되고 무엇이 빠지는지 목록으로 보여줘.
이렇게 나오면 성공: .env.local이 .gitignore에 들어 있고, 비밀값 없이 커밋된다.
GitHub에 올리려면 터미널이 내 GitHub 계정으로 인증돼 있어야 한다. GitHub CLI(gh)로 한 번만 로그인한다.
1. gh가 없으면 설치한다 — Mac: brew install gh, Windows: winget install GitHub.CLI.
2. 터미널에서 아래를 실행하고 안내를 따른다(GitHub.com → HTTPS → 브라우저로 로그인).
gh auth login
인프라 역할로, 이 프로젝트를 gh를 이용해 내 GitHub 비공개 저장소 이름 moneynote로 만들어 올려줘.
이렇게 나오면 성공: github.com/내계정/moneynote에 코드가 올라간다(.env.local은 빠진 채로).
이 단계는 전부 vercel.com에서 내가 직접 한다.
1. vercel.com에 GitHub로 로그인한다.
2. Add New… → Project → Import Git Repository에서 방금 올린 moneynote 저장소를 골라 Import한다.
3. Environment Variables 칸에 .env.local에 넣었던 값을 똑같은 이름으로 추가한다.
| Name(이름) | Value(값을 어디서 복사하나) |
|---|---|
NEXT_PUBLIC_SUPABASE_URL |
Supabase → Settings → API의 Project URL |
NEXT_PUBLIC_SUPABASE_ANON_KEY |
Supabase의 anon public 키 |
SUPABASE_SERVICE_ROLE_KEY |
Supabase의 service_role 키 |
ANTHROPIC_API_KEY |
6장에서 발급한 Claude API 키 (Gemini로 했다면 GEMINI_API_KEY) |
NEXT_PUBLIC_TOSS_CLIENT_KEY |
토스페이먼츠 테스트 클라이언트 키 |
TOSS_SECRET_KEY |
토스페이먼츠 테스트 시크릿 키(서버 전용) |
moneynote-xxxx.vercel.app)이 나온다.이렇게 나오면 성공: Vercel이 빌드를 마치고 공개 URL을 준다.
[가장 중요 — 이제부터
git push하면 자동으로 배포된다] Import Git Repository로 저장소를 연결하면, Vercel이 그 GitHub 저장소를 계속 지켜본다. 앞으로master에 push할 때마다 Vercel이 자동으로 새 버전을 배포한다 — 대시보드에서 Deploy를 다시 누를 필요가 없다. 이 "push = 자동 배포"가 12장 운영 파이프라인의 핵심이다. 거기서는 사람이 "배포"라고 승인하면 AI가git commit후git push만 하고, 나머지 배포는 지금 연결해 둔 이 자동 배포가 알아서 한다. (그래서 운영 단계에서는vercel deploy를 손으로 칠 일이 없다.)[사람 검증 + 자주 걸리는 함정] 공개 URL을 실제로 열어 본다. 그 주소를 시크릿 창(로그인 안 된 상태)에서 열면 머니노트 로그인 화면이 떠야 한다. 만약 Vercel 로그인 페이지로 튕기면, 배포에 접근 보호(Vercel Authentication) 가 켜진 것이다(남들이 못 들어온다). → Vercel 프로젝트 → Settings → Deployment Protection에서 Vercel Authentication을 끈다(Disabled) → 다시 열어 본다.
CLI로 하고 싶으면(대시보드 대신, 처음 한 번): 프로젝트 폴더에서
vercel link→ 환경변수는vercel env add <이름> production으로 하나씩 →vercel deploy --prod. Claude에게 "vercel CLI로 배포해줘. 환경변수는 .env.local 이름 그대로 production에 넣어줘"라고 시켜도 된다. 단, 이건 초기 연결·설정용이다. 위 GitHub 연동을 해 두면, 그다음부터는git push만으로 자동 배포되므로vercel deploy를 다시 칠 필요가 없다 — 운영 단계(12장)는 이 방식을 쓴다.
로컬에서 되던 로그인이 배포 도메인에서도 되려면, 그 도메인을 Supabase에 알려줘야 한다. 1. Supabase 대시보드 Authentication → URL Configuration으로 간다. 2. Site URL에 Vercel 공개 URL을 넣고, Redirect URLs에도 같은 주소를 추가한 뒤 저장한다.
이렇게 나오면 성공: 배포된 공개 주소에서 표준 테스트 계정(demo@moneynote.dev / moneynote1234)으로 로그인하면, 로컬에서 보던 그 거래·통계·AI가 그대로 뜬다. (내 컴퓨터가 아닌 곳에서도 열린다는 걸 폰으로도 확인해 볼 수 있다.)