1. 프로젝트 생성
vercel.com에 깃헙으로 로그인하여 프로젝트를 생성한다.
팀프로젝트는 유료라서 개인 계정쪽(default)에서 프로젝트를 생성했다.
Add Github Account를 누르면 조직의 레포도 import 가능하다.
팀 조직에 install Vercel을 한다.
프론트엔드 레포를 선택하여 access요청을 이메일로 보냈다. 나는 팀원이라 깃헙 조직 소유자 이메일로 요청이 간다.
(승인받고난화면인지 아무튼 비슷한데 연결이됨 )
문제상황(잘못연결)
주의: 절대 Import Third-Party Git Repository → 로 생성하지마세요!
Vercel이 “새로운 레포”를 본인 계정의 private repo로 생성하고 그시점의 코드만 main브랜치에 반영된다. (원본 레포 연동 끊김)
프로젝트 생성할때 그냥 url로 import했는데
도메인 추가시 Preview에서 develop브랜치 등록이 안되는상황 발생... !
당연하다.
develop브랜치가 없어서 안됐던 것...
다시보니 내 레포에 조직레포가 main브랜치만 복제돼서 내레포에서 프로덕션만 배포가 됐다.
연결된 repository는 Settings - Git - connected Git Repository에서 확인할 수 있다.
이때, 프로젝트를 지우고 다시 만들필요 없이 Disconnect로 연결 끊고 다시 승인된 조직레포로 연결하면 된다.
2. 도메인 추가
Settings - Domains - Add Domain 버튼 클릭
무료로 도메인을 사용하려면 간단하게 vercel 제공 서브도메인을 이용하면된다.
*.vercel.app 형식으로 작성하면되고(dev.app-name.vercel.app 이렇게는 안된다.)
Connect to an environment - Preview 선택 - develop 브랜치 선택 하고 Save!
커스텀 도메인 등록시 이렇게 뜨는데
도메인 발급 받은 곳에서 CNAME등록 하면 된다.
3. develop브랜치 배포
처음에 Preview환경에 develop 브랜치를 배포하려면 두가지 방법이 있다.
3-1. push
develop브랜치에서 push 한번해줘야 트리거가된다.
git push origin develop
그런데 직접 develop에서 push하고싶지 않아서(PR merge로 안된다고함) 다른 방법을 찾았당
3-2. vercel 명령어
develop브랜치에서 그냥 vercel 실행을 하면된다. (--prod 없이)
이 명령어를 쓰려면 전역에 vercel을 설치해야한다.
설치확인 먼저 체크
vercel --version
설치, 로그인
npm install -g vercel
vercel login 깃헙이나 등등으로 로그인하고
vercel 배포 명령어
vercel
❯ vercel Vercel CLI 44.6.4
? Set up and deploy “~/dev/boardgame-frontend”? yes
(지금 디렉토리(= 현재 터미널 위치)에 있는 프로젝트를 배포할 건지)
? Which scope should contain your project? [계정]
(Vercel 계정 또는 팀(조직) 중 어디에 이 프로젝트를 연결할 건지 선택)
? Link to existing project? (y/N) -> y
(이미 Vercel 웹에서 만든 프로젝트가 있는데, 그 프로젝트에 이 디렉토리를 연결할 거냐?)그 다음에 CLI가 당신의 Vercel 계정에 있는 프로젝트 목록을 보여주고
프로젝트이름을 선택하면 Preview 배포가 시작된다.
vercel 한 번만 연결되면 .vercel/project.json 파일이 생기고
다음부터는 vercel만 입력해도 자동으로 해당 프로젝트로 Preview 배포가된다.
4. 자동배포
Vercel이 Git 연동상태이고 develop브랜치가 한번이라도 Vercel에 인식이 된적 있으면
PR(Pull Request) 머지로도 Vercel 자동 배포가 트리거된다.
머지되었는데 배포가 안 되는 경우
| 상황 | 원인 |
|---|---|
| PR이 develop으로 머지됐는데 Preview 배포 없음 | develop 브랜치가 Vercel에 인식된 적이 없음 (푸시 한 번도 안 됨) |
| 머지했는데 Vercel은 main만 보고 있음 | Production Branch만 트리거 대상인 경우 |
| PR 머지 방식이 Squash and merge인데 커밋이 develop에 안 남음 | 결과적으로 develop에 변화가 없음 → Vercel도 트리거 안 됨 |
Vercel은 기본적으로 CI/CD용 yml 파일 (예: GitHub Actions의 .yml`) 없이도 자동으로 배포되지만
배포전에 테스트를 실행하거나 빌드조건을 정밀하게 제어하려면
Github Actions 추가와 vercel.json 추가가 필요하다.