[배포] Vercel을 이용한 프로젝트 배포

최근 영화에 관심이 많아지면서 내가 시청한 영화 티켓을 모을 수 있는 웹사이트를 한번 만들어보자! 라는 생각으로 On My Ticket이라는 프로젝트를 해보려고 이것저것 만져보았었다.

지난 Helfit 프로젝트에서 next.js를 사용하면서 라우팅에 있어 굉장히 편함을 느꼈지만 배포후 발생하는 이슈들에 골머리를 쌓았던 경험이 있었다.

이번 프로젝트에서도 지난 프로젝트와 마찬가지로 next.js와 Typescript를 사용하지만 지난 번과는 다르게 개발전에 CI/CD 구축을 완료해놓고 개발을 진행하려고 한다.

이번에는 AWS 배포가 아닌 Next.js 개발팀에서 만든 프론트엔드 배포 자동화 시스템인 Vercel을 알게되어 이를 활용한 배포를 진행해보았다.

매우 쉽고 간단하다 !

Vercel은 프로젝트 셋업 후 코드를 커밋하면 자동으로 코드를 빌드하고 배포하는 과정인 CI/CD를 스스로 작업해주기에 굉장히 편리해보였고 Next.js에서 제공하는 모든 기능을 가장 완벽하게 지원해준다는 글을 보고 선택해보고 싶었다.

비록 메모리 제한이 있다던가 등의 단점들이 있지만 개인 프로젝트의 경우 서비스가 크지 않기 때문에 크게 신경쓰지 않았다.

Vercel에 로그인하고 내 GitHub아이디를 연동해준다

내가 원하는 레포를 import해준다.

여기서 주의해야할 점은 그냥 Deploy를 누르면 가벼운 에러가 발생할 수 있는데 root폴더를 명확하게 설정해주어야 한다.

내 파일구조는 다음과 같기 때문에 ./를 ./front로 설정 변경을 해주어야 했다.

도메인을 수정할 수 있는데 무료 버전이라 .vercel.app을 무조건 뒤에 넣어주어야 한다. 사용해보고 괜찮다면 결제해봐야겠다.

Vercel CICD

정말 정말 정말 편하다 이전에 AWS 배포를 했던 것 보다 배포속도도 훨씬 빠르고 매우 간편했다. 거짓말치지 않고 배포 하는데 5분도 걸리지 않았다… 아마 AWS 배포도 진행해 볼 것이긴 하지만 이번 프로젝트는 Vercel을 통해 계속해서 배포 관리를 해줄 것 같다.