[LAB-4] Netlify 배포 문제 (Git 대소문자 구분하지 않는 문제)

[ssw6750]

질문 작성자

서석원

문제 상황

npm run build 시 스크립트에 웹팩 빌드와 커스텀 빌드를 동시에 수행시킬 수 있게 구성하거나 혹은 타 배포 플랫폼인 netlify이용해서 배포를 시도하는 방식이 있다고 예전에 야무썜께서 배포 관련해서 이슈를 언급했을떄 말씀 하셨습니다.
그래서 netlify로 배포를 시도해봤는데 실패했습니다.
야무썜께서 그떄 저희 팀원들한테 위의 방법들을 시도해보고 안되면 추가 기간동안에 빌드 파일을 들고 깃헙 이슈를 올리면 로직을 짜는데 도움을 주시겠다고 말씀하셔서 올립니다.

프로젝트 저장소 URL

develop 브랜치 입니다.

환경 정보

• 운영체제 정보 (예: Windows, macOS)
• Node.js 정보 (예: v16.14.0)
• 라이브러리 정보 (예: React v18.0.2)

[yamoo9]

문제 분석

Netlify 배포에서 오류가 발생한 이유는 Netlify는 배포 시 대소문자를 구분하는데 반해,
Git은 대소문자를 구분하지 못해 발생한 문제로 확인됩니다.

이러한 문제가 발생한 이유는 팀 프로젝트 구성원 중 컨벤션을 제대로 지키지 않았기 때문입니다.
파일 이름을 컨벤션 대로 따르지 않고, 임의로 작성한 경우 Git은 이를 구분하지 않고 관리합니다.

결과적으로 Netlify 배포 과정에서 오류를 발생 시킵니다. 😳
Netlify는 Linux 기반 Ubuntu를 사용 하므로 파일 이름 대문자 또는 소문자인지에 따라 오류가 발생하는 것입니다. (참고)

The problem was incorrect case for components. It works on Windows and macOS (that’s why it build successfully on my Windows laptop and you might be using either of the two), but, Netlify uses Ubuntu which is Linux based and Linux can’t work with the mixed cases. So, all your components are in the folders which start with a small case, while the pages start with a capital case. While importing the components, you need to maintain the case, but, instead, you were importing all the components with the starting letter capital.

예를 들어 아래 표시한 부분이 해당 오류입니다.
모듈을 찾을 수 없다고 말하는 것은 저 파일 이름이 이전과 다르게 변경 되었기 때문입니다.

파일 이름의 대소문자가 변경 되면 Netlify 배포 과정에서 오류를 출력합니다. 😱

문제 해결

아래 화면은 해당 문제를 해결한 후 정상적으로 배포 되었음을 보여 줍니다.

문제 해결 방법은 Netfliy 배포 과정에서 출력된 문제의 파일을 모두 검토해 이름을 변경해야 합니다.
그 전에 Git 설정을 아래와 같이 변경해 대소문자를 구분하도록 설정합니다.

git config core.ignorecase false

Git 커밋 과정에서 캐시 오류를 출력하는 경우 아래 명령을 입력 실행합니다.

git rm -r --cached .
git add . && git commit -m "Git 캐시 삭제"

Netfliy 배포 과정에서 출력된 문제 파일의 이름을 변경합니다.
Git mv 명령을 사용해 이름을 변경하면 배포 과정에서 오류가 발생하지 않습니다.

git mv Productinquiry.jsx temporary-name
git mv temporary-name Productinquiry.jsx

다른 방법은 문제 파일을 삭제하고, 커밋 한 후 다시 생성하는 것입니다.

이러한 경험을 통해 컨벤션을 지키는 것이 얼마나 중요한 지 깨닫는 시간이 되길 바랍니다. 🤔

가이드 파일

아래 첨부된 자료는 Netlify 배포에 성공한 프로젝트 압축 파일입니다.

project-build-test-by-yamoo9.zip

레퍼런스

• Netlify app builds locally but fails on deploy (case sensitivity)
• Git은 대소문자를 구분하지 않는다
• 깃이 파일명 대소문자 변경을 감지하지 못할 때