vercel 배포 브랜치 설정

사전 프로젝트에 이어 메인 프로젝트도 클라이언트 코드는 vercel의 배포 서비스를 이용하고 있다. 처음 깃헙 레포와 연동해주고 한두 가지 키워드 설정만 하면 자동 배포가 되고, PR을 올리면 충돌이 나는 곳은 없는지 배포가 가능한 상태인지 자동 검사를 해주니 너무 편리하다.

 

사전/메인 프로젝트 두 가지 프로젝트 모두 부트캠프에서 제안한 git flow 전략을 쓰고 있다. 사전 프로젝트에 이어 이번에도 코드 작성 이전에 미리 배포 세팅을 해두었는데, 지난 사전 프로젝트에서 교훈을 얻어 이번에는 한 발 더 나가 처음부터 dev 브랜치의 dev 배포 링크와 main 배포 링크를 분리했다. 

부트캠프에서 제공해준 git flow 자료

 

vercel은 production 모드와 preview 모드를 제공하기 때문에 이를 각각 두 브랜치에 연동하면 간단하게 배포 세팅을 할 수 있었다. 

 

Project > Settings > Domain 메뉴에서 처음에는 production 모드만 있는데, add 버튼을 눌러 하나 더 추가할 수 있다. 

vercel 프로젝트 세팅 메뉴 화면

 

처음 추가를 할 때 설정을 해도 되고, 이후에도 edit 버튼을 눌러 언제든지 수정이 가능하다. Git Branch 항목에 연동할 github 브랜치명을 적어주기만 하면 된다. 

edit 버튼을 눌렀을 때 화면

 

지금까지 짧게나마 vercel 배포 서비스를 쓰면서 엄청난 편리함을 느끼면서 동시에 하나의 치명적인 문제점을 발견했다. 그건 바로 서버와 도메인이 달라지기 때문에 쿠키를 사용할 수 없다는 것..🥲 인증 관련 토큰 등을 처리할 때 쿠키를 쓸 수 없어서 우회하는 방식을 찾아야 하는 번거로움이 수반된다. 프론트엔드보다 백엔드에서 더 고생하는 면이 커서 미안함이 있을 정도.. 실제 서비스를 운영할 때는 같은 서버에 배포를 할 테니 이런 어려움이 없을테니, 다음에 백엔드와 같이 프로젝트를 하게 된다면 자동 배포 파이프라인을 다르게 구축하는 방식을 찾아서 같은 서버에 배포하는 경험도 해보고 싶다. 

 

vercel은 next.js 에서 제공하는 배포 플랫폼이니만큼 next.js 를 사용하면 배포 경험에 달라지는 부분이 있을지도 궁금하다. 어서 next.js 를 배워보고 싶다...! (일단 메인 프로젝트를 마치고나서..😇)