deployment/React 배포 환경 구성하기: 동적 환경 설정을 위한 .env 파일 사용

 

 

각 서버별로 연결되어야 하는 Request Ip가 다른 경우 리액트에서는 이를 환경 변수 파일 .env로 관리할 수 있다.

 

---

 

.env 파일 적용 우선순위 알아보기

Ref.

The priorities of different .env files used in different React scripts

 

---

 

.env 파일명 지정하기

 

.env

기본값으로, 모든 환경에서 load 된다.

 

.env.local

테스트 환경을 제외한 모든 환경에서 load되는 값으로, 로컬에서 애플리케이션 실행 시에만 적용된다. 배포 시 적용되지 않음.

 

.env.development | .env.test | .env.production

특정 배포 환경 별 지정 파일을 설정한다.

 

.env.development.local | .env.test.local | .env.production.local

특정 배포 환경 별 환경 설정에서 개인 로컬에 맞게 커스텀하고 싶은 부분이 있는 경우 해당 부분을 오버라이드해 적용한다.

 

---

 

npm 명령어에 따른 .env 파일 적용 우선순위 알아보기

 

프로젝트 내부에 다른 이름을 가진 여러 개의 .env 파일이 존재하는 경우 각 명령어 별로 아래의 우선순위에 따라 .env 파일이 적용된다.

 

npm start

1. .env.development.local
2. .env.development
3. .env.local

 

npm run build

1. .env.production.local
2. .env.production
3. .env.local
4. .env

 

npm test

1. .env.test.local
2. .env.test
3. .env

 

 

---

 

환경별 .env 파일 생성하기

 

현재 내가 구성 중인 프로젝트의 경우, 서버 환경이 development, stage, production의 세 단계로 구분되어 있어 각 서버 환경에 맞추어 .env 파일을 .env.local, .env.development, .env.stage, .env.production 4개로 구분해 만들어주었다.

 

 

 

.env.local 예시

REACT_APP_GRAPHQL_SERVER=${server_url}/graphql

 

현재 graphql 서버와 통신 중이므로 /graphql 경로까지 .env에서 잡아주고 apollo client 설정에서 해당 값을 주입 받아 사용하도록 구성했다.

나머지 .env development, stage, production도 각 호출 서버로 지정해주었다.

 

이렇게 구성하는 경우 로컬에서 개발 테스트 시 npm start 명령어를 실행하면 .env.local 환경이 로드되어 적용된다. 이때, 각 서버에 정적으로 리액트 build 폴더를 전달해주어야 하는 경우에 사용하기 편하게 npm build 명령어를 커스텀해보자.

 

 

---

 

package-json 에서 npm 명령어 커스텀하기

 

 

react-create-app을 이용해 초기 생성한 프로젝트의 경우 package-json의 scripts 내용은 다음과 같이 구성되어 있다.

 

  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  }

 

 

여기서 수정해야 할 부분은 build 부분으로, 리액트에서 지정되는 .env 파일의 우선순위에 맞춰서 정적 build 파일들을 생성하지 않고 내가 원하는 .env 환경에 맞추어 각 환경별로 정적 build 파일들이 구성될 수 있도록 명령어를 지정하는 것이다.

 

먼저, 명령어를 커스텀할 수 있도록 env-cmd 라이브러리를 설치한다.

 

---

 

env-cmd 라이브러리 설치하기

 

npm i env-cmd

 

 

Ref.

env-cmd

 

---

 

package-json에서 env-cmd를 이용해 환경별 명령어 설정하기

 

Using custom env file path
To use a custom env filename or path, pass the -f flag. This is a major breaking change from prior versions < 9.0.0

 

공식 설명에 따르면 -f 옵션으로 적용할 env 파일 이름을 지정할 수 있다고 명시되어 있다. 설명에 따라 .env 지정 옵션을 추가해 커스텀 build 명령어를 추가해보자.

 

scripts.build 기본값

  "scripts": {
    ...
    "build": "react-scripts build",
    ...
  }

 

 

생성한 .env 환경에 따라 build 명령어 추가

  "scripts": {
    ...
    "build:development": "env-cmd -f .env.development react-scripts build",
    "build:stage": "env-cmd -f .env.stage react-scripts build",
    "build:production": "env-cmd -f .env.production react-scripts build",
    ...
  }

 

각 명령어별로 env-cmd의 -f 옵션으로 지정된 .env 파일을 읽어 build하도록 추가한다.

 

---

 

각 .env 환경에 따라 build 파일 추출하기

 

이제 build 설정은 마쳤다. 앞서 지정한 package-json의 scripts에 따라 명령어를 실행해보자.

 

npm run build:development

 

위와 같이 scripts에 지정한 key 값으로 명령어를 덧붙이면 scripts의 동작에 따라 해당 명령어에 지정된 .env 파일을 읽어 bulid 파일을 추출할 수 있다!

 

나머지 환경에도 동일하게 적용한다.