Next.js로 개인 포트폴리오 사이트를 간단하게 제작해본 후 vercel로 배포를 하던 중 오류가 발생하여 배포를 거절당했는데 원인을 찾아 헤맸기 때문에 짧게 정리해보고자 한다.
트러블
우선 발생한 오류는 아래 이미지와 같다
프로젝트 페이지에 넣은 이미지 4장의 Module not found 라는 에러가 발생하였다.
우선 build로 실행할때는 문제없이 작동하였는데 배포시에 발생한 오류였고 VScode상에서는 이미지도 잘 불러와졌기 때문에 이유가 뭔지 감을 잡기 어려웠다.
빌드는 정상적으로 작동
슈팅
구글링 결과 비슷한 오류를 겪은 블로그를 찾았다
핵심부터 말하자면 vercel은 폴더나 파일명의 대소문자를 구분하는데 이미지 폴더나 파일명을 수정하는 과정에서 git push를 하였는데 git에는 반영이 되지 않았던 것이다.
git은 대소문자를 구분할 수 없는 특징이 있다는 것을 알게되었다.
처음 소문자로 작성 후 push → 그 이후에 대문자로 변경하고 push → 소문자가 대문자로 바뀌지 않음!
그렇기 때문에 해당 코드를 입력하여 git이 대소문자를 구분할 수 있도록 해주어야 한다.
이전 기록 캐시도 제거해주어야 또 같은 오류가 발생하지 않을 수 있다.
// git이 대소문자를 구분할 수 있게
> git config core.ignorecase false
// 캐시 제거하기
> git rm -r --cached .
> git add .
> git commit -m "commit message"
> git push그리고 추가로 한글로 저장했던 이미지 파일명도 영어로 변경해주었다(이게 원인인가 하고 바꿔준...)
그랬더니 성공적으로 배포가 완료되었다!!
회고
대소문자로 인해 발생 한 배포 오류는 처음 겪어봤기 때문에 새롭게 알게되었다. 추후에 같은 오류가 발생하지 않도록 파일명, 폴더구조 등 처음부터 확실하게 기획하고 진행하면 가장 좋을 것 같다.
