원룸텔 홈페이지(04 : Nodejs, React 환경변수 설정)

qksud14·2019년 11월 16일
1

config.json? dotenv?

config? config는 configuration 환경설정의 줄임말이다.

개발환경에 따른 변수를 달리 설정하는 것을 환경변수라 부르고,
환경변수를 설정하는데 주로 쓰이는 두가지 방법이 있는데
하나는 config.json 다른 하나는 .env 모듈이 있다.
node js로 서버를 구성하면서 두가지 방법을 모두 사용해봤고 아래에서 간략히 소개해보겠다.

Node js - config.json

  1. config.json 파일을 만들자
{
    "development": {
        "config_id": "development",
        "app_name": "my app",
        "app_desc": "my app desc",
        "node_port": 3000,
        "json_indentation": 4,
        "database": "my-app-db-dev"
    },
    "testing": {
        "config_id": "testing",
        "database": "my-app-db-test"
    },
    "staging": {
        "config_id": "staging",
        "node_port": 8080,
        "database": "my-app-db-stag"
    },
    "production": {
        "config_id": "production",
        "node_port": 8080,
        "database": "my-app-db-prod"
    }
}
  1. config를 불러와보자
// 우선 config파일을 불러온다
const config = require('./config.json');
// 기본값은 개발모드로 설정한다
const defaultConfig = config.development;
// NODE_ENV 변수가 주어지면 그 환경을 사용하고 아니면 개발환경을 사용한다
const environment = process.env.NODE_ENV || 'development';
// 설정한 환경을 config에 적용시킨다
const environmentConfig = config[environment];
  1. config 환경변수를 사용해보자
    터미널에서 기존의 노드를 실행하는 명령어 앞에 NODE_ENV 변수를 넘겨주면 해당되는 모드가 실행된다.
NODE_ENV=production node app.js

위와 같이 실행하게 되면, production모드로 실행된다.

Node js - dotenv

.env는 모듈을 설치함으로 보다 간단하다.
https://www.npmjs.com/package/dotenv
위의 주소에서 설치 및 사용법을 파악할수 있지만, 간략히 설명해본다.

  1. 모듈을 설치한 후에 .env라는 파일을 루트에 만들어준다
DB_HOST=localhost
DB_NAME=june
DB_USER=root
JWT_SECRET=june_secret_key
  1. .env파일을 불러온다
// dotenv파일을 가져온다
require('dotenv').config();
console.log(process.env.DB_NAME) // june	
  1. 개발환경에 따른 변수설정을 위해서는 파일을 분리하자
.env.dev
.env.test
.env.stagging
.env.prod

각 파일안에 환경변수들을 설정해놓고, 변수를 선언해주면 된다.

NODE_ENV=staging node app.js

React

CRA(Create-React-App)를 사용하는 경우, REACT_APP을 앞에 붙여서 환경변수를 만들수 있다.
(https://create-react-app.dev/docs/adding-custom-environment-variables/)
.env를 별도의 설치 없이 사용할 수 있다.

REACT_APP_URL=http://localhost:3001

위와 같이 REACT_APP을 앞에 붙인 후에 변수를 선언해주면 된다.
env파일을 수정하게되면 꼭 재부팅 해줘야한다.
나머지 부분은 기존의 dotenv와 비슷하다.

Reference

profile
함께 성장하는 개발자가 되고 싶습니다.

0개의 댓글