React와 Nextjs의 환경변수 설정에 관련한 내용을 정리해보려 한다.
React와 Nextjs에서 환경변수 사용하는데 있어서 일부 차이가 있어 그 부분까지 짚고 넘어가려 한다.
환경 변수(Environment Variable)의 사용
환경 변수를 사용하는 여러 이유가 있겠지만 크게 두 가지 이유로 많이 사용하는 것 같다.
- 실행 환경에 따라 다른 값을 할당하기 위해
- 소스코드에 포함되지 않길 원하는 값을 할당하기 위해
이를 위해 Node에서는 주로 dotenv라는 패키지를 많이 이용한다. 그렇지만 React와 Nextjs에서는 따로 dotenv를 설치할 필요없이 바로 환경 변수를 설정할 수 있다.
환경변수 할당
프로젝트의 루트 디렉토리에 .env 파일을 생성해 key = value 의 형태로 작성하는 것으로 간단히 환경변수를 설정할 수 있다.
.env 파일에 작성할 때 key, 등호, value값 사이에 들어가는 공백의 유무와 value값을 감싸는 따옴표에 관계없이 변수 설정이 가능하다. 하지만 환경변수의 값으로 공백이 있는 경우에는 반드시 큰 따옴표 또는 작은 따옴표로 감싸서 사용해야 한다.
환경변수는 string | undefined로 할당되게 된다. 환경변수의 값으로 1, true를 할당할 수는 있지만 이 값들은 모두 문자열로 할당된다.
// 모두 동일
EXAMPLE_KEY=EXAMPLE_VALUE
EXAMPLE_KEY='EXAMPLE_VALUE'
EXAMPLE_KEY="EXAMPLE_VALUE"
EXAMPLE_KEY = EXAMPLE_VALUE
EXAMPLE_KEY = 'EXAMPLE_VALUE'
EXAMPLE_KEY = "EXAMPLE_VALUE"여기서 React와 Nextjs에서 key값에 작성에 규칙이 있다.
환경변수의 key값은 React는 REACT_APP_, Nextjs는 NEXT_PUBLIC_ 으로 시작해야 한다. 따라서 실제로는 아래와 같이 사용해야 한다.
REACT_APP_KEY = 'react value'
NEXT_PUBLIC_KEY = 'nextjs value'환경변수는 기본적으로 node 환경에서만 동작하지만, 브라우저 환경에서도 사용 가능하도록 하기 위해 위와 같은 접두사를 붙이는 것이다. 따라서, 브라우저 환경이 아닌 Nextjs의 SSR, SSG와 같은 Server Side에서 환경 변수를 사용할 때에는 접두사를 붙이지 않고도 사용이 가능하다.
환경변수 사용
설정한 환경 변수를 사용하는 방법은 process.env.{환경변수 key값}이다.
const password = process.env.REACT_APP_PASSWORD;실행 환경에 따른 환경 변수 분리
우선, React와 Nextjs는 기본적으로 환경 변수 NODE_ENV에 실행 환경이 할당된다. 실행 환경으로는 개발 환경, 배포 환경, 테스트 환경이 존재한다.
console.log(process.env.NODE_ENV) // 'development'
console.log(process.env.NODE_ENV) // 'production'
console.log(process.env.NODE_ENV) // 'test'이 실행 환경은 app의 실행 명령어에 의해 결정된다.
- React
- 개발 환경: npm run start
- 배포 환경: npm run build
- 테스트 환경: npm run test
- Nextjs
- 개발 환경: npm run dev
- 배포 환경: npm run start
그리고 이러한 실행 환경에 따라 환경 변수를 다르게 읽어올 수 있다. .env 파일은 모든 실행 환경에 적용된다. .env.local은 개발 환경과 배포 환경에 적용에 적용되고 이는 .env 파일의 값을 덮어쓴다.
이와 같이 실행 환경에 따라 환경 변수 할당에는 우선 순위가 존재하고, 더 우선시되는 값으로 덮어쓰게 된다. 실행 환경에 따른 우선 순위는 다음과 같다.
- 개발 환경: .env.development.local > .env.development > .env.local > .env
- 배포 환경: .env.production.local > .env.production > .env.local > .env
- 테스트 환경: .env.test.local > .env.test > .env
주의사항
이번 내용을 정리하는 과정에서 공식 문서들과 여러 사람의 글들을 참고했다. 그 과정에서 새롭게 알게된 내용이 있는데 생각보다 중요한 내용인 것 같아 짚고 넘어가야 할 것 같다.
CRA(Create-React-App)의 공식 문서에서 이러한 내용을 발견했다.
환경변수는 빌드되는 과정에서 상수로 대체되고, 이는 빌드 파일에 포함되게 된다. 이것은 누구나 환경변수들을 확인할 수 있다는 것을 의미하고, 따라서 공개되서는 안될 개인적인 내용을 환경변수에 할당하지 말라는 내용이었다. 아래는 CRA 공식문서의 일부분이다.
WARNING: Do not store any secrets (such as private API keys) in your React app!
Environment variables are embedded into the build, meaning anyone can view them by inspecting your app's files.
Create-React-App 공식 문서 해당 페이지
앞서 말했듯이, 소스 코드에 포함시키고 싶지 않은 개인적인 내용을 .env 파일에 작성한 뒤 .gitignore로 소스 코드에서 제외시키는 방식으로 많은 사람들이 사용한다고 알고 있었다. 따라서, 이 부분은 앞으로 조금 더 유의해서 사용해야 할 것 같다.
