[Next.js] Vercel로 프론트 배포하기

 

 

 

 

 

❔ Vercel 이란

Vercel 은 Next.js 에서 제공하는 배포플랫폼으로 [빌드 + 배포 + 호스팅] 서비스를 제공한다.
Next.js 공식문서에서는 Vercel를 통한 Front Project 배포를 권장하고 있으며, github의 레파지토리를 통해 쉽게 배포 할 수 있다.

 

 

 

1️⃣ deploy 추가

Vercel 에서의 배포를 위해 pakage.json 에 deploy를 추가한다.

{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start"
  }
}

 

 

 

2️⃣ repository 등록

https://vercel.com/new 에서 github 계정으로 로그인 후 배포 할 repository를 등록하고 import project 를 클릭한다

 

 

 

3️⃣ Configure Project 설정

프로젝트 빌드를 위한 설정을 하는 단계이다.
BUILD COMMAND 에 pakage.json 에서 추가한 Build 명령어를 입력한다.
OUTPUT DIRECTORY 은 배포시 디렉토리의 경로이다. Vercel이 프로젝트가 출력되면 자동으로 디렉토리가 구성된다.
INSTALL COMMAND 는 빌드단계에서 package-lock.json 이 있으면 Vercel이 install 명령어를 실행하여 dependencies를 설치해준다.

환경변수가 필요하다면 Environment Variables에서 설정할 수 있고  Deploy 를  실행한다.

 

 

4️⃣ Deploy

배포를 성공하면 아래와 같이 나온다.

또한, 단순한 배포 외에도 Deployment Status를 확인하거나, Analytics 등 많은 기능을 이용할 수 있다.

 

 

 

 

 

 

 

 

 

※ 참고문서

https://nextjs.org/docs/deployment#managed-nextjs-with-vercel