개발자
류준열

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

우리 회사는 외부 클라우드를 사용하지 않고 직접 인프라를 구성하고 있다.

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

이유는 Next.js에서 만들어지는 환경변수는 빌드타임에 만들어지고 쿠버네티스에서 주입하는 환경변수는 런타임에 주입되기 때문이다.

쿠버네티스에서 환경변수가 주입될때는 이미 늦다.

NEXT_PUBLIC_

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

next-runtime-env

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

원리는 window 객체안에서 환경변수를 관리하는 방식인데 특정 라우팅에서 변조되는 이슈가 있어서 선택하지 않았다. (나중에 알게 된건데 특정 라우팅에서 변조되었던 이유는 SSR에서 localStorage에 접근했기 때문이다. SSR에서 window에 접근 할 수 없다는 에러가 뜨면서 window 객체를 이용하는 next-runtime-env와 충돌이 일어난것 같다. 이건 useEffect에 localStorage 접근하는 코드를 넣어서 해결했다.)

+몇달 뒤 next-runtime-env를 파헤친 글

브라우저 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 전 환경변수 등록 여부이다.

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