vercel 배포 최신 커밋 반영 안될 때

문제의 발단

현재(24년 8월) 기준 리액트 공식문서의 CNA로 설치했고, TailwindCSS를 사용자가 클릭하는 상태에 따라 조건부 적용시키는 중이었다. 어느 순간 빌드, 푸시를 해도 배포 사이트에 적용이 되지 않다.
이에 검색 및 시도한 방법을 기록한다.

1. CSS 캐싱 문제

사용하는 브라우저에 캐시가 남아있어서 새로운 부분이 적용되지 않는 경우.
해결책은 크롬기준 Ctrl+ Shift + R을 누른다.
그럼 '강제 새로고침' 또는 '강력 새로고침' 이라고 하던데 캐시까지 싹 다 새로 로딩한다.

2. Tailwind CSS Purge(1)

// tailwind.config.js

module.exports = {
  content: [
    './app/src/**/*.{js,ts,jsx,tsx}',  // /app/src 경로 내 모든 파일 및 폴더대상으로
    './components/**/*.{js,ts,jsx,tsx}',  // components 폴더도 포함할 경우
  ],
}

• Tailwind의 purge(또는 content 설정)는 배포 시 사용되지 않는 CSS를 제거한다.
• **/*는 재귀적으로 모든 하위 폴더 및 파일을 탐색하여 포함한다.
• 이렇게 하면 Tailwind가 사용되지 않는 CSS를 제거할 때, 해당 폴더 내의 모든 JSX/TSX 파일에 필요한 스타일은 유지된다.

3. Tailwind CSS Purge(2)

// tailwind.config.js
module.exports = {
  content: [
    './src/app/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
  ],
  safelist: [
    'bg-gray-200',
    'bg-gray-300',
    'bg-gray-400',
    'border-gray-600',
  ],
}

• Tailwind의 purge(또는 content 설정)는 배포 시 사용되지 않는 CSS를 제거한다.
• 이 때 동적으로 적용되는 클래스가 제거될 수 있다.
• safelist에 동적 클래스를 명시적으로 추가한다.

4. Vercel 의 빌드 캐시 문제

• Vercel의 Deployment 화면
• Useexisting Build Cache를 체크 해제 하고 Redeploy한다.

5. Vercel 의 커밋 참조 오류

왼쪽 커밋 이력과 오른쪽 Vercel 참고 커밋

나는 Vercel에서 최근 커밋이 아닌 이전 커밋이 배포되는 문제였다.
깃헙의 커밋 이력과 Deployment의 Soucre에서 참조된 커밋을 확인해보니 가장 최근 커밋은 4ae63b 였으나 왜인지 c3ce518이 참조되고 있었고, 새로 커밋 푸시를 하면 이 c3ce518 커밋을 참조해서 바로 재배포가 이뤄지고 있었다.

• Vercel의 자동 배포가 제대로 동작하지 않거나 브랜치 동기화에 문제가 발생했을 때 등 다양한 원인이 있을 수 있다고 한다.

해결 방법

• 해당 프로젝트의 Deployment 탭을 누른다.
• 최근 커밋 기록의 데이터로 Instatnt Rollback 시킨다.
• 앞서 기록한 4번 재배포를 진행한다.

참고자료

vercel 캐시문제로 인한 프로젝트 재배포 관련 내용 - 공식문서

롤백 관련 내용 - 공식문서