[React] Vercel로 웹 프로젝트 배포하기

이번 방학동안 진행한 개인 프로젝트 <굿럭버디> 프론트를 배포하였다.
예전엔 프론트 배포도 AWS를 사용했는데 돈도 많이 들고 관리가 힘들었어서 프론트는 Vercel을 이용하기로 했다.

Vercel 설치

npm install -g vercel

프로젝트 루트에 vercel을 설치한다.

Vercel 회원가입

https://vercel.com/
회원가입 후 로그인 진행

vercel login

해당 명령어를 치면 자동으로 인증 웹 화면으로 리다이렉트 된다.

연동

vercel 사이트에 깃으로 가입 후, 미리 레포를 연동해둔다.

vercel

그 후 vercel 명령어 입력 시 (빌드가 무사히 된다는 가정하에) preview 링크가 발급된다.
이는 아직 실제 서비스 배포 상태가 아니며, vercel 계정이 인증되어야 볼 수 있다.

실제 서비스 배포

vercel --prod

이러면 vercel 로그인을 하지 않아도 배포된 사이트에 접근 가능하다.
https://goodluckbuddy-frontend.vercel.app/

참고자료

https://www.yolog.co.kr/post/vercel-deployment