프로젝트를 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"
}
위 처럼 객체 형태의 설정파일이 있는데,
객체를 문자열화해서 한개의 환경변수에 넣어놓는다.
이 때, 위처럼 key 값에 따옴표가 생략된 형태가 아닌 JSON형식을 지켜야한다.
NEXT_PUBLIC_FIREBASE_CONFIG="{"apiKey": "xxxx", ...}"
사용하는 곳에 문자열을 객체로 바꿔서 사용한다.
app = initializeApp(
JSON.parse(process.env.NEXT_PUBLIC_FIREBASE_CONFIG as string)
);
이렇게 해서 로컬에서 프로젝트를 실행시킨 후, vercel에 환경변수로 등록해서 배포한 후 테스트해보면 완료!