포트폴리오 배포하기

포트폴리오 사이트를 배포하기전에 어떤 방법을 사용할지 고민했다.

배포 방법 선택하기

React등을 이용해 만든 CSR의 경우는 배포 시 빌드를 통해 생성된 build폴더에 있는 정적파일들을 AWS의 s3를 이용해 배포하거나 FTP를 통해 서버에 접속하여 업로드하여 배포하는 등의 방법을 사용했었다.

NEXT JS의 경우는 SSR, SSG, ISR 등의 기능을 제공해주기때문에 위와 다른 방법으로 배포를 해야했다.

NEXT JS 배포

우선 첫번째 방법은 serverless를 사용하는 Faas(Functions as Service)를 이용하는 방법이 있었다. 대표적인 것으로는 Vercel이 있다.
두번째 방법은 서버를 배포하는 것처럼 서버를 하나 빌려 서버에 빌드된 파일을 실행시키는 방법이다. 대표적으로는 AWS의 EC2가 있다.

이번에는 Vercel을 이용해 배포를 하기로했다.

Vercel을 선택한 이유

1. NEXT JS 친화적 : Vercel의 가장 큰 장점은 Next.js를 만든 팀에서 만든 것으로 Next.js에서 제공하는 모든 기능과 앞으로 추가될 기능을 완벽하게 지원한다.
2. 간편한 CI/CD : 저장소를 연동해두기만하면 저장소에 푸시할 때마다 자동으로 배포가 이루어진다. 이를 통해 손쉽게 CI/CD 프로세스를 설정할 수 있다.
3. 개발자 경험 개선 : 사용자에게 사용자 친화적인 대시보드와 쉬운 설정 방법을 제공하며, 로컬 개발 환경에서 실시간 미리보기 기능과 같은 도구를 제공하여 개발 및 디버깅이 용이하다.

배포 시작

1. 우선 Vercel 홈페이지에 로그인을 한다.
   
2. Add New를 클릭 후 프로젝트를 선택한다.
   
3. 배포할 프로젝트를 Import 한다.
   
4. 사용한 프레임워크를 선택하고 Root Directory를 선택한다.
   
5. 이후 Deploy 버튼을 클릭한다.
6. 배포 완료!