배포 환경 설정 (.env)

"환경 변수(環境 變數, 영어: environment variable)는 프로세스가 컴퓨터에서 동작하는 방식에 영향을 미치는, 동적인 값들의 모임이다."

쉽게 말해 "내가 정한 명령어"이다.

 

기본적으로 우리는 Nodejs위에서 개발을 한다. node.js는 production(배포)와 development(개발), test(테스트)로 구분하여 사용한다. 그리고 create-react-app의 실행 명령어에 따라 자동으로 NODE_ENV값이 정해진다.

 

# production 배포 env실행
$ npm run build

# development 개발 env실행
$ npm start

# test 개발 env실행
$ npm run test

 

실행 OS에 따라 환경변수를 설정하는 방법이 다르기 때문에, 환경 변수 설정 시 undefined가 나오는 경우가 있다. 따라서 아래의 명령어를 실행하여 cross-env 모듈을 사용하여 환경변수를 설정하는 것이 좋다.

 

$ npm i cross-env

 

설치 후에 아래와 같이 pakage.json에서 사용가능

 

  ```
  @사용법
  cross-env 환경변수1=값 환경변수2=값 실행명령어
  ```
"scripts": {
  "local": "cross-env REACT_APP_API_URL=localhost react-scripts start",
  "build": "cross-env REACT_APP_API_URL=999.99.99.99 react-scripts start"
},

 

리액트에서 .env 환경 설정 시 변수명에 REACT_APP_이라고 앞에 붙여줘야 인식을 한다. 붙이지 않으면 무시한다. 위의 방식으로 하면 단점은 환경변수가 노출된다는 치명적인 단점이 있다. 이러한 단점 때문에 우리는 아래의 방식처럼 .env.local, .env.development, .env.test, .env.production 라는 파일을 만들어서 변수를 넣어서 관리는 한다.

 

0.1.   .env.local (로컬 개발 시)

.env.local 파일은 .env를 덮어쓰는 파일로, test 환경 외의 모든 환경에서 로딩된다.

 

0.2.   .env.development

.env.development 파일은 개발환경 시 아래의 명령어를 치면 사용된다. 만약, .env.development.local이 있다면, .env.development을 덮어쓴다. 

$ npm run start
$ yarn start

npm start 시 .env 파일도 실행되는 우선순위가 있다. 우선순위는 아래와 같다.

.env.development.local > .env.development > .env.local > .env

오른쪽이 우선실행된다. 만약 .env 파일만 있다면, .env 파일만 실행된다. 그리고 .env.development.local 파일이 있다면, 다른 우선 순위는 무시된다. 보통은 .env.development으로 사용된다.

 

0.3.   .env.production (서버 배포 시)

.env.production 파일은 배포 환경 시 사용되며, 아래의 명령어를 치면 자동으로 사용된다. 만약, .env.production.local이 있다면, .env.production을 덮어쓴다.

$ npm run build 
$ yarn build

npm run build 시 .env 파일도 실행되는 우선순위가 있다. 우선순위는 아래와 같다.

.env.production .local > .env.production > .env.local > .env

오른쪽이 우선실행된다.

 

0.4.   .env.test

.env.test 파일은 테스트 환경 시 사용한다. 만약, .env.test.local이 있다면, .env.test을 덮어쓴다.

 

$ npm run test
$ yarn test

npm run test시 .env 파일도 실행되는 우선순위가 있다. 우선순위는 아래와 같다.

.env.test.local > .env.test> .env.local > .env

오른쪽이 우선실행된다.

 

 

---

 

 

• 환경 변수 파일인 .env는 클라이언트와 서버 폴더에 각각 넣어주어야 한다
• node.js 환경(서버)일 때와 리액트 환경(클라이언트)일 때 설정 방법이 다르다.

 

리액트의 경우

//.env
REACT_APP_CLIENT_ID=abcd1234
REACT_APP_CLIENT_SECRET=abcd1234
// ✅ 환경 변수 앞에 REACT_APP_을 붙여주어야 리액트 코드에서 인식할 수 있다.

//Component.js
const CLIENT_ID = process.env.REACT_APP_CLIENT_ID
// ✅ 따로 import 과정 없이 process.env로 어디서든 꺼내쓸 수 있다.

 

 

node.js의 경우

//.env
CLIENT_ID=abcd1234
CLIENT_SECRET=abcd1234
// ✅ 반드시 REACT_APP과 같은 특정 이름으로 변수명을 지정해주지 않아도 된다.

//callback.js
require('dotenv').config();
// ✅ 반드시 상단에 dotenv를 불러와 config를 실행해야 환경변수를 사용할 수 있다.
const CLIENT_ID = process.env.CLIENT_ID;
const CLIENT_SECRET = process.env.CLIENT_SECRET;
// ✅ 이후에는 process.env로 꺼내쓸 수 있다.