.env를 이용한 Vue 배포 분기

프로젝트를 진행하면서 용도별로 분기를 하여 배포를 한다. QA에서 사용할 용도, 개발 단계에서 사용할 용도, 실제 운영으로 사용하는 용도등 방향은 다양하다.

단순히 환경변수에서 지정한 NODE_ENV 를 이용한 분기는 매우 불편하다. 한두개의 분기 포인트면 몰라도, 여러개로 늘어나면 if문의 압박을 견딜 수 없게 된다. 그래서 나는 주로 파일을 이용한 분기를 좋아한다.

dotenv 를 이용하면 매우 쉽게 처리할 수 있다. 여기서 하나의 방법을 소개해볼 생각이다. --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"
}

빌드 실행구문을 위처럼 분리를 하고, 각 구문에 맞춰서 .env 파일들을 추가한다.

.env.production, .env.development, .env.staging 이 파일들을 root 경로에 추가했다. 이 후 각 환경변수들을 찍어보면 아래와 같이 각 파일로 접근을 한다.

console.log(process.env.ANY_ENVIRMENT_VALUE)

// build:prod -> production
// build:dev -> development
// build:stg -> staging

이렇게 각 환경변수 파일을 구성하여 각 파일들을 공유하면, Git의 브런치를 늘릴 필요도 없다.