프로젝트 CI/CD 도입기 -2 (환경 설정 분리)

 CI/CD 를 도입 전 필수적인게 CI 간 테스트 코드 작성, 뭐 프로세스 정립 등 많지만,,,

아주 기초적이자 중요한건 수행되는 환경에 따른 실행 조건 분기 라고 생각한다.

 

 

우선 대표적인 환경 설정 방법은 아래 표와 같다.

 

 

일전에 Airflow 를 통한 파이프라인 관리했을땐, config 용 Git repo 를 따서 Sub repo 로 등록하여 사용하거나,

FastApi 로 개발할땐 파이썬의 dataclass를 유용하게 사용했다.

뭐 어떤 기술을 사용하든, 내부 동작은 보통 json 이나 환경변수로 동작하는 구조인데, 이번엔 env 를 선택헀다.

 

선택 근거

1. Node 에서 dotenv 핵 쉬움,,,

2. React 에선 CRA에서 .env 기본 지원(.env 파일 안 환경변수 Key 앞에 REACT_APP_ 만 붙이면 된다.)

 

 

 

무튼  이제 본론으로 가서 Node.js 와 React 에서 환경 분리에 대하여 적어보겠다.

 

Node JS 환경 분기

1. 패키지 install

npm install dotenv-cli --save-dev

 

2. 실행 환경 별 env 파일 분리

3. Package.json 에 실행 스크립트 별 환경변수 정의

예시 Package.json 첨부한다. 아래 scirpts 부분을 보면, 환경 변수 파일을 지정하는 코드를 볼 수 있다.

(* 난 개발과 local 의 경우 nodemon 을 사용중이라 nodemon 으로 실행 중이나, 사용하지 않는다면 node 로 해도 무방)

{
  "name": "backend",
  "version": "1.0.0",
  "private": true,
  "type": "module",
  "dependencies": {
    "cors": "^2.8.5",
    "dotenv": "^16.4.5",
    "express": "^4.21.0",
    "jsonwebtoken": "^9.0.2",
    "mysql2": "^3.11.3",
    "sequelize": "^6.37.3"
  },
  "scripts": {
    "start:prod": "cross-env NODE_ENV=production dotenv -e .env.prod node app.js",
    "start:dev": "cross-env NODE_ENV=development dotenv -e .env.dev nodemon app.js",
    "start:local": "cross-env NODE_ENV=local dotenv -e .env.local nodemon app.js"
  },
  "devDependencies": {
    "cross-env": "^7.0.3",
    "dotenv-cli": "^7.4.2",
    "nodemon": "^2.0.22"
  }
}

 

4. 실행

npm run start:local # 로컬 환경
npm run start:dev # 개발 환경
npm run start:prod # 운영 환경

 

 

React 환경 분기

1. 실행 환경 별 env 파일 분리 (Node 와 동일)

2. package.json 수정

- 뒤에 env=local, env=dev 이 부분을 각자 .env 뒤에 붙인 파일의 이름과 맞추면 된다.

  "scripts": {
    "start:local": "react-scripts start --env=local",
    "start:dev": "react-scripts start --env=dev",
    "start:prod": "react-scripts start --env=prod",
    "build:dev": "react-scripts build --env=dev",
    "build:prod": "react-scripts build --env=prod",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

 

3. 실행 

npm run start:dev # 각자 package.json 의 script 부분과 맞춰서
npm run start:prod

 

이렇게 설정하면 프로젝트의 설정 분리가 끝난다.