🚀 Vercel 배포 트러블슈팅 1(Troubleshooting)

MBTI Test 프로젝트를 배포하면서 겪었던 다양한 문제들을 해결한 과정을 정리했습니다.
처음에는 기본적인 배포 과정을 따라갔지만, 여러 오류를 만났고, 이를 해결하면서 배포를 안정화시켰습니다.

---

🟢 Vercel 배포 문제 & 해결 과정

1️⃣ 초기 배포 시도 (vercel build 실패)

⚠️ 문제:

[vite]: Rollup failed to resolve import "react-router-dom"

• vite build 과정에서 react-router-dom을 찾을 수 없다는 오류 발생
• 하지만 package.json에는 분명히 react-router-dom이 존재

🔍 원인 분석:

• node_modules가 제대로 설치되지 않았을 가능성이 있음
• react-router-dom 버전이 너무 최신이라 vite에서 정상적으로 처리되지 않을 수도 있음
• Vercel에서 캐시가 꼬여 있어서 이전 상태가 남아 있을 수도 있음

✅ 해결 방법:
1️⃣ 패키지 재설치

rm -rf node_modules package-lock.json yarn.lock
yarn install

2️⃣ react-router-dom을 안정적인 버전(6.4.0)으로 다운그레이드

yarn add react-router-dom@6.4.0

3️⃣ Vercel 빌드 캐시 삭제 후 다시 배포

vercel --force

➡️ 이렇게 적용한 후, vercel build가 정상적으로 진행됨

---

2️⃣ vite build 시 Tailwind CSS Nesting 오류

⚠️ 문제:

[vite:css][postcss] Nested CSS was detected, but CSS nesting has not been configured correctly.

• Tailwind CSS의 Nesting이 설정되지 않음

✅ 해결 방법:
1️⃣ tailwind.config.js에 Nesting 설정 추가

module.exports = {
  plugins: [require('tailwindcss/nesting')],
};

2️⃣ PostCSS에도 Nesting 지원 추가 (postcss.config.js)

module.exports = {
  plugins: {
    'postcss-nested': {},
    tailwindcss: {},
    autoprefixer: {},
  },
};

➡️ 다시 vercel build 실행 → 정상적으로 빌드됨 🎉

---

3️⃣ vercel.json 미설정 문제

⚠️ 문제:

• Vercel에서 vite.config.js를 제대로 인식하지 못해 배포 후 404 오류 발생
• index.html을 찾을 수 없다는 오류 발생

✅ 해결 방법:
1️⃣ vercel.json 파일을 생성하고 vite 설정 추가

{
  "build": {
    "env": {
      "NODE_ENV": "production"
    },
    "command": "vite build",
    "outputDirectory": "dist"
  },
  "rewrites": [
    { "source": "/(.*)", "destination": "/index.html" }
  ]
}

2️⃣ 다시 배포

vercel deploy

➡️ 배포 후 정상적으로 라우팅됨! ✅

---

🎯 최종 정리

✅ Vercel 배포 트러블슈팅

1. 패키지 캐시 삭제 후 재설치 (yarn install)
2. react-router-dom 버전 다운그레이드 (6.4.0)
3. Tailwind CSS Nesting 설정 (tailwind.config.js, postcss.config.js 수정)
4. vercel.json 설정 추가 (빌드 명령어 & 라우팅 설정)
5. vercel --force로 캐시 없이 배포 진행