이 단계에서 하는 것: GitHub 저장소를 Vercel에 연결해 공개 URL을 만든다. 필요한 환경변수를 Vercel에 설정하고, 배포 도메인을 Supabase에 등록한다. 다음 단계로 넘길 것: 다른 기기에서도 접속할 수 있는 머니노트의 공개 URL.
코드는 1장에서 만든 GitHub 비공개 저장소에 있다. 이번 단계에서는 이 저장소를 Vercel과 연결해 자동 배포를 설정한다.
저장소 연결에는 Claude가 Vercel CLI를 사용한다. Claude가 CLI를 설치하고 필요한 명령을 실행하면, 사람은 자신의 계정에 로그인해 접근을 승인한다.
http://localhost:3000)에서 회원가입·거래·통계·AI·결제가 동작한다.moneynote)에 코드가 올라가 있다. (착수 때 저장소를 만들고 각 장마다 커밋해 왔다.)[도구 설치] 이 장은 Vercel CLI를 쓴다. 어느 OS든
npm i -g vercel. 설치도 단계 2에서 Claude가 한다 — 미리 깔아 둘 필요는 없다.[알아두기] 이 실습에서는 CLI로 Vercel을 설정한다. Vercel CLI로 프로젝트 생성, GitHub 저장소 연결, 환경변수 등록을 진행한다. 배포 상태와 빌드 로그는 Vercel 대시보드에서도 확인할 수 있다.
배포 전에 비밀값 파일이 저장소에 포함되지 않았는지 확인하고, 아직 올리지 않은 변경 사항을 커밋한다.
'인프라 엔지니어' 서브에이전트를 만들어줘. 저장소 관리·비밀값 확인·배포를 담당한다. .gitignore에서 비밀값 파일이 제외되는지 점검하고, docs/가이드/깃커밋컨벤션.pdf에 따라 커밋한 뒤 GitHub에 push한다. 기능 코드는 작성하지 않는다. push와 배포는 사람의 승인을 받은 뒤 실행한다.서브에이전트를 만든 뒤에는 Claude Code를 한 번 다시 띄운다(/exit 뒤 claude). 새 서브에이전트는 다음 세션부터 보인다.
인프라 엔지니어 서브에이전트로, 배포 전 점검을 해줘..env.local 같은 비밀값 파일이 저장소에 올라간 적 없는지(과거 커밋 포함) 확인하고,아직 커밋 안 된 변경분을 깃커밋컨벤션에 맞춰 커밋한 뒤 GitHub에 푸시해줘.무엇이 커밋되고 무엇이 빠지는지 목록으로 보여줘.이렇게 나오면 성공: .env.local이 한 번도 올라간 적 없고, 최신 코드가 GitHub 저장소에 푸시된다.
[실무] 인프라 엔지니어의 업무 범위: 이 실습에서는 관리형 서비스(Vercel·Supabase)를 사용하므로 주로 저장소 점검과 배포 연결을 맡는다. 직접 인프라를 구축하는 조직에서는 다음과 같은 업무도 담당한다.
AWS 기반 인프라(ECS, ECR, Redis 등)를 설계·구축하고, Docker와 GitHub Actions를 이용한 CI/CD 및 자동 배포 환경을 구성한다. 배포, 롤백, 환경변수, 보안, 로깅·모니터링까지 운영에 필요한 인프라를 담당한다.
이 실습에서도 환경변수로 비밀값 관리, GitHub와 Vercel을 연결한 자동 배포, 배포 접근 제어(Deployment Protection)를 다룬다. 조직 규모가 커지면 컨테이너·오케스트레이션·모니터링 등도 추가되지만, 안전하게 배포하고 운영해야 한다는 목표는 같다.
Claude에게 CLI 설치와 Vercel 프로젝트 연결을 맡기고, 사람은 자신의 계정으로 로그인해 인증한다.
인프라 엔지니어 서브에이전트로, 이 프로젝트를 Vercel에 연결해줘.Vercel CLI를 설치하고 로그인 명령을 실행해줘. 계정 인증은 내가 할게.인증 끝나면 프로젝트를 만들어 GitHub 저장소에 연결하고,.env.local의 환경변수를 Production에 등록한 다음 배포해줘.진행 중 사람이 승인할 항목은 다음 두 가지다.
1. vercel login 승인 — Claude가 명령을 실행하면 브라우저가 열린다. GitHub 계정으로 승인한다.
2. Vercel GitHub App 설치 승인 — 저장소를 연결하려면 Vercel이 내 GitHub를 볼 권한이 필요하다. 브라우저에서 한 번 승인한다. (계정당 최초 1회. 이미 했다면 건너뛴다.)
이렇게 나오면 성공: Claude가 공개 URL(예: moneynote-xxxx.vercel.app)을 알려주고, GitHub 저장소가 연결됐다고 보고한다.
[환경변수 등록] 다섯 값은 앞 단계에서
.env.local에 설정했다. Supabase 값 두 개(5장), Gemini 키 한 개(7장), 토스페이먼츠 키 두 개(9장)다. Claude가 변수 이름과 값을 확인해vercel env add로 등록한다. 입력 과정에서 값이 잘리거나 공백이 추가되지 않았는지 등록 후에도 확인한다.
등록될 이름 어디서 온 값인가 NEXT_PUBLIC_SUPABASE_URL·NEXT_PUBLIC_SUPABASE_ANON_KEY5장에서 넣은 Supabase 값 GEMINI_API_KEY7장에서 발급한 Gemini 키 NEXT_PUBLIC_TOSS_CLIENT_KEY·TOSS_SECRET_KEY9장 토스페이먼츠 테스트 키
.env.local파일은 저장소에 올리지 않는다(단계 1에서 확인했다). 배포에 필요한 값만 Vercel 환경변수로 등록한다.[자동 배포 확인] GitHub 저장소를 연결하면 Vercel이 지정한 배포 브랜치의 변경을 감지한다. 이 실습에서 배포 브랜치로 설정한
master에 push하면 Vercel이 새 버전을 빌드하고 배포한다. 이후 운영 단계에서는 사람이 변경과 배포를 승인하면 AI가 커밋·push하고, Vercel이 연결된 설정에 따라 배포한다. 이때마다vercel deploy명령을 직접 실행할 필요는 없다.[사람 검증] 공개 URL에 접속한다. 로그인하지 않은 시크릿 창에서 열었을 때 머니노트 로그인 화면이 보여야 한다. 대신 Vercel 로그인 페이지가 나타나면 프로젝트 → Settings → Deployment Protection에서 Vercel Authentication 설정을 확인한다. 공개 서비스로 사용할 계획이라면 해당 보호 기능을 끈 뒤 다시 접속해 본다.
배포된 주소에서도 로그인할 수 있도록 Vercel 도메인을 Supabase 인증 설정에 등록한다. 1. Supabase 대시보드 Authentication → URL Configuration으로 간다. 2. Site URL에 Vercel 공개 URL을 넣고, Redirect URLs에도 같은 주소를 추가한 뒤 저장한다.
이렇게 나오면 성공: 배포된 공개 주소에서 표준 테스트 계정(demo@moneynote.dev / moneynote1234)으로 로그인하면, 로컬에서 보던 그 거래·통계·AI가 그대로 뜬다. (내 컴퓨터가 아닌 곳에서도 열린다는 걸 폰으로도 확인해 볼 수 있다.)
vercel env ls로 5개가 다 있는지, 이름이 정확한지 확인(고친 뒤엔 재배포해야 반영된다).