Quasar에서 환경 변수 사용하기 - 보류(파일로 사용하는 방식은 보안이 안됨)

환경 변수가 필요한 이유

  개발과 테스트 배포, 실제 서비스 배포에서 각각 다른 설정값을 사용해야 할 경우에 현재 구동되는 환경을 알아야 하는데 이때 사용하는 방법이 환경 변수입니다. 

 예를 들어 백엔드가 테스트용과 배포용이 따로 있을 경우에는 각각 상황에 맞게 연동해주어야 합니다.

 

Quasar에서 env 환경 변수

  import.meta.env 변수안에 현재 환경에 대한 값들이 들어 있습니다.

// 개발시 환경변수를 출력합니다.
console.log('env', import.meta.env);

  

 

Quasar에서 CMD를 이용해 커맨드 입력시 env에 환경변수 전달하기

 VITE로 구성된 프로젝트는 CMD에서 set VITE_BUILD_MODE=development 와 같이 입력하면 import.meta.env.VITE_BUILD_MODE라는 변수가 생기고, 거기에 "development" 값이 설정됩니다.

 따라서 해당속성을 잘 이용하여 커맨드를 입력하면, 사용하고자 하는 속성을 지정할 수 있습니다.

 

 참고. ".env" 파일을 사용하는 방법도 있는데, quasar에서는 라이브러리를 설치해야해서 여기서는  간편한 cmd 방식을 사용함.

 

Quasar의 evn 환경변수를 사용해 개발과 배포를 구분하기

 환경변수로 구분해야 할 것은 개발과 테스트 배포, 실서비스 배포 이렇게 3가지 인데, 위에 나온 변수들을 이용하여 구분하여 보겠습니다.

 

  각 환경에 맞게 CLI 명령어를 입력(띄어쓰기 금지)하면 import.meta.evn.VITE_BUILD_MODE가 설정되는데 이를 이용.

 

    개발 모드  : set VITE_BUILD_MODE=development&&quasar dev

    테스트 배포 모드 : set VITE_BUILD_MODE=development&&quasar build
    제품 배포  모드 : set VITE_BUILD_MODE=production&&quasar build

    if (import.meta.env.VITE_BUILD_MODE === 'production') {
    	// 배포 서버 경우 처리(배포용 백엔드에 연결)
    } else if (import.meta.env.VITE_BUILD_MODE === 'development') {
        // 개발중이나 테스트 서버일 경우 처리(테스트용 백엔드에 연결)
    } else {
    	// VITE_BUILD_MODE 플래그가 없을 경우, 개발자가 인지하지 못한 위험상황
        alert('Caution : build mode is not defined!');
    }

 

 

 

 

 

참고:  https://quasar.dev/quasar-cli-vite/handling-process-env

Handling process.env | Quasar Framework