[Next.js] Vercel로 프론트 배포하기 (도메인 변경)

 

🟡 1. Vercel이란?

  vercel은 Next.js에서 공식적으로 제공하는 호스팅 사이트입니다. Next.js에 최적화되어 있다 보니 이번에 만든 포트폴리오 사이트를 vercel을 통해서 배포해보겠습니다.

 

🟡 2. 배포하기

  🟣 2.1 deploy 추가하기

"scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "vercel-deploy": "next build && next export"
}

 배포하고자 하는 프로젝트의 package.json파일에 script부분을 위와 같이 변경해줍니다. 보통은 vercel-deploy만 추가해주면 됩니다.

 

🟣 2.2 Git에 Push 하기

  기존에 배포하고자 하는 프로젝트를 git에 push하지 않았다면, 새로운 repository를 생성하고 push 합니다.

 

🟣 2.3 vercel에 Git Repository 등록하기

 new project 버튼을 클릭하면, 아래와 같이 연결된 github의 레포지토리 리스트가 나옵니다. 그중 배포하고자 하는 프로젝트 옆에 import를 누릅니다. 

 

🟣 2.4 배포하기

import 버튼을 누르게 되면 위 사진과 같은 화면이 뜨게 됩니다. 여기서는 따로 수정할 건 없이 Deploy 버튼을 눌러줍니다.

 

🟣 2.5 배포 확인

배포가 정상적으로 완료가 되면 위 사진과 같은 화면이 뜹니다. 그런 DOMAINS 밑에 글씨는 누르면 배포된 사이트가 새창으로 열립니다.

vercel로 배포한 포트폴리오 사이트 입니다.

 

🟡 3. 도메인 변경

 만약 자동으로 완성된 도메인이 마음에 안 든다면, 아래와 같은 방법으로 변경이 가능합니다.

1. 자신의 Dashboar
2. Dashbord 중 변경하고자 하는 프로젝트 클릭
3. 상단 메뉴에서 Settings
4. 좌측 메뉴 중 Domains
5. Edit
6. Domain 입력창에 원하는 Domain 주소 넣기

 ❗ 주의사항 : 무료 버전의 경우 원하는 이름. vercel.app의 형태로만 변경이 가능한 것 같습니다.

 

 

📝 정리 

1. package.json에 vercel-deploy 추가하기
2. github에 배포하기
3. vercel과 github 연동하기
4. 원하는 프로젝트 vercel에 import 후 deploy 하기

 

 

 

긴 글 읽어주셔서 감사합니다 :) 
틀린 내용이 있거나, 덧붙일 내용이 있다면 언제든지 댓글 달아주세요!
제 글이 조금이나마 읽으신 분들에게 도움이 되도록 노력하겠습니다
다음 편에 봬요~