Next.js 앱을 Vercel에 올리기 — git push 자동 배포 + 환경변수(키) 등록까지

Next.js 앱(기도맘)을 Vercel에 올리는 전 과정 — GitHub에 코드를 올리고, Vercel에 연결하고, 깃에 푸시하면 자동으로 배포되게 만들고, 환경변수(키)까지 등록하는 것을 아주 쉽게 정리했습니다. 명령어는 딱 하나(git push)만 알면 됩니다.

들어가며

만든 웹사이트를 나만 보는 게 아니라 인터넷에 올려서 누구나 접속하게 하려면 "배포(deploy)"를 해야 합니다. 예전엔 서버를 빌리고 설정하느라 골치 아팠는데, 요즘은 Vercel 덕분에 정말 쉬워졌어요.

Vercel 은 Next.js를 만든 회사의 배포 서비스입니다. 한 번 연결해두면 — 코드를 GitHub에 푸시할 때마다 알아서 사이트를 새로 배포해줍니다. 개인 프로젝트는 무료로 시작할 수 있고요.

이 글의 목표는 세 가지입니다.

• 기도맘 코드를 Vercel에 올려서 인터넷 주소로 접속하기
• git push 하면 자동으로 재배포되게 만들기
• 앱이 돌아가는 데 필요한 환경변수(키) 등록하기

전체 그림 한눈에

핵심은 GitHub와 Vercel을 한 번만 연결해두면, 그다음부터는 git push 하나로 끝난다는 겁니다.

준비물

• GitHub 계정 + 코드가 올라간 저장소 (기도맘은 이미 github.com/…/gidomom 에 있음)
• Vercel 계정 (GitHub로 가입하면 편함)
• Turso 클라우드 DB 값 — TURSO_DATABASE_URL, TURSO_AUTH_TOKEN (발급법은 별도 글 「Turso 무료로 시작하기」 참고)
• 카카오 로그인 키 (쓸 경우)

💡 왜 Turso 클라우드가 필요한가요? 로컬 개발에선 file:local.db 파일을 썼지만, Vercel 서버에는 파일을 저장해둘 수 없습니다(요청이 끝나면 사라짐). 그래서 운영에선 클라우드 DB(Turso) 를 써야 합니다.

1단계 — 코드를 GitHub에 올리기

기도맘은 이미 GitHub 저장소에 연결되어 있어서, 바뀐 내용을 올리기만 하면 됩니다.

git add .
git commit -m "배포 준비"
git push

💡 아직 GitHub 저장소가 없다면: GitHub에서 New repository 로 빈 저장소를 만들고, 안내에 나오는 git remote add origin ... → git push -u origin main 을 그대로 따라 하면 됩니다.

2단계 — Vercel 가입 & GitHub 연결

1. vercel.com 접속 → Sign Up.
2. Continue with GitHub 로 가입 (GitHub 계정으로 로그인).
3. Vercel이 "GitHub 저장소에 접근해도 될까요?" 물어보면 허용합니다. (전체 또는 기도맘 저장소만 선택 가능)

3단계 — 프로젝트 가져오기(Import) ⭐

1. Vercel 대시보드 → Add New… → Project.
2. 내 GitHub 저장소 목록에서 gidomom 을 찾아 Import.
3. 설정 화면이 나오는데, Next.js는 Vercel이 자동으로 알아봅니다. Framework, Build Command 등은 그대로 두면 됩니다. (건드리지 마세요)
4. 아직 Deploy 를 누르지 말고, 아래 Environment Variables(환경변수) 부터 채웁니다. → 4단계

⚠️ 환경변수 없이 먼저 배포하면 DB·로그인이 동작하지 않습니다. 키를 먼저 넣고 배포하는 게 깔끔합니다.

4단계 — 환경변수(키) 등록 ⭐⭐

가장 중요한 부분입니다. Import 화면(또는 나중에 Settings → Environment Variables)에서 이름(Key)과 값(Value) 을 한 쌍씩 추가합니다.

기도맘에 필요한 값들:

⚠️ 꼭 지킬 것

• JWT_SECRET_KEY 는 openssl rand -hex 32 같은 걸로 길고 무작위하게 만드세요. 기본값 그대로 두면 위험합니다.
• SEED_ADMIN_PASSWORD 는 반드시 바꾸세요. (admin123 금지)
• .env 파일 자체는 GitHub에 올라가지 않습니다. 그래서 Vercel에는 이렇게 따로 값을 넣어줘야 합니다.

💡 팁 — NEXT_PUBLIC_SITE_URL 과 KAKAO_REDIRECT_URI 는 배포 주소가 정해져야 정확히 넣을 수 있습니다. 일단 배포해서 주소(xxx.vercel.app)를 확인한 뒤, 이 두 값을 다시 채우고 재배포해도 됩니다. (6단계 참고)

5단계 — 배포(Deploy) & 주소 확인

1. 값을 다 넣었으면 Deploy 클릭.
2. 잠깐 기다리면 빌드가 끝나고 🎉 축하 화면과 함께 주소(예: gidomom.vercel.app) 가 나옵니다.
3. 그 주소를 클릭하면 실제로 사이트가 뜹니다.

6단계 — 배포 주소로 마무리 설정

배포 주소가 정해졌으니, 주소에 의존하는 값 두 개를 마무리합니다.

1. Vercel Settings → Environment Variables 에서
   • NEXT_PUBLIC_SITE_URL → https://실제-주소.vercel.app
   • KAKAO_REDIRECT_URI → https://실제-주소.vercel.app/api/auth/kakao/callback 로 수정.
2. 카카오 개발자 콘솔에도 위 Redirect URI를 똑같이 등록합니다. (안 하면 카카오 로그인에서 에러)
3. 값을 바꿨으니 Deployments → 최신 배포 → Redeploy 로 다시 배포하면 반영됩니다.

7단계 — 자동 배포 확인 ⭐

이제 진짜 편한 부분. 코드를 고치고 그냥 푸시만 하면 됩니다.

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

푸시하는 순간 Vercel이 자동으로 감지 → 빌드 → 배포합니다. 대시보드 Deployments 탭에서 진행 상황이 실시간으로 보이고, 끝나면 사이트에 바로 반영됩니다.

💡 main 브랜치에 푸시하면 운영(Production) 에 배포됩니다. 다른 브랜치나 Pull Request를 올리면 미리보기(Preview) 주소가 따로 생겨서, 실제 사이트에 영향 없이 테스트할 수 있어요.

자주 막히는 포인트

마치며

정리하면, Vercel 배포는 결국 세 단계입니다.

• GitHub 저장소를 Vercel에 Import (한 번만)
• 환경변수(키) 등록 — 특히 Turso 클라우드·JWT 키·카카오 Redirect URI
• 그다음부터는 git push 하면 자동 배포

한 번 연결해두면 배포는 더 이상 신경 쓸 일이 아니게 됩니다. 코드에 집중하고, 완성되면 git push — 그게 전부예요.