[Next.js] Next.js 작업물 Vercel로 배포하기

Next.js 공부용으로 가볍게 만든 프로젝트 작업물을 Vercel로 배포해 보았다!

GitHub Repository와 연동하면 자동으로 배포가 된다. 놀랍게도 내가 push만 해도 알아서 다시 빌드를 해준다. 너무나도 편하고... 좋았다. 바로 직전에 aws 배포를 연습해 봐서 그런가 vercel의 배포 과정은 너무너무 간단했다ㅠㅠ

 

배포 시 주의해야 할 점은 Vercel의 Node 버전과 로컬의 Node 버전을 맞춰주어야 한다는 것이다. 

Vercel은 최신 Node 버전이 18 버전이다.

 

+) .env 파일에 있는 환경 변수들을 Vercel에선 접근할 수 없으므로 프로젝트 Settings에서 설정해줘야 한다.

환경별로 변수를 설정할 수 있다! 

 

 

 

 

백엔드도 개발했을 경우에는 추가 설정이 필요하다.

 

1) DB 접근 설정

나는 MongoDB Atlas를 사용하였는데 Network Access 설정에서 모든 IP에서 접근이 가능하도록 바꿔주었다.

 

2) (회원 기능이 있다면) NextAuth 설정

NEXTAUTH_URL을 반드시!!! 환경에 맞게 설정해주어야 한다.

OAuth를 구현한다면 로그인 제공 사이트의 애플리케이션 설정에서도 도메인을 추가해주어야 한다.

.env.local
NEXTAUTH_URL=http://localhost:3000

.env.production
NEXTAUTH_URL=배포된 도메인

 

3) API_ROOT 설정

서버 컴포넌트에서 api 요청 시 Full URL을 기입해야 하는데 개발 중에 http://localhost:3000/api/~~ 으로 설정한 걸 배포 전에 바꾸지 않아서 이거 때문에 삽질을 굉장히 오래했다...^.ㅠ  NEXTAUTH_URL과 마찬가지로 환경에 맞게 잘 설정해 두자.

 

 

 

 

 

 

배포하면 이런 페이지가 딱!

홈 화면 미리보기도 제공해 주고, 소스의 깃허브 브랜치와 마지막 커밋까지 보여준다!

 

 

 

 

오류 수정한다고 여러 번 재빌드 했는데 빌드하는데 1분도 안 걸렸다.  

배포 후엔 로그도 볼 수 있었다... 굿