[JS][Vue] vue-cli 3에서 환경변수(dotenv) 활용하기

이전 글에서 WebPack에서 dotenv 패키지를 활용하여 환경변수를 사용하는 것을 다루었었다.

이번 프로젝트에서는 Vue-Cli를 활용하였고, 여러 모로 편리함이 증가하였다. 편리했던 것 중 하나는 dotenv의 활용이었다. WebPack에서 dotenv 패키지를 사용해봤거나, 이전 포스팅을 읽어보신 분들은 아시겠지만, 외부 패키지를 깔고 webpack 설정 파일에서 직접 코드를 수정해주어야 했다. 하지만 vue-cli에서는 그럴 필요가 없다.

 

실행 script에서 실행 인자 넘겨주기

우선 가장 큰 차이점은 vue app을 실행하는 script이다. package.json의 실행 script에서 webpack을 활용할 경우에는 "webpack-dev-server .... "로 이어지는 script인데 vue-cli는 "vue-cli-serve start" 이다. 이 때 대시대시(--)를 활용해서 실행 인자를 넘겨줄 수 있다. 이 부분이 webpack 2버전과의 가장 큰 차이다.

"scripts": {
   // ...
  "serve-local": "vue-cli-service serve --mode local",
   // ...
},

 

vue-cli에서는 기본적으로 development, production, test 세 개의 모드를 지원하지만, 사용자 정의 모드를 추가할 수 있다. 필자는 dev와 prod를 개발 서버와 운영 서버로 활용하고, 로컬을 따로 운영할 것이므로 local 모드를 추가하였다.

환경 변수 지정

mode에 따라서 환경 변수가 달라지게 되고, 이를 적용해주면 된다. 환경변수는 process.env에 담기며, 기본적으로 존재하는 환경 변수는 NODE_ENV(환경)와 BASE_URL이 있다. 아래와 같은 식으로 호출하면 된다.

console.log(process.env.NODE_ENV)

 

우리는 모드에 따라서 다른 환경을 주고, 환경 변수를 바꿔주고 싶으므로 이를 지정해줘야 한다. root 위치에 .env 파일들을 만들면 된다(root 위치가 아니면 동작하지 않으므로 주의).

// .env.local
NODE_ENV = local
BASE_URL = "/"
VUE_APP_API_URL = "http://localhost:5000"

 

.env.{mode명} 폴더를 root 위치에 만들고, 환경변수를 지정해준다. 이 때 또 유의할 점 하나는, 사용자 정의 환경변수는 prefix로 VUE_APP을 꼭 붙여주어야 한다. 그렇지 않으면 제대로 동작하지 않는다.

이후로는 vue.config.js에서든, vue 앱 내에서는 process.env로 접근이 가능하다. WebPack에서 DefinePlugIn 등을 활용했던 것에 비하여, vue-cli가 알아서 처리해주는 부분이 늘었고, 굉장히 편리해졌다.

본래 웹 프론트엔드 개발자가 아니지만 vue 경험이 한두 번 있어 현재 프로젝트에서 웹 프론트엔드 초기 담당을 맡았는데, 아무래도 경험이 적고 이 분야에서 이끌어줄 개발자가 없어서 학습하기 어렵지만 한 단계씩 발전하는 것 같다.