[Next.js] Next.js를 Vercel에 배포하기

Next.js와 Vercel

 

---

 

목차

 

Vercel이란?

Next.js 프로젝트 Vercel에 배포하기

환경변수 설정

커밋부터 배포까지 : 자동 빌드 확인하기

 

---

 

---

[Vercel이란?]

https://vercel.com/products/previews

Next.js는 이미 많은 프론트엔드 개발자들이 선택하는 대표적인 React 프레임워크다.

서버 사이드 렌더링 (SSR), 정적 사이트 생성(SSG) 같은 기능을 쉽게 구현할 수 있어 성능과 SEO 측면에서도 강력한 장점을 제공한다.

 

하지만 애플리케이션을 개발했다고 해서 끝이 아니다.

실제로 사용자가 접근할 수 있도록 배포하고 이후에도 안정적으로 서비스를 운영하려면 배포 환경과 자동화된 배포 파이프라인(CI/CD)이 필요하다.

이때 Vercel은 Next.js를 만든 팀에서 직접 제공하는 호스팅 플랫폼이다.

별도의 서버 설정이나 복잡한 빌드 과정 없이도 손쉽게 프로젝트를 배포할 수 있다.

특히 GitHub, Git Lab, BitBuckey 같은 Git 저장소와 연결만 하면, 코드 변경 사항이 자동으로 배포되는 CI/CD 환경얼 자연스럽게 제공하기 때문에 생산성을 크게 높여준다.

 

이 글에서는 Next.js 프로젝트를 준비하고, Vercel을 통해 간단히 배포하는 방법을 살펴본 뒤 Git 저장소와 연동한 자동 배포 CI/CD 과정까지 작성해보려 한다.

이 과정을 따라가다 보면 코드 작성 → git push → 자동배포라는 개발 워크플로우를 경험할 수 있다.

Vercel은 Git 저장소와 연동하면 기본적으로 자동 CI/CD 환경을 제공한다.

추가 설정 없이도 기본 CI/CD가 작동하므로 Next.js + Vercel조합은 초보자에게 매우 편리하다.

 

<Vercel배포 자동화 과정>

Vercel로 자동 배포하는 과정이다.

https://vercel.com/products/previews

Vercel's toolkit for fueling iteration. – Vercel

1. GitHub, GitLab, BitBucket에 코드를 푸시하면 Vercel이 자동으로 빌드한다.
2. 브랜치별로 Preview Deployment를 생성하여 배포 전에 테스트할 수 있다.
3. main 혹은 production 브랜치로 푸시하면 자동으로 프로덕션 배포가 진행된다.

 

---

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

먼저 Vercel에 배포할 Next.js 프로젝트와 Git이 있어야 하고 Vercel 계정이 있어야 한다.

// [Next.js 프로젝트 생성 추후 추가 예정]

<Vercel 배포 과정>

1. Next.js 프로젝트 생성
2. Vercel 계정 생성
3. Github에 코드 올리기
4. Vercel에 프로젝트 연결
5. 환경 변수 설정
6. 배포

 

Github 리포지토리를 Vercel과 연결한다.

깃허브에서 오른쪽 상단 프로필에서 Settings 클릭

깃허브 Settings

 

https://github.com/settings/profile 화면에 왼쪽 메뉴에서 applications 클릭

application 클릭

 

Applications에서 Vercel을 찾아 설치한 후 Vercel의 configure 클릭

Configure 클릭

permission은 리퍼지터리에 읽고 쓸 수 있는 것까지 알려준다.

permission

 

스크롤을 내리면 Repository access를 볼 수 있다.

Repository access

• All repositories : 모든 리포지터리에 vercel을 설치
• Only select repositories : 원하는 리포지터리에 vercel 설치

저는 원하는 리퍼지터리만 원해 Only select repositories를 선택하였습니다.

리포지터리 선택 후 Save 클릭

 

깃 리포지터리에서 Production Brach : 현재 설정된 배포 브랜치 설정

 

Vercel에 로그인 후 오른쪽 상단에 Dashboard 클릭

Vercel 홈페이지

 

Add New Project 클릭

Add New > Project 클릭

Import git repository에 추가된 것을 확인할 수 있다.

Import 클릭

Import 클릭

 

Vercel과 연결할 프로젝트 정보가 나타난다.

vercel과 연결할 프로젝트 정보

 

• Root Directory
  • 루트 디렉터리
• Build and output settings
  • 빌드할 때 사용 할 명령어다.
  • 기본적인 것을 사용하려면 그대로 두면 된다.
  • 만약 내가 정한 명령어를 사용하려면 명령어를 작성하면 된다.
• Environment Variables
  • 환경변수 설정
  • .env 파일에 api키라던지 환경 변수라던지 다양한 키들을 설저할 수 있는데 그 키와 value를 설정한다.

필요한 거 다 설정 후 Deploy 클릭

환경변수 설정은 밑에서 다루도록 하겠다.

 

building > running check > assign domains

• building : 빌드를 먼저 한다.
• running check : 코드에 문제가 없는지 다양한 체크를 한다.
• assign domains : 도메인 할당

 

배포 완료

Continue to DashBoard 클릭

Continue to Dashboard 클릭

 

Continue to Dashboard 클릭한 후 화면

어떻게 배포되었는지 상태 확인이 가능하다.

• 홈페이지 첫 화면
• Deployment : 배포된 url
• Domain
• Status : 현재 상태
• Created : 언제 만들어졌는지
• Source 브랜치는 무엇인지에 대한 내용

배포 상태를 확인할 수 있는 화면

 

---

[환경변수 설정]

.env 파일에 api키라던지 환경변수라던지 다양한 키들을 설정할 수 있다.

그 키와 value를 설정할 수 있다.

환경변수

.env 파일

 

Vercel에서 환경변수 설정하기

Vercel에서 환경변수 설정하기

 

환경변수 설정은 다음과 같이 입력하면 된다.

환경변수 설정

 

---

[커밋부터 배포까지 : 자동 빌드 확인하기]

프로젝트에서 변경사항이 발생하면 먼저 Github에 커밋 후 푸시를 한다.

개발자 A가 feat/devA 브랜치에서 사용자 프로필 수정하기 기능을 만들었다.

개발자 A 커밋 푸시

 

Vercel은 Github 리포지토리와 연동되어 있기 때문에 푸시가 감지되면 자동으로 빌드가 시작된다.

빌드가 완료되면 브라우저에서 배포된 애플리케이션을 확인할 수 있다.

 

<Domains>

• 첫 번째 URL
  • 공통적으로 사용하는 메인 URL
  • 실제 사용자가 보는 URL 
• 두 번째 URL
  
  • 브랜치 별로 만들어진 url이다.
  • main 브랜치에 커밋이 발생하면 최신 것들이 반영이 된 현재 main 브랜치에 코드 내용을 반영하고 있는 웹앱 url
• 세 번째 URL
  • 방금 커밋 한 커밋의 변경사항을 반영하고 있는 url

Domains

 

푸시를 한 후 깃허브에서 빌드/테스트 상태를 확인할 수 있다.

푸시를 한 직후에는 브라운색 표시가 된 것을 볼 수 있다.

클릭해서 확인해 보면 vercel에서 자동으로 감지해서 빌드를 시작하는 것을 확인할 수 있다.

깃허브에서 빌드 상태 확인

 

<빌드 및 배포 상태 확인 표시>

• 초록색 체크(✅) → 성공(Successful) : Github Actions나 연결된 CI/CD(예:Vercel)에서 빌드와 테스트가 정상적으로 통과됐음을 의미한다.
• 빨간색 X(❌) → 실패(Failed)
• 노란색 점(🟡) → 진행 중(In progress)

 

개발자 A가 feat/devA 브랜치를 develop 브랜치에 pull request와 merge를 진행하면 vercel의 Domains에서 Preview URL(두 번째 URL)을 사용할 수 있다.

develop 브랜치로 pr mrege

 

<주의할 점>

• 단, Vercel 프로젝트 설정에서 Production Branch가 main이라면 develop은 Production URL에 반영되지 않고 Preview URL로만 확인됩니다.
• 만약 develop을 Production Branch로 설정해 둔 경우라면 머지 시 첫 번째 URL(Production domain)에 반영됩니다.

 

Vercel을 사용하면 CI/CD를 경험할 수 있다.

커밋을 하자마자 터미널에서 따로 빌드를 하고 배포하는 과정을 복잡하게 거치는 것이 아닌 코드를 올려둔 깃허브를 Vercel을 연동해 두면 Vercel이 우리 프로젝트를 감지하고 있으면서 새로운 커밋이 발생하는 순간 커밋 별로 url을 만들어주고 브랜치 별로 url을 만들어 즉각적으로 확인이 가능하다.

 

---

잘못된 정보는 댓글에 남겨주시면 감사하겠습니다!😊

댓글과 좋아요는 큰 힘이 됩니다!

 

[ 참고자료 ]

https://vercel.com/geist/brands#vercel

Geist