개발자
류준열

쿠버네티스에서 주입하는 환경변수를 Next에서 받지 못하는 버그

우리 회사는 폐쇄망에서 이용하는 제품을 만들다보니 외부 클라우드를 사용하지 않고 도커로 직접 인프라를 구성하고 있다.

production, develop 환경에 따른 api url을 쿠버네티스에서 환경변수로 각각 등록하였는데 Next.js에서 환경변수를 읽지 못하여 api url이 undefined가 되는 이슈가 있었다.

이유는 Next.js에서 만들어지는 환경변수는 빌드타임에 만들어지고 쿠버네티스에서 주입하는 환경변수는 컨테이너 이미지가 빌드된 후, 즉 런타임에 주입되기 때문이다.

NEXT_PUBLIC_

Next 공식문서에서 브라우저에서 사용할 환경변수에는 NEXT_PUBLIC_ 을 붙히라고 한다. 이건 되어 있었다.

next-runtime-env

레딧의 15kol 형님의 말씀을 듣고 런타임에서 주입된 환경변수를 이용하는 방식도 사용해봤다.

원리는 window 객체안에서 환경변수를 관리하는 방식인데 특정 라우팅에서 변조되는 이슈가 있어서 런타임 환경변수를 채택하지 않았다.

브라우저 url로 api 주소 구분

문제를 해결하지 못하는 상황에서 차선책으로 브라우저 url을 따서 production 환경과 develop 환경에서의 api url을 구분하였다.

const API_URL = window.location.href === 'dev.pma.com' ? 'dev.api.com' : 'prod.api.com'

하지만 위의 방법을 사용하면 서버컴포넌트에서 api call을 쏠 수 없으므로 채택하지 않았다.

쿠버네티스에서는 환경변수를 주입하지 않고, ci가 돌아가는 젠킨스에서 빌드전에 환경변수를 주입하였다.

이 버그 해결의 핵심은 build 전에 환경변수를 등록하는 것이다.

모든 버그가 그렇듯 해결책이 허무하긴 한데, 해결책을 찾기까지 참 오래걸렸다!