[NEXT.js] 넥스트 JS를 배워보자 5편 - 배포하기 (feat. Vercel)

이번 포스트는 NEXT JS를 배워보자 시리즈의 마지막 편인 배포로 마무리를 해보겠습니다. 

 

.

Next JS 앱을 배포하는 방법은 여러 가지가 있지만 현재 프로젝트의 규모가 작기 때문에 NEXT팀이 만든 빌드, 배포, 호스팅 서비스인 Varcel을 사용해서 간단하게 배포해보도록 하겠습니다.

 

Varcel의 장점들. 대체로 쉽고 빠르게 무료로 배포가 가능하다는 장점들

---

 

1. 깃헙 계정 등록 및 레포 불러오기

 

New Project – Vercel

 

아직 Varcel에 가입이 되어있지 않다면 가입 후 프로젝트가 등록되어있는 깃 헙 계정을 연동시켜주시면 됩니다.

 

깃헙 계정 추가

 

모든 레포에 접근할수 있도록 설정 (아래 옵션을 선택해 접근 가능한 레포를 지정해줘도 됩니다)

 

계정을 성공적으로 연동하면 선택할수 있는 레포 리스트들이 뜨는데 여기서 배포하고 싶은 프로젝트의 레포를 불러와주시면 됩니다.

 

 

2.  프로젝트 세부 설정  (환경변수 등록)

 

세부 설정이라고는 했지만 환경변수 등록하는거 이외에는 사실 크게 건드릴 건 없습니다. 배포하고자 하는 클라이언트 코드가 최상위 루트가 아닌 client 같은 폴더 안에 있다면 Root Directory를 해당 디렉터리로 바꿔주는 정도만 해주시면 됩니다.

 

또 등록할 환경 변수 목록이(.env 파일) 있다면 Environment Variables에 Key, Value 값을 등록해주시길 바랍니다.

 

 

입력 후 Deploy를 눌러주시면 폭죽이 터지면서 성공적으로 배포되는 걸 볼 수 있습니다. 만약 배포가 정상적으로 되지 않았다면 build시 오류가 발생했을 확률이 크므로 로컬 환경에서 빌드 테스트 (npm run build)를 해보고 오류가 나는 부분을 고치시면 됩니다.

 

 

이후에는 Varcel이 설명하는데로 Develop Preview Ship 을 반복하면서 지속적인 배포를 하면 됩니다.

 

Develop: next 명령어를 를 통해서 프로젝트를 로컬 환경에서 실행해보고,

Preview: main 브랜치가 아닌 브랜치(develop)에 push를 하면 생성되는 미리보기를 통해 팀원들과 코드 리뷰와 피드백을 진행한 뒤,

Ship: 최종 production은 main 브랜치에 push 해주기만 하면 지속적인 배포가 가능하게 됩니다.

 

---

마무리

이로써 예정했던 Next JS를 배워보자 시리즈를 마무리하게 되었습니다. 물론 5편에 나눠서 설명했던 기능들이 NEXT JS의 전부는 아니지만 주요 기능들 위주로 사용을 해보면서 많이 친해지는 시간을 가질 수 있게 된 것 같습니다. 현재 회사에서도 사용하는 프레임워크이기 때문에 앞으로도 공유할 좋은 내용이 생긴다면 관련 포스트는 계속해서 올릴 생각이기 때문에 계속 지켜봐주시면 감사하겠습니다.

 

이전글 리스트

2022.02.19 - [Library,Framework] - [NEXT.js] 넥스트 JS를 배워보자 1편 - Pre Rendering

2022.02.20 - [Library,Framework] - [NEXT.js] 넥스트 JS를 배워보자 2편 - 공통 레이아웃

2022.02.28 - [Library,Framework] - [NEXT.js] 넥스트 JS를 배워보자 3편 - 최적화된 이미지 컴포넌트

2022.03.20 - [Library,Framework] - [NEXT.js] 넥스트 JS를 배워보자 4편 - API Routes