Next CI/CD (with Vercel)

🌐CI/CD 배포 정리

배포 방식: GitHub Actions + Vercel

Framework: Next.js

목적: develop → Preview 배포 / main → Production 배포 자동화

 

배포 개요

af-fe는 프론트엔드 Next.js 프로젝트로 Vercel + GitHub Actions를 이용한 자동 배포 파이프라인(CI/CD)을 구축함.

• develop 브랜치 → Preview 환경 자동 배포
• main 브랜치 → Production(실제 서비스) 자동 배포
• pnpm 패키지 매니저 + Node.js 20 버전 사용
• 별도의 로컬 설치 없이 GitHub Actions에서 자동 빌드·배포

 

⚙️ Vercel 세팅 절차

▷ 프로젝트 생성

1. https://vercel.com 접속
2. Import Project → GitHub 선택
3. 해당 프론트엔드 프로젝트 레포지토리 선택
4. Framework Preset 자동 감지: Next.js → 
   1. Project Name 지정 (여기서는 af-fe로 설정)
   2. Framework Preset → Next.js
   3. Root Directory → 그대로 ./
   4. Build and Output Settings
      • Build Command → pnpm build (pnpm run build도 가능)
      • Install Command → pnpm install
      • Output Directory → .next(설정 안 해줘도 넥스트 기본 빌드 결과 폴더(.next)를 자동으로 사용하긴 함.)
5. “Deploy” 클릭
6. ➡️ 첫 배포가 완료되면 https://af-fe.vercel.app 도메인 자동 발급됨. (production은 main에서만 가능하게 해놨기 때문에 main에서 배포를 완료하면 https://af-fe.vercel.app 이 도메인에 뜨도록 설정. develop은 preview로 배포.)

▷ 프로젝트 ID 확인 (VERCEL_PROJECT_ID)

1. Vercel 대시보드 → af-fe 프로젝트 클릭
2. 상단 탭에서 Settings → General 이동
3. 스크롤을 내리면 아래 정보 확인 가능
4. # Project ID prj_MUIhFfrtrOQrCQAOmSPJSodo7n8l

▷  ORG ID / TOKEN 생성

VERCEL_ORG_ID

• https://vercel.com/account/settings → General
• “Team ID” 또는 “User ID” 또는 “Resource Group ID(rg~~로 시작)” 확인

  rgXXXXX2Xq35NtyQWkHfF6m9D1RkXXXXX
  

  이 값이 VERCEL_ORG_ID

VERCEL_TOKEN

1. https://vercel.com/account/tokens 이동
2. “Generate Token” 클릭
3. 이름은 예: github-ci
4. Expiration: Never 선택
5. 생성된 토큰 예시 👇이 값을 VERCEL_TOKEN으로 사용

vyqAzp05de5E...

→ 생성 시 단 한 번만 표시되므로 꼭 복사해두기

 

 

🔑 GitHub Secrets 등록

GitHub → Settings → Secrets → Actions 에서 다음 3개 추가

Name	Value	설명
VERCEL_TOKEN	vyqxxxxxxxxx	Vercel Personal Token
VERCEL_ORG_ID	rgxxxxxxxxx	Resource Group (팀/계정 ID)
VERCEL_PROJECT_ID	prj_xxxxxxxxx	Vercel 프로젝트 ID

 

 

🧰 GitHub Actions 설정

• 프로젝트 루트(.github/workflows/)에 ci.yml 파일 생성 후 아래 내용 추가

name: Next.js CI/CD with Vercel

on:
  push:
    branches: [develop, main]

jobs:
  build-and-deploy:
    runs-on: ubuntu-22.04

    steps:
      - uses: actions/checkout@v4

      - name: Install pnpm
        uses: pnpm/action-setup@v4
        with:
          version: 10

      - name: Use Node.js
        uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: 'pnpm'
          cache-dependency-path: pnpm-lock.yaml

      - name: Install dependencies
        run: pnpm install

      - name: Build Next.js app
        run: pnpm build

      - name: Deploy to Vercel
        uses: amondnet/vercel-action@v25
        with:
          vercel-token: ${{ secrets.VERCEL_TOKEN }}
          vercel-org-id: ${{ secrets.VERCEL_ORG_ID }}
          vercel-project-id: ${{ secrets.VERCEL_PROJECT_ID }}
          working-directory: .
          vercel-args: ${{ github.ref == 'refs/heads/main' && '--prod' || '' }}

 

 

 

브랜치별 배포 구분

브랜치 배포 타입 배포 주소 설명

브랜치	배포 타입	배포 주소	설명
develop	Preview	https://af-fe-git-develop-username.vercel.app	테스트/QA용
main	Production	https://af-fe.vercel.app	시연용

 

조건문(vercel-args)

vercel-args: ${{ github.ref == 'refs/heads/main' && '--prod' || '' }}

→ main일 때만 --prod 옵션이 추가되어 Production 배포로 전환됨.

 

 

예시 워크플로우

1. 임의의 브랜치에서 작업 후 develop 브랜치로 병합
2. git push → Actions 자동 빌드/배포 → Preview 링크 생성
3. 팀원 테스트 완료
4. develop → main PR 병합
5. GitHub Actions 자동 실행 → Vercel --prod 배포
6. https://af-fe.vercel.app 주소로 최신 버전 반영 완료