Next.js 포트폴리오 페이지 제작기 - 8. 배포

포트폴리오 페이지 제작의 막바지에 다다랐다.

글로는 쓰진 않았지만 그간 contact 페이지에 canvas로 애니메이션을 추가하고 resume 페이지도 추가하고 임시로 해놨던 내용도 작성하여 다시 채워넣었다.

이제 마지막으로 localhost 주소에서 벗어날 차례이다.

 

배포 방법 선정

배포 방법으로는 몇 가지 선택지가 있다.

가장 원초적인 방법으론 집에서 남는 PC로 서버를 돌리는 방법이 있고, 많이들 사용하는 github page를 사용할 수 있지만, 나는 vercel을 사용하기로 하였다.

 

가장 큰 이유는 개인 프로젝트 수준에서 무료로 이용할 수 있으며 github repo를 그대로 가져와 사용할 수 있다는 점이다.

부차적인 이유로는 Next.js를 사용해 제작하다보니 시작부터 끝까지 vercel을 사용하고 싶다는 뽐뿌가 왔다.

 

배포 과정

배포는 vercel 페이지에서 간단하게 할 수 있다.

 

아래 페이지에 접속하면 다음과 같은 페이지를 볼 수 있다.

https://vercel.com/new

나는 GitHub을 이용하고 있었기에 'Continue with GitHub'을 선택하고 로그인 과정을 거치고 배포할 repo를 선택해주,

이렇게 배포할 repo가 나타난다. (나의 경우엔 portfolio이다.)

그 후로 아래 페이지에서 프로젝트에 대한 몇 가지 설정을 해주면 된다.

나는 딱히 세팅이나 환경 변수 설정할 것이 없기에 바로 Deploy를 선택하였다.

이제 배포에 필요한 어느정도의 시간이 지나면 다음과 같이 배포가 완료되었음을 알려준다.

따로 도메인을 구매하지 않았다면 Dashboard에서 해당 프로젝트를 선택한 화면에서 자동으로 생성된 도메인을 확인 가능하다.

이렇게 간단하게 배포가 끝나게 된다.

 

Vercel 사용기

몇 번의 클릭 만으로도 간단히 배포를 끝낼 수 있다는 것이 제일 강점인 것 같다.

또한 GitHub에 연결해 놓을 경우 master에 push할 때마다 자동으로 재배포가 이루어지는 점도 매우 편리하다.

거기에 추가로 접속한 유저가 접속할 때마다 성능을 측정하여 'Speed Insights'라는 이름으로 제공을 한다.

(배포 마지막 이미지에 주황색 원 안에 60이라고 적혀있는 것이 성능 점수이다.)

 

물론 이건 유저의 접속 환경을 고려하지 않기 때문에 객관적인 지표라고 보기는 힘들다.

나의 경우엔 데스크탑에서 90점 가까이 되는 점수가 나오는데 조금 오래된 노트북에서 접속하면 60점 정도로 점수 차이가 꽤나 나는 것을 경험하였다.

그래도 내 페이지를 사용하는 유저들이 평균적으로 어느 정도의 성능을 경험하고 있는지를 실증적으로 확인하는데는 도움이 될 것 같다.