얼마 전 프로젝트의 배포 테스트를 위해 Netlify로 테스트를 하던 도중 위와 같은 에러가 발생했습니다.
firebase를 이용하고 있어 API Key와 같은 config 값의 노출을 막기 위해 Netlify의 환경 변수로 등록해놨는데 projectId 값을 찾지 못해 초기화가 안된다는 내용이었습니다.
과거 프로젝트들에서 CRA를 이용해 리액트 환경을 구성해오긴 했지만 dotenv를 사용했을 때 별다른 트러블이 없었고 정상적으로 잘 작동했었기 때문에 변수명에 오타가 있을수도 있어 로컬의 .env의 변수명을 그대로 긁어오기도 하고
환경변수가 반영이 안됬을 수도 있어서 재 배포를 해보는 등 여러 작업을 했지만 실패하였습니다.
원인을 찾던 중 우연히 Netlify의 로그를 살펴보다가 env가 로드 되지 않는다는 경고를 발견했고 dotenv의 문제였구나 라는것을 깨닫고 해결방법을 찾아보기 시작했습니다.
그러던 중 stackoverflow에서 저와 비슷한 증상을 겪는 질문을 찾았습니다.
답변을 쭉 읽어보던 중 dotenv-webpack설정 시 systemvars 라는 속성값을 true로 선언해야 시스템 환경 변수를 가져올 수 있다는 내용이었습니다.
Netlify UI의 설정에서 등록하는 환경 변수는 env 파일이 아닌 빌드 과정에서 등록되는 시스템 환경 변수이기 때문에 systemvars 속성을 true로 설정해주어야 했습니다.
그래서 해당 설정 내용을 반영한 뒤 재 배포하자 정상적으로 잘 작동했습니다.
하지만 저 Failed to load ./.env. 라는 경고는 사라지지 않았고 알고보니 webpack-dotenv의 path속성 값이 기본적으로 루트의 .env파일로 잡혀있기 때문에 env 파일이 없을 경우 무조건 발생하는 경고였습니다.
로컬에서 데브서버를 이용해 테스트 할 때는 .env 파일이 있었기 때문에 빌드 과정에서 해당 경고가 뜨지 않았던것이었고
.env 파일을 삭제하고 데브 서버를 실행해보았더니 로컬에서도 똑같은 경고가 발생했습니다.
경고를 띄우지 않도록 하는 silent라는 속성이 있긴 하지만 이 속성을 활성화해버리면 다른 이유로 인한 에러 발생시에 원인을 파악하기 어렵기 때문에 실행에는 문제가 없어 놔두기로 하였습니다.
혹시 저 경고만을 지우는 방법을 알고 계시면 답변 부탁드립니다. :)
