env 파헤치기

2022년 11월 16일

#React#Env

1. CRA에서의 .env

  • CRA(Creat React App)에서는 .env를 어떻게 써야할까
  • 기본적으로 환경 변수를 사용할 수 있도록 세팅되어있다.
  • 변수를 선언해서 사용 가능
  • 선언하려는 변수 명에 prefix로 REACT_APP_ 을 붙여줘야하며 그러지 않을 시 모두 무시된다.
  • REACT_APP_ 이외에도 NODE_ENV라는 기본적으로 제공되는 환경 변수도 있다.
  • NODE_ENV는 현재 서버 환경을 나타낸다.
  • NODE_ENV로 서버 환경별 조건부 실행이 가능하다.
  • .env 파일을 수정하면 서버를 재실행 시켜야 변경사항이 반영된다.
  • .env에서 선언한 변수는 process.env에서 불러온다.
  • .gitignore에 .env파일들을 추가해 외부에 노출시키지 않도록한다.

1–1. 사용법

  • 기본
//.env
REACT_APP_CLIENT_URL='...'
// file.js
process.env.REACT_APP_CLIENT_URL
  • NODE_ENV의 경우
process.env.NODE_ENV // 환경별로 'development', 'production', 'test'
  • HTML의 경우
// file.html
<p>%REACT_APP_CLIENT_URL%</p>

1–2. 각 .env 파일 로드 시점

.env: 기본 파일
.env.local : 로컬 설정 오버라이딩. test를 제외한 모든 환경에서 불러와짐
.env.development : 개발 환경에서 불러와짐
.env.test : test 환경에서 불러와짐
.env.production : 빌드된 배포 환경에서 불러와짐
.env.production.local, .env.test.local, .env.production.local : 환경별 로컬 설정 오버라이딩

1–3. 환경별 .env 파일 로드 우선순위

  • 왼쪽이 오른쪽보다 우선순위가 높다.
npm start: .env.development.local > .env.local > .env.development > .env
npm run build: .env.production.local > .env.local > .env.production > .env
npm test: .env.test.local > .env.test > .env

1–4. 환경 변수 확장

  • dot-env-expand를 사용하면 확장 가능
DOMAIN=www.example.com
REACT_APP_FOO=$DOMAIN/foo
REACT_APP_BAR=$DOMAIN/bar

2. Next.js에서의 .env

  • 환경 변수를 기본적으로 사용할 수 있도록 세팅되어 있다.
  • .env.local로 환경 변수 로드
  • 기본적으로 Node.js 환경에서만 사용 가능하며, 브라우저에 노출이 되지 않지만 GA 추적코드와 같은 외부에 노출되어야 하는 변수의 경우 prefix로 NEXT_PUBLIC_을 붙인다.

2–1. 사용법

  • 기본
//.env.local
DB_HOST = "sample-host";
// file.js
process.env.DB_HOST;
  • 외부 노출의 경우
// 노출하고 싶으면
NEXT_PUBLIC_GA_ID = "gagaga";
// file.js
process.env.NEXT_PUBLIC_GA_ID;
  • process.env는 js 객체가 아니므로 구조 분해 할당 사용 불가
// 불가
const { DB_HOST } = process.env;
  • $SOME_VALUE를 통해 확장 가능
// .env
HOSTNAME=localhost
PORT=8080
HOST=http://$HOSTNAME:$PORT
  • $의 실제 값을 사용하고 싶으면 \ 이용
NAME='jack'

A=MY_NAME_IS$NAME // result =  MY_NAME_ISjack
B=MY_NAME_IS\$NAME // result = MY_NAME_ISNAME

2–2. 환경 변수 로드 순서

  • 맞는 환경 변수를 찾으면 중단
  1. process.env
  2. .env.production.local, .env.development.local, .env.test.local
  3. .env.local (test 환경에서는 생략)
  4. .env.production, .env.development, .env.test
  5. .env

참조

피드백은 언제나 환영입니다.