처음 해 보는 Vercel 배포: 공개 사이트가 마음대로 바뀌지 않게
배포 버튼을 누르기 전에 정해둔 게 하나 있습니다. "언제 공개 사이트가 바뀌는지"를 먼저 정하는 것이었습니다. 이번에 블로그를 Vercel(프론트엔드 배포 플랫폼)에 처음 올리면서 겪은 일을 정리해 봅니다.
무엇을 배포했나
블로그, 그러니까 공개 사이트만 Vercel에 올렸습니다. 글을 만드는 백엔드와 관리 화면은 당분간 제 컴퓨터에서 돌립니다.
공개 사이트는 DB에서 "발행된 글"만 읽어오는 구조입니다. 그래서 글을 발행하면 다시 배포하지 않아도 바로 사이트에 나옵니다.
일단은 무료 플랜(Hobby)으로 시작했습니다. 무료 플랜은 비상업 용도만 허용하기 때문에, 나중에 광고를 붙이게 되면 유료로 올리거나 다른 방식으로 옮겨야 합니다.
가장 먼저 정한 것: 운영 브랜치
Vercel은 기본 설정으로 두면 main 브랜치에 코드를 올릴 때마다 공개 사이트가 바뀝니다.
저는 AI(Claude Code)가 작업을 커밋하고 바로 올리는 방식으로 일합니다. 이 상태로 기본 설정을 그대로 뒀다면, 고치는 중인 코드가 그대로 공개될 수 있었습니다.
그래서 배포 전용 브랜치(production)를 따로 만들었습니다. main에 올리면 "미리보기"만 만들어지고, 공개 사이트는 제가 승인해서 production에 올릴 때만 바뀌는 구조입니다.
다른 방법도 있었습니다. main을 그대로 두고 블로그 폴더가 바뀔 때만 배포하는 방식입니다. 하지만 이 방식은 승인 단계가 없어서 고르지 않았습니다.
AI와 프로젝트를 진행하면서 제일 크게 느낀 점은, 아무리 AI가 일을 잘한다고 해도 결국은 사람이 최종적으로 검토하고 확인해야 한다는 것이었습니다. 그래서 제가 직접 확인하고 승인하는 방식으로 결정했습니다.
프로젝트 만들 때 헷갈린 것
가져오기 화면에는 운영 브랜치를 고르는 칸이 따로 없었습니다. 그래서 첫 배포는 일단 main으로 나갔고, 만든 직후 설정에서 production으로 바꿨습니다. 그때는 main과 production 내용이 같아서 문제는 없었습니다.
루트 폴더는 블로그 폴더로 따로 지정해야 했습니다. 저장소 안에 여러 프로그램이 같이 들어 있어서입니다.
환경 변수는 공개용 두 개, DB 주소와 공개 키만 넣었습니다. 관리자용 비밀 키는 넣지 않았습니다.
배포 직전에 "Supabase 연동(Add)" 버튼이 나왔는데 누르지 않았습니다. 연동하면 비밀값이 Vercel에 자동으로 들어갈 수 있기 때문입니다.
"시스템 환경 변수" 체크박스를 찾느라 좀 헤맸습니다. 이걸 켜야 사이트 주소를 Vercel이 알려줍니다. 결과로 나온 사이트맵 안의 주소를 보고 제대로 켜졌는지 확인했습니다.
솔직히 처음엔 AI가 전부 연결해 줄 거라 생각했습니다. 하지만 제가 직접 해야 하는 부분들이 은근 있었고, 배포에 대해 미리 알아본 것도 없었던 터라 그 자리에서 바로 하나씩 찾아가며 시작해야 했습니다. 하다 보니 생각보다 헷갈리는 부분, 생각지도 못한 부분이 많았습니다. 배포하고 나서 겪은 문제와 도메인 연결 이야기는 다음 글에서 이어서 쓸 예정입니다.
첫 배포 결과
화면은 떴는데 "아직 게시된 글이 없습니다"라는 메시지만 나왔습니다. 글이 0편이라서 그런 건지 DB 연결이 안 된 건지 화면만 봐서는 구분이 안 됐습니다. 그래서 Vercel 로그에 DB 오류가 있는지 따로 확인했습니다.
처음엔 문제가 있나 싶었지만, 애초에 써둔 글이 없었으니 그럴 수도 있다고 생각했습니다. 코드나 테스트, 검증 단계에서는 문제가 없었기 때문입니다. 물론 그것만으로 모든 문제를 잡아낼 수는 없습니다. 그래도 AI와 프로젝트를 진행하면서 많은 경험과 확신을 얻었고, 저는 그 부분이 제일 중요하다고 생각합니다.
정리: 체크리스트
- 언제 공개 사이트가 바뀌는지, 즉 운영 브랜치부터 정한다.
- 환경 변수는 공개해도 되는 값만 넣는다. 자동 연동 버튼은 무엇이 들어가는지 알기 전엔 누르지 않는다.
- 빈 화면이 정상인지 오류인지는 로그로 확인한다.