#12. Deployment

1. 빌드 

Next.js 프로젝트를 배포하려면 우선 실행 가능한 형태로 코드를 변환한 다음에, 서버에서 실행해야 한다. 이때 코드를 변환하는 과정을 '빌드'라고 한다.

npm run build

명령어를 입력하면 .next/ 폴더에 실행에 필요한 파일들이 생성된다.

빌드시 오류 발생이 되면 문제 점 확인 후 수정

 

2. 실행 

npm run start

빌드 버전으로 실행하여 테스트

 

3. 소스코드를  github에 push

git push origin master

 

4. 배포 (with vercel)

Vercel은 Next.js 개발 팀에서 만든 프론트엔드 배포 플랫폼으로 빌드와 배포 그리고 호스팅을 해주는 서비스를 제공한다.

Vercel 장점

• 자동화된 배포: 코드 변경 사항이 GitHub, GitLab, Bitbucket 등과 같은 Git 저장소에 푸시하면, Vercel은 자동으로 변경 사항을 감지하고 새로운 버전의 웹사이트를 자동으로 빌드 및 배포한다.
• 최적화된 성능: Vercel은 CDN(Content Delivery Network)을 통해 전 세계적으로 콘텐츠를 빠르게 제공한다. 또한, 이미지와 자산 최적화를 자동으로 처리하여 애플리케이션의 로딩 시간을 최소화한다.
• 서버리스 기능: Vercel은 서버리스 함수를 지원하여 백엔드 로직을 구현할 수 있게 해준다. 이를 통해 개발자는 서버 유지보수 없이 백엔드 코드를 실행할 수 있다.

 

1. 로그인하기

본인의 프로젝트가 있는 곳으로 로그인을 한다. 나는 GitHub로 프로젝트 관리를 했으므로 GitHub로 로그인을 했다.

 

2. 프로젝트 불러오기

로그인을 하고 나면 프로젝트를 불러와야 한다.
오른쪽에 Add New를 클릭하면 여러 개가 나오는데 Project를 클릭하면 된다.

Install 버튼을 클릭하면 아래 사진과 같이 나오는데 Only select repositories를 클릭한다.
그리고 밑에 Select repositories를 클릭하면 본인의 모든 repository가 나온다.
거기서 배포하고 싶은 repository를 클릭하면 된다.

Install 버튼을 클릭하면 선택한 프로젝트가 화면에 뜬다. 그러면 오른쪽에 Import 버튼을 클릭하면 다음 화면과 같이 뜰거다.

 

3. Deploy하기

프로젝트의 이름을 확인하고 개발을 진행한 Framework를 선택한다.
그리고 Root Directory를 잘 확인해야 한다. Root Directory가 맞지 않으면 build 과정에서 바로 오류가 뜬다.

여기서 중요한 점은 프로젝트를 진행할 때 API KEY를 사용하는 경우가 많이 있다.
이 API KEY를 GitHub에 올라가지 않기 위해 env 파일에 환경 변수 설정해주고 사용하고 있을 것이다.
그러나 Vercel은 GitHub의 Repository를 기준으로 파일을 배포하기 때문에 환경 변수를 알 수 있는 방법이 없다.
그래서 밑에 사진처럼 Environment Variables 탭에서 본인이 env 파일에 설정한 변수와 API KEY 값을 각각 Key와 Value에 맞게 넣고 Add를 클릭하면 된다.
사용하는 API KEY를 빠짐없이 모두 넣어야 한다.

 

4. 배포 완료

무사히 build 과정을 모두 거치고 나면 Congratulations와 함께 배포가 완료된 것을 볼 수 있다.

아마 오른쪽에 Continue to Dashboard 버튼이 보일 것이다.
그 버튼을 클릭하면 아래와 같이 배포가 된 도메인을 제공해준다.
도메인을 클릭하여 사이트에 접속하면 배포된 본인의 프로젝트를 확인할 수 있다.