vercel - environment variable 용량 4kb 이상일 때 해결 방법

프로젝트를 git에 올리거나 하는 경우, 보안상 외부에 노출되면 api key와 같은 private 값이 있을 수 있다. 이 경우 보통 .env 파일에 담아서 process.env.XXX 과 같이 사용하게 된다.

만약 이 프로젝트를 vercel 이라는 곳에 올려두고 우리가 설정해놓은 환경인 로컬처럼, build 스크립트를 돌리고(yarn build) 자동으로 배포를 해주는 시스템에 올려놓는 경우, 환경변수를 외부에 노출할 수 없다면 어떻게 해야할까?

vercel은 이에 대비해서 프로젝트 > setting > environment-variables 탭에 가면 환경 변수를 하나씩 추가할 수 있도록 해놨다.

필요한 변수들을 하나, 둘씩 추가하다보면 여러개를 추가하게 될 수 있는데 이때 우리는 이런 에러를 마주할 수 있다.

Error:The total size of all Environment Variables (5.54KB) exceeds 4KB

한마디로, 환경변수의 값이 4kb를 넘기면 안된다는 것이다.

특히나 firebase를 사용해서 많은 config를 추가해야하는 경우 필히 이 에러 메시지를 보게될 것 같다.

해결방법

firebase 설정파일을 예로 들어 설명해보겠다.

const config = {
  apiKey: "xxx",
  authDomain: "xxx",
  projectId: "xxxx",
  storageBucket: "xxxx",
  messagingSenderId: "xxxxxx",
  appId: "xxx",
  measurementId: "xxxx"
}

위 처럼 객체 형태의 설정파일이 있는데,

1. 객체를 문자열화해서 한개의 환경변수에 넣어놓는다.

   이 때, 위처럼 key 값에 따옴표가 생략된 형태가 아닌 JSON형식을 지켜야한다.

   • 환경변수 저장 모습

     NEXT_PUBLIC_FIREBASE_CONFIG="{"apiKey": "xxxx", ...}"

2. 사용하는 곳에 문자열을 객체로 바꿔서 사용한다.

   app = initializeApp(
       JSON.parse(process.env.NEXT_PUBLIC_FIREBASE_CONFIG as string)
     );

이렇게 해서 로컬에서 프로젝트를 실행시킨 후, vercel에 환경변수로 등록해서 배포한 후 테스트해보면 완료!