Vercel에 github 연동해서 프로젝트 배포하기

[Vercel] FE 자동배포, 도메인 생성, 프리뷰, 사이트 분석까지! 프론트엔드 개발자를 위한 플랫폼

Next.js Docs를 읽다가 이렇게 유용한 프레임워크를 만든 Vercel이란 팀은 어떤 곳일까 궁금해서 레포를 돌아다니고 있었다. 그러다가 발견한 Vercel팀과 동일한 이름인 플랫폼 'Vercel'.

 

보통 플랫폼이나 툴 웹사이트의 메인페이지에는 간단하게 그들의 상품을 소개하는 문구가 있는데, 소개글이 자신감이 드러나다 못해 넘쳐 흘러서 매우 인상적이었다.

Develop. Preview. Ship.

Vercel is the platform for frontend developers, providing the speed and reliability innovators need to create at the moment of inspiration.

개발하고, 결과물을 미리보고, 웹 세계에 실어보내다.
혁신가가 영감을 얻는 순간 창조하는데 필요한 속도와 안정성을 제공하는 프론트엔드 개발자를 위한 플랫폼

혁신가라는 단어와 영감을 얻는 그 짧은 순간에 개발부터 결과물까지 만들어내는 모든 장애물을 걷어내고 빠르고 안정적인 결과물을 만들어낼 수 있다는 소개 문구를 보자마자 호기심이 마구 일어 바로 Get Started를 따라가봤다.

 

# 1. Vercel 회원 등록

1. Vercel 페이지 접속 - https://vercel.com/

Vercel 메인 페이지

2. [Continue with GitHub] 버튼 클릭 - [Authorize Vercel] 클릭

3. 로그인 검증을 위한 [핸드폰 번호 입력] - 핸드폰으로 받은 [인증번호] 입력

 

# 2. 배포할 프론트 프로젝트 준비 (이미 있다면 3번으로)

Next.js Document를 읽고 있던 차에 Vercel 플랫폼을 따라가는 거라, 배포할 프론트 프로젝트로 Next.js를 선택했다. Vercel에서 정말 많은 프론트 라이브러리나 프레임워크를 지원하고 있으니, 이 글을 따라오고 계신 분들은 원하는 기술스택을 이용해서 배포할 프로젝트를 준비하시면 됩니다.

1. [github repogitory 새로 생성] - [yarn create next-app --typescript] 입력 - [ESLint, 'src/' 디렉토리, 'app/' 디렉토리] 옵션 모두 Yes 선택

2. next-app이 설치가 완료되면 [yarn dev]로 정상적으로 웹페이지가 열리는지 확인

 

# 3. Vercel에 Github repogistory 연동

1. Vercel 플랫폼에 등록하고자 하는 [Github Repo옆 Import] 버튼 클릭

2. [Framework Preset]에 프로젝트 기술스택 선택 - [Root Directory]가 레포의 root가 아니라면 Edit 버튼 클릭 후 수정 - [Build and Output Setting] 영역에 [build], [install] command 입력

3. Deploy 진행 화면에서 문제 없이 배포 되었는지 확인 - 배포 완료되면 'Congratulations!' 라는 타이틀과 함께 [Preview] 제공

4. [Continue to Dashboard] 클릭 후 Vercel에서 제공하는 여러 기능 + 배포된 사이트의 도메인 확인

 

# 4. 결과

Vercel플랫폼을 이용해서 Next.js 프로젝트 배포하는 과정

main 브랜치에 배포하면 자동으로 배포해주고, 도메인도 만들어주고, 사이트에 대한 분석 동의만 하면 여러 분석 툴도 제공해주고 진짜 엄청난 플랫폼이다.

배포 젠킨스 말고 이거 쓰세요. 꼭 쓰세요