.env를 이용한 Vue 배포 분기

프로젝트를 진행하면서 기본적으로 Production, Development 이 두가지로 분기를 진행했습니다.

처음 작은 규모로 시작했고 QA도 제대로 진행이 되지 않는 시점에서 크게 문제가 되지 않았습니다.

규모가 커지고 협업이 늘어나면서 분기점을 하나 더 필요하게 되었습니다.

지금까지 NODE_ENV를 이용하여 분기를 하니 분기점을 추가하기 어려웠습니다. 그리고 각각 필요한 변수와 URL이 달라 이 부분도 나누어야 했습니다.

구글을 통해 찾아보니 dotenv를 이용하면 된다고 나왔으나 짧은 영어 실력으로 해당 문제를 해결하기 어려웠습니다.

결국 vue의 –mode를 사용하기로 했습니다.

...
"scripts": {
  ...
  "build:prod": "export NODE_ENV=production && vue-cli-service build --mode production",
  "build:dev": "export NODE_ENV=development && vue-cli-service build --mode development",
  "build:stg": "export NODE_ENV=development && vue-cli-service build --mode staging",
  ...
},
...

현재 구성된 배포용 빌드 명령어입니다.

NODE_ENV를 이용하여 큰 틀의 분기를 나누고 –mode를 이용하여 각각의 작은 분기를 나누었습니다.

–mode를 활용하기 위해서는 프로젝트 디렉터리에 파일을 추가해야 합니다.

위 소스로 예시를 들면 각각의 분기별로 3개의 파일을 추가했습니다.

.env.production, .env.development, .env.staging

이 3개의 파일을 vue.config와 같은 디렉터리 내에 추가했습니다.

각각의 파일안에

VUE_APP_TITLE=production, VUE_APP_TITLE=development, VUE_APP_TITLE=staging

소스들을 추가했습니다.

그리고 해당 변수들을 접근해보면

console.log(process.env.VUE_APP_TITLE)
// build:prod -> production
// build:dev -> development
// build:stg -> staging

각각의 빌드 명령어에 따라서 해당 파일의 VUE_APP_TITLE을 불러와집니다.

이 방법으로 큰 분기점인 Production, Development은 NODE_ENV로 팀내에 필요한 작은 분기점들은 –mode와 dotenv를 활용할 수 있게 되었습니다.

잘못하면 NODE_ENV로 한계가 있어 새로운 브런치를 나누어 관리포인트가 늘어날 뻔했던 부분을 명령어 부분으로 대체할 수 있게 되었습니다.