Webpack 개발 환경에 따라 환경변수 설정하기

목표

• 개발과 배포 환경에 따른 환경변수를 설정한다.
• 이를 위해 webpack에서 dotenv와 definePlugin을 사용한다.

 

실제 회사에서 개발 환경은 Dev, Beta, Stage, Operation(Production) 과 같이 구분됩니다.

이 환경에 대해 부르는 이름과 구성은 상이할 수 있습니다.

 

그렇지만 우리가 작업하는 로컬인 Dev와 실제 적용된 운영(Production) 환경은 공통됩니다.

 

환경에 따라 크게 다른 부분은 API의 Base URL이 있습니다.

그렇기 때문에 환경 변수를 통해 개발 환경에 따른 값을 설정할 수 있습니다.

 

이 외에도 환경변수가 필요한 경우는 API의 private한 key값을 숨겨야 하는 경우도 있습니다.

 

.env

환경변수를 설정할 파일들을 만듭니다.
이 글에서는 두 개발환경(dev, prod)에 따른 환경변수 파일을 만듭니다.

프로젝트마다 환경변수 파일의 위치는 다를 수 있습니다.
저는 root에서 생성하겠습니다.

 

환경변수 설정파일은 <KEY>=<VALUE>의 JSON 형태로 이루어져 있습니다.
value는 string입니다.

1. 개발

개발 환경(local)에서 적용될 환경변수 파일입니다.

./.env.dev

API_BASE_URL='http://localhost:8080'

2. 배포

배포되었을 때 적용될 환경변수 파일입니다.

 

/.env

API_BASE_URL='http://prod-apiurl.com:8080'

 

 

프로젝트 패키지 관리 파일인 package.json에서 npm 스크립트를 추가합니다.
로컬에서 적용될 커맨드는 NODE_ENV=development, 배포 환경은 NODE_ENV=production

 "scripts": {
    "start": "NODE_ENV=development webpack-dev-server --config webpack.dev.js --open",
    "build": "rm -rf dist && NODE_ENV=production webpack --config webpack.prod.js",
  },

 

EnvironmentPlugin은 필요하지 않습니다.

 

또한 여러명이 window, mac 다양한 OS를 이용하는 프로젝트라면 cross-env 모듈도 확인해야 합니다.

 

Dotenv

npm i -D dotenv-webpack

dotenv와는 다르니 확인하고 설치를 진행하세요.

 

dotenv란 .env 파일에 선언한 환경 변수들을 process.env에 로드해주는 zero-dependency 모듈입니다.

 

webpack 설정을 합니다.

const Dotenv = require('dotenv-webpack')

module.exports = {
    ...
  plugins: [
    new Dotenv({
      path: process.env.NODE_ENV === 'production' ? '.env' : '.env.dev',
    }),
  ],
}

 

환경에 따라 적용될 환경변수 파일을 분기처리합니다.

 

DefinePlugin

위에서 설정된 process.env 변수들은 node.js 런타임에만 존재합니다.
그래서 webpack이 빌드되는 시점에 선언해주기 위해 webpack의 내장 plugin을 이용합니다.

...
const webpack = require('webpack')

module.exports = {
    ...
  plugins: [
    ...
    new webpack.DefinePlugin({
      PRODUCTION: process.env.NODE_ENV === 'production', // 개발할 때 분기처리를 위해 선언
      API_URL: JSON.stringify(process.env.API_URL),
    }),
  ],
}

 

사용

배포 환경일 경우 분기처리를 아래의 전역변수로 이용할 수 있게 되었습니다.

function App() {
  console.log('production', PRODUCTION) // true나 false
}

 

API의 URL도 아래와 같이 사용할 수 있습니다.

{
  API_BASE_URL: process.env.API_BASE_URL
}

 

참고하면 좋을 글

개발(Development) 모드는 어떻게 작동할까?