[Vue] 실행 모드(운영/개발)와 환경 변수 분리하기

 

-  사용자 실행모드를 추가할 수 있다.

-  실행 모드별로 필요한 환경 변수를 다르게 설정 할 수 있다.

 

 package.json 파일에 스크립트 정보 추가

 

"[모드명]" : " vue-cli-service serve --mode [모드명]"

 

package.json 에 cli 실행 스크립트에 모드 정보를 붙여 추가해 준다.

내가 추가한건 live, local, dev 이고 아래와 같이 실행 가능하다.

"[모드명]" : " vue-cli-service serve --mode [모드명]"

 

npm run [모드명] 으로 실행 가능하다. 
npm run live
npm run local
npm run dev

 

모드명에 맞춰 환경 변수 파일 생성 ( .env.live, .env.dev)

 

  - package.json 과 같은 위치 (root) 에 두어야 한다. 

 - .env.[mode].local 로 생성시에는 gitgnore의 대상에 포함되니 주의한다. (gitIgnore 파일 수정 필요)

.env                # loaded in all cases
.env.local          # loaded in all cases, ignored by git
.env.[mode]         # only loaded in specified mode
.env.[mode].local   # only loaded in specified mode, ignored by git

 

각 모드별로 생성한 파일안에 필요한 환경변수를 추가하면 된다.

환경 변수는 process.env 객체로 접근 가능하며 기본 변수가 아닌 사용자가 정의한 변수에는 

VUE_APP_  prefix 키워드를 추가해야 인식 가능하다.  VUE_APP_[사용자 지정]

 

NODE_ENV = "development"
VUE_APP_PORT=8080
VUE_APP_IP = 1.1.1.1

 

 

.env.dev 

NODE_ENV = "development"
VUE_APP_PORT=8080
VUE_APP_IP = 1.1.1.1

.env.live

NODE_ENV="production"
VUE_APP_PORT=8087
VUE_APP_IP = 1.0.0.0

 

NODE_ENV 는 기본 변수이다. 아래의 3가지 실행모드를 제공한다.

 

 - development 

 - production 

 - test 

 

활용 예시 

- 설정된 환경변수들은 아래와 같이 코드에서 모드별 분기처리도 가능하다.

if (process.env.NODE_ENV == "production") {
  console.log("production");
} else if (process.env.NODE_ENV == "development") {
  console.log("development");
}

 

 

- vue.config.js 에서 아래와 같이 환경변수를 사용할 수 있다. 

vue .config.js 는 vue 프로젝트에 대한 설정 파일이다. 만약 파일이 없다면 package.json 과 같은 폴더 위치(root)에  추가해준다.

아래는 VUE_APP_PORT(사용자 커스텀) 환경변수를 이용해 실행모드 별로 각각 다른 포트를 띄우는 예제이다. 

module.exports = defineConfig({
  devServer: {
    port: process.env.VUE_APP_PORT || 8080,
  },
});

 

출처 : https://cli.vuejs.org/guide/mode-and-env.html#example-staging-mode