[CI/CD] GitHub Actions + Vercel CI/CD 오류 해결기

Node.js 버전 문제로 Vercel 배포 실패?!? 

평소와 같이 코드를 수정하고 메인 브랜치에 커밋 푸시했는데, 배포가 실패했다는 에러가..😱
갑자기 요런 에러가 뜨면서 deploy가 안되는 이슈 발생!

 

 

요게 무슨 뜻이냐면?

• Node.js 18.x는 지원 종료(EOL) 되어서 더 이상 Vercel에서 빌드할 수 없습니다.
• 해결 방법은 Node.js 22.x로 업그레이드 하는 것뿐입니다.

원인을 확인해보니, 지금 프로젝트는 Node.js 18 환경에서 빌드되고 있었고, Vercel 정책상 18 버전은 더 이상 지원하지 않으므로 빌드가 중단된 것이었습니다.

 

 

✅ 수정 방법 (so simple 주의)

1️⃣ Vercel 프로젝트 설정

• Vercel 대시보드 → Project Settings → Node.js Version: 22.x 로 변경

👉 이렇게 하면 Vercel 서버에서 항상 Node.js 22 환경으로 빌드됩니다.

2️⃣ GitHub Actions 환경도 맞춰주기

• 현재 워크플로우는 Node.js 18 고정 → Vercel과 동일하게 22로 변경
• actions/setup-node를 v4로 업데이트하면 안정성↑

3️⃣ package.json에 Node 버전 명시 (선택)

{ 
	"engines": { 
    	    "node": "22.x" 
    } 
}

👉 이렇게 하면 팀원 로컬 환경에서도 Node.js 22 사용을 권장할 수 있습니다.

 

 

📄 기존 CI/CD Workflow 정리

1. Pull Request / Branch Push → CI 실행
   • Lint / Test / Build 검증
   • Node.js 22 + Yarn 환경 사용
2. Main Branch Push → CD 실행
   • vercel pull → 환경 변수 불러오기
   • vercel build --prod → Actions runner에서 빌드
   • vercel deploy --prebuilt --prod → 빌드 결과물 배포

 

 

🔧 GitHub Actions 수정(Node.js 22 + Yarn 캐시 추가)

ci.yml 기존 ver.

...
- uses: actions/checkout@v2
- uses: actions/setup-node@v2
  with:
    node-version: '18'
- run: yarn install --frozen-lockfile
- run: yarn build
...

 

ci.yml 수정 ver.

name: CI
on:
  pull_request:
    branches:
      - main
jobs:
  lint:
    name: Lint
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 22
          cache: 'yarn'
      - run: yarn install --frozen-lockfile
      - run: yarn lint

  build:
    name: Build
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 22
          cache: 'yarn'
      - run: yarn install --frozen-lockfile
      - run: yarn build
        env:
          NEXT_PUBLIC_BASE_URL: ${{ secrets.NEXT_PUBLIC_BASE_URL }}

  test:
    name: Test
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 22
          cache: 'yarn'
      - run: yarn install --frozen-lockfile
      - run: yarn test

 

cd.yml 기존 ver.

...
Deploy-Production: 
    runs-on: ubuntu-latest 
    steps: 
      - uses: actions/checkout@v2 
...

 

cd.yml 수정 ver.

name: CD(Vercel Production Deployment)

env:
  VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
  VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}
on:
  push:
    branches:
      - main
jobs:
  Deploy-Production:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4

      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: 22
          cache: 'yarn'

      - name: Install Vercel CLI
        run: npm install --global vercel@latest

      - name: Pull Vercel Environment Information
        run: vercel pull --yes --environment=production --token=${{ secrets.VERCEL_TOKEN }}

      - name: Build Project Artifacts
        run: vercel build --prod --token=${{ secrets.VERCEL_TOKEN }}

      - name: Deploy Project Artifacts to Vercel
        run: vercel deploy --prebuilt --prod --token=${{ secrets.VERCEL_TOKEN }}

 

📌 변경 포인트

• actions/checkout → v4
• actions/setup-node → v4
• Node.js 18 → 22
• cache: 'yarn' 추가 → 의존성 설치 속도 ↑, 빌드 속도 최적화

 

 

 

 

💡이슈 해결!

CI/CD 정상작동

이번 경험을 통해 배운 점은 Vercel에서 지원되는 Node.js 버전 확인은 필수다!

 

모쪼록 별 일 아니지만, CI/CD 초보로서 처음 겪은 이슈라 공유드리고자 글을 작성했습니다.
다른 분들도 혹시나 비슷한 상황을 만나신다면 참고가 되길 바랍니다. 😎