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-webpackdotenv와는 다르니 확인하고 설치를 진행하세요.
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
}