마지막) vercel에 무료로 배포하기

여기까지 완료했다면 이제 웹상에서 내 프로젝트를 볼 수 있도록 배포해보자

 

배포를 하는 방법은 여러가지가 있는데 next js는 쉽게 배포를 할 수 있는 vecel과 연동을 제공한다

 

https://vercel.com/

Develop. Preview. Ship. For the best frontend teams – Vercel

해당 홈페이지에 로그인이 완료됐다면 다음과 같은 화면이 뜰것이다.

 

vercel 대시보드

import project를 클릭하자

 

자신의 깃 저장소 url을 입력한다

기본값으로 셋팅하고 next.js가 선택되어있는지 확인한 후 deploy를 시작한다.

 

배포가 끝나고 페이지를 방문했더니 다음과 같은 화면이 표시된다.

 

에러발생은 API 요청 결과가 error일때 발생한다.

API 요청에서 error가 발생하는것 같다.

 

다시 확인해 보니 vercel에서는 깃허브 secret에 접근하지 않고 별도로 environment variable을 관리한다.

 

vercel 대시보드로 가서 key를 추가해보자

 

환경변수 추가

 

수정하고 다시 git commit  & push를 해주니 정상적으로 배포된것을 확인할 수 있다.

 

결과물 링크 :  https://corona-tracker-one.vercel.app

https://corona-tracker-one.vercel.app/