[vue 3] vite의 환경변수와 모드

이번 포스트에서는 vite의 환경 변수에 대해 살펴보자

 

환경 변수

 

import.meta.env

Vite의 환경변수는 import.meta.env 객체로 관리된다. (import.meta는 import된 모듈의 context 정보를 가져오기 위한 객체이다. )

• import.meta.env.MODE: 현재 앱이 동작하는 모드(run build는 development 모드, build는 production 모드)
• import.meta.env.BASE_URL: 앱이 실행되는 기본 URL로 기본 값은 /
• import.meta.env.PROD: 앱이 현재 production 모드인지 boolean으로 반환
• import.meta.env.DEV: 앱이 현재 development 모드인지 boolean으로 반환
• import.meta.env.SSR: 앱이 SSR 상태인지 boolean으로 반환

 

.env를 통한 사용자 정의 속성

주어진 속성 외에 추가로 설정하고 싶은 내용이 있다면 환경 변수가 저장된 디렉토리(기본은 project root)에 .env 파일을 다양한 모드로 작성할 수 있다.

.env                # 모든 모드에서 사용될 환경 변수
.env.local          # 모든 모드에서 사용되며, .gitignore에 등록되는 파일
.env.[mode]         # 특정 모드에서만 사용될 환경 변수
.env.[mode].local   # 특정 모드에서만 사용되며, .gitignore에 등록되는 파일

즉 .env.production은 production 모드에서만 사용되며 .env.production은 production 모드에서만 동작한다. 이 파일들은 vite가 시작하면서 로딩되고 상세한 설정이 우선 순위를 갖는다. 즉 .env의 내용이 가장 먼저 로딩되고 .env.local > .env.[mode] > .env.[mode].locl 순으로 로딩 되면서 기존의 속성들을 재정의하게 된다.

.env 파일을 이용해서 사용자 정의 속성을 만들 때는 VITE_라는 접두사로 시작해야 한다.

VITE_KAKAO_KEY=1234

.env를 이용하면 개발시에 적용하는 속성 값과 운영시에 적용하는 속성 값을 다르게 처리할 수 있다. 만약 다음과 같이 .env.development.local과 .env.product.local 처럼 2개의 환경 설정 파일을 작성하면 특정 모드에서 동작하는 환경 변수들을 관리할 수 있다.

#.env.development.local
VITE_APP_SERVICE_KEY=개발환경에서 사용하는 키


#.env.production.local
VITE_APP_SERVICE_KEY=운영 환경에서 사용하는 키

 

환경 변수의 사용

 

JavaScript

JavaScript 영역에서 환경 변수를 사용하려면 import.meta.env를 사용하면 된다.

console.log(import.meta.env)
console.log(import.meta.env["MODE"])