15. 배포하기. with. Vercel

배포하기 전에 할 일은 이렇다.

1. 코드점검
2. 기능 점검
3. 최적화

 

 

1. 코드 점검

 

console.log() 등의 쓸모없는 코드를 지우고,

혹시 모를 위험한 Key 들 ( 비밀번호라던가, 숨겨져있는 API Key 라던가...) 을 환경변수로 숨긴다.

 

2. 기능 점검

 

실제로 기능이 동작하는지, 눌러보며 점검한다.

검사 툴이 있지만, 아직은 쓸 줄 모른다...

 

3. 최적화

 

레이지 로딩과 지연 로딩을 사용해, 잘 들어가지 않는 페이지를 사전에 다운로드 받지 않도록 한다.

넘겨받는 값이 변하지 않는 "큰 라우터" 가 있다면, React.memo() 를 활용하여, Re-Render 되지 않게 한다.

이미지 크기를 줄여, 데이터를 낭비하지 않게 한다.

 

이미지 크기를 줄이는 것 이외에 할 것은 딱히 없었다.

 

우선, 레이지 로딩과 지연로딩을 사용하기에는, 딱 필요한 페이지만 만들어 두었다.

또한, Re-Render 되지 않게 하기 위해, React.memo() 를 사용하기에는, 중첩된 라우터도 없고, 크기가 크지 않았다.

 

그래서 이미지 크기만 줄였다.

 

배포시작

거창하게 말했지만, 서버측 코드가 없는 현 상황에서, 그다지 배포하기 힘들 것이 전혀 없었다.

 

Next.js 를 배포했던, Vercel 을 사용하여 배포하기로 하였다.

 

https://vercel.com/

Develop. Preview. Ship. For the best frontend teams – Vercel

 

1. 메인 페이지에 들어가, Add New... 를 누른다.

 

2. Project 를 누르고, 새로운 repo 를 추가한다.

전부 추가하면, 번거로울 일은 없지만, 내키지 않아서, 하나씩 필요할때마다 추가하고 있다.

 

3. 필요한 환경변수를 추가하고, 배포한다. 끝

환경변수는 나의 경우,  파이어베이스 AUTH의 API 키 정도 추가했다.

필요의 경우, MongoDB 의 API 와, 각종 인증이 필요한 라이브러리의 API 키를 환경변수에 담아,

환경변수 추가창에 값을 입력하고, 배포하면된다.