Next.js - vercel 배포하기

 

피그마 플러그인을 만드는 도중 Oauth 인증 과정에서 서버도메인이 필요하게 되었다.

이전에 프론트 사이트로 몇번 배포했었는데, 기억이 가물가물..

아카이브용으로 Next.js 로 만든 프로젝트를 vercel 배포과정을 정리해보았다

(참고로 vercel 은 정적 페이지를 쉽게 빌드/배포 할 수 있는 호스팅 서비스를 제공하는 클라우드 플랫폼이다)

 

---

Next.js - vercel 배포하기

1. vercel 에 로그인을 하면 대시보드가 뜨고, add new 버튼 > project 를 선택해주자

 

 

 

2. 나는 이미 등록한 계정으로 깃 레포만 추가하는 거라 깃헙 앱 퍼미션을 클릭해주었다.

 

 

3. 모달 창이 뜨고, 로그인을 하고 나면 아래와 같은 세팅 페이지로 들어가게 된다. 스크롤 바를 굴려 아래로 내려가보자

 

 

4. 여기서  Repository access 영역 > select repositories 셀렉트 박스를 클릭

 

 

4. 선택하고 저장 누르면 완료~ 자동으로 창이 꺼진다

 

 

4. 배포하고자 하는 레포가 추가 되었다. 이 레포의 import 버튼을 눌러주자 

 

 

5. 프로젝트를 등록해주자 (여기서는 필요한 환경변수가 있어 추가도 해주었다.) 스크롤을 좀더 내려 deploy 버튼을 클릭!

*** 왜 환경변수를 대시보드에서 등록할까 ?

환경변수는 로컬에서는 .env 파일로 설정할 수 있는데, Vercel은 빌드랑 런타임이 클라우드에서 실행되기 때문에 대시보드에 등록해서 환경변수를 알려줘야 정상작동한다.

 

 

6. 성공~