[Next.js] 넥스트 프로젝트 vercel에 배포하면서 환경 변수에 대한 고찰

Next.js에서의 환경 변수 

raect.js 로 개발했을 때 환경 변수를 추가하기 위해서 .env 로 시작하는 파일을 만들어 선언하고 그 파일 안에 특정 네이밍 규칙(prefix)을 통해 환경 변수를 선언해서 사용했다. 

 

Next도 비슷하게 동작한다. 하지만 Next.js는 서버 사이드에서 동작하는 특징을 가지기 때문에 이를 고려하지 않고 아무런 네이밍을 통해 환경 변수를 선언하면 반응하지 않는다. 

 

Next.js에서 환경 변수를 설정하고 배포할 때에는 다음과 같은 주의사항이 있다.

1. 환경 변수의 이름 
   1. 환경 변수의 이름은 `NEXT_PUBLIC_` 접두어(prefix)를 붙여야 클라이언트 측에서 접근할 수 있다. 이 접두어가 붙은 환경 변수는 자동으로 노출이되며, 다른 변수들은 서버 측에서만 접근이 가능하다.
   2. NEXT_PUBLIC_ 접두어가 붙은 환경 변수는 클라이언트 측에서도 접근이 가능하기 때문에, 보안이 민감한 정보를 저장하면 안된다. 서버 측과 클라이언트 측에서의 접근 권한이 다르기 때문에 보안이 민감한 정보는 prefix없이 저장한다. 
2. .env 파일 보안
   1. 이 파일에 저장된 정보는 서버에서 엑세스 가능하기 때문에, 보안 이슈가 발생할 수 있다. git 버전 관리 시스템에서 제외 시켜야 한다. 
3. 배포 전 빌드 
   1. 환경 변수를 설정하고 배포하기 전에는 빌드를해야한다. `next build` 명령어를 사용하여 빌드하면, 설정된 환경 변수가 빌드에 반영된다. 

 

Q. 넥스트 프로젝트를 빌드할 때 .env 파일도 같이 빌드해서 올라가는가?

: 빌드된 프로덕션 코드에 포함되지 않도록 자동으로 설정된다. next.config.js 파일에서 env옵션을 사용해 환경 변수를 설정할 수 있고 이를 통해 빌드된 프로덕션 코드에서 참조가 가능한 환경 변수를 설정할 수는 있다. 

 

Q. 빌드 시에 .env 파일은 제외되는데 어떻게 prefix가 붙은 환경 변수가 클라이언트에서 노출이되나?

: process.env 객체의 속성으로 클라이언트 측 자바스크립트 코드에서 접근 가능하기 때문이다. 고로 민감한 정보를 포함한 환경 변수는 서버 측에서 설정하도록 하는 것이 보안에 더욱 안전하다. 

prefix 가 붙은 환경 변수는 빌드 시점에서 해당 환경 변수의 값을 클라이언트 코드에 하드코딩하게 되어있기 떄문이다. 

 

Q. 그러면 클라이언트에서 어떻게 접근하나? 

: 브라우저 개발자 도구에서 콘솔에 process.env 를 입력하고 엔터를 누르면 환경 변수 값이 포함된 객체가 출력된다. 

 

나는 vercel로 프로젝트를 배포할 때, dotenv 라이브러리를 활용했으며 vercel에서 배포를 할 때, 실제로 .env에 입력된 키=값 을 넘겨주지 않으니 서드파티 api에 접근할 수 없어 데이터가 undefined 로 뜨는 배포 에러를 겪었다. 

처음에는 prerender 시, 데이터 값이 제대로 넘어오지 않는다고 생각하여 getStaticProps에 대해서 다시 docs를 공부했으나 api call을 getStaticProps에서 하는 거 자체는 문제가 되지 않았고 해당 api 주소에 들어가야 했던 API KEY( 환경변수 )를 vercel에 알려주지 않아서 생기는 배포 오류였다. 외에도 monorepo관련 이슈(next/babel을 참조하지 못하는 문제;)가 있었으나 이 부분에 대해서는 좀 더 공부를 해야 봐야할 거 같다.  

 

 

하단에는 읽어보면 좋을 거 같은 레퍼런스를 남겨둡니다!

https://han-py.tistory.com/441

[react] 실무 개발 환경/배포 환경 설정(.env)