Vercel로 프로젝트 배포하는 방법

vercel 초기 화면 페이지

Vercel 이란

Vercel은 프론트엔드 개발자를 위한 클라우드 서비스를 제공하고 있는 회사이다. 또한 Next.js를 개발하고 있는 회사이다. Next.js의 프로젝트를 배포할 때 가장 최적화되어 있다. Next.js를 배포하고 싶다면 이 호스팅 서비스를 쓰면 된다.

물론 호스팅만 제공하는 것은 아니다. 다양한 서비스도 존재한다.

회원가입

다음 링크로 들어간 이후, Sign Up를 클릭해서 회원가입을 진행하면 된다.

https://vercel.com/home

Vercel: Build and deploy the best web experiences with the Frontend Cloud – Vercel

---

교육을 목적으로 한 개인 프로젝트 배포용으로 사용할 예정임으로 Hobby 체크한다.

Name 칸에는 한글 입력은 불가능하다. 영어로 기입하자.

맨 위 GitHub 선택하자.

다른 방법 정말 많지만, 그냥 GitHub 연동을 선택하자. (깃허브 계정이 있을 것이라고 생각하고 그냥 진행하겠다. 없는 사람은 다음 링크를 참고)

깃허브 계정 만들기 

---

가입 이후 위 화면이 뜨면 된거다.

vscode 실행

vscode를 열고, 터미널을 열어라. 이후 다음 명령어를 기입하라.

npm i -g vercel

이후 vercel에 로그인하라.

vercel login

뭐로 할래?

깃허브로 했으니, 깃허브를 선택. 이후

Success 가 뜨면 연결 완료.

배포하기

vercel

위 명령어를 기입하자.

명령어 vercel을 입력하면 배포를 위한 여러 가지 질문을 한다.

 

방금 만든 계정임으로 vercel 자체에 내가 가진 repo는 없다. 

따라서 existing project는 없다고 체크해 주고, 그 밖의 물음은 모두 기본값으로 진행했다.

배포가 되면 링크를 여러 가지 제공해 준다.

이 중 Production이 배포된 링크다.

참고한 문서

https://oneyenee.tistory.com/50

[Web] Vercel로 무료 배포하기 (+ .env 파일 환경변수 등록하기)

여기 블로그를 참고해서 작성했다. .env 파일의 환경 설정하는 방법도 있으니 읽어보면 좋을 거 같다.

노마드코더 영상

https://nomadcoders.co/nextjs-for-beginners/lectures/4712

All Courses – 노마드 코더 Nomad Coders

---