Next.js Vercel로 웹사이트 배포하기

Vercel이란?

Vercel은 Next.js 에서 공식적으로 제공하는 호스팅 사이트로 빌드+배포+호스팅 서비스를 이용할 수 있습니다.

 

 

1. package.json에 deploy추가하기

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

배포를 위해 프로젝트의 package.json파일에 scripts부분을 위와 같이 만들어줍니다.

(보통은 기본세팅으로 되어있는것 같습니다.)

 

2. Github에 소스코드 등록하기

먼저 빈 Repository를 만들어줍니다.

 

프로젝트 폴더로 이동후에

(git init, git add, git commit이 다 되있다는 전제하에)

git remote add origin 깃허브repository주소
git branch -M main
git push -u origin main

위 내용을 입력해줍니다.

 

github에 repository가 올라가있는것을 확인합니다.

 

3. Vercel에 배포하기

이제 Vercel사이트에 로그인을 해야합니다.

로그인 하는 방법에는 GitHub, GitLab, Bitbucket등이 있는데 

본인이 배포하고자 하는 프로젝트의 소스코드가 있는 곳으로 로그인을 해야합니다.

저희는 아까 GitHub로  관리했기때문에 GitHub로 로그인을 해야합니다.

 

로그인에 성공했다면 우측에 Add New를 클릭하고 Project를 선택해줍니다.

 

들어가서 Continue with GitHub를 눌러줍니다.

 

배포를 진행할 프로젝트이름(예, was)을 찾아 등록하고 import 를 클릭합니다.

 

<발견되지 않았을 경우>

만약 깃허브에 올려놓은 프로젝트가 보이지 않는다면 상단 돋보기 모양에 프로젝트이름(예, was)을 입력하고

Configure GitHub App을 클릭해줍니다.

(예시는 보여드리기 위해서 일부로 프로젝트 이름을 틀렸습니다)

 

하단으로 내려보면 Select repositories버튼이 있는데 이 버튼을 클릭하셔서 아까 GitHub에 올린 프로젝트를 찾아서

추가합니다. 추가가 되면 예시 사진처럼 보입니다.

<발견되지 않았을 경우/>

 

다시 돌아와서 

import를 클릭하고 넘어왔다면 다음 화면이 보입니다.

프로젝트 이름, 프레임워크 프리셋, 루트디렉토리 등등 설정해줍니다.

 

BUILD COMMAND에는 아까 package.json에서 추가한 Build명령어를 입력합니다.

OUTPUT DIRECTORY는 배포시에 컴파일된 프런트 엔드가 위치할 디렉터리입니다.(디렉토리의 경로)

INSTALL COMMAND는 프로젝트의 소프트웨어 종속성을 설치하는 데 사용되는 명령이다.

종속성을 설치할 필요가 없는 경우 이 필드를 재정의하고 비워 두면된다.

 

환경변수가 필요하다면 Environment Variables에서 설정하면 된다.

세팅을 끝냈으면 Deploy를  클릭한다.

 

이 화면이 뜬다면 성공적으로 배포를 한것입니다.

우측에 Continue to Dashboard를 클릭합니다.

 

배포를 성공했다면 제공된 도메인으로 접속합니다.

이후 배포된 웹이 출력됩니다.