vite의 환경변수와 모드, 문서 정리 외 vite에서 process.env를 통해 환경변수를 접근하는 방법
vite는 import.meta.env
객체를 이용해 환경변수에 접근할 수 있다.
import.meta.env.MODE
(string): 현재 앱의 동작 모드import.meta.env.BASE_URL
(string) : 앱이 제공되는 베이스 URLimport.meta.env.PROD
(boolean) : 앱이 프로덕션인지 여부import.meta.env.DEV
(boolean) : 앱이 개발 환경인지 여부 / PROD
와 항상 반대되는 값을 가진다.import.meta.env.SSR
(boolean) : 앱이 SSR 인지 여부프로덕션에서는 환경변수가 모두 정적으로 교체되어 정적으로 참조해야 한다.
즉import.meta.env[key]
와 같은 동적참조는 작동하지 않는다.
dotenv를 이용해 환경변수를 가져올 수 있다.
.env # 모든 상황에서 사용될 환경변수
.env.local # 모든 상황에서 사용되나, 로컬 개발 환경에서만 사용될 환경변수
.env.[mode] # 특정 모드에서만 사용될 환경 변수
.env.[mode].local # 특정 모드에서만 사용되나, 로컬 개발환경에서만 사용될 환경 변수
.env.*
에서 추가한 환경 변수들은 import.meta.env
객체를 통해 문자열 형태로 접근이 가능하다.
그리고, vite에서 접근 가능한 환경 변수는 일반 환경 변수와의 구분을 위해 VITE_
라는 접두사를 붙여주어야 한다.
VITE_SOME_KEY=123 // 123
DB_PASSWORD=foobar // undefined
위의 SOME_KEY
는 객체를 통해 가져올 수 있으며, DB_PASSWORD
는 노출되지 않는다.
위에서 vite는 기본적으로 VITE_
접두사를 붙여야 접근이 가능하다고 하였다.
접두사를 변경하고 싶다면 vite.config.js
에서 수정이 가능하다.
envPrefix
string | string[]
VITE_
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()],
envPrefix: 'MY_PREFIX',
});
MY_PREFIX_TEST_CONST = 123
envPrefix
는''
로 해서는 안된다. 이러한 경우 모든 환경 변수가 노출되며, 이로인한 정보가 누출될 수 있다. 따라서''
로 설정 시 vite에서 오류를 발생시킨다.
접두사가 붙지 않은 변수를 노출하려면define
옵션을 사용하여야 한다.
define option
define: {
'import.meta.env.ENV_VARIABLE': JSON.stringify(process.env.ENV_VARIABLE)
}
.env.production
과 같이 특정 모드에 대한 환경 변수는 일반적인 환경 변수 .env
보다 높은 우선 순위를 갖는다.
또한 vite가 실행될 때 이미 존재하던 환경 변수는 .env
파일로 인해 덮어씌어지지 않는다. ex) VITE_SOME_KEY=123 vite build
.env
파일은 vite가 시작될 때 가져와진다. 따라서 내용이 변경되었다면 서버의 재시작이 필요하다.
vite는 HTML 파일에서 환경 변수를 대체하는 기능도 지원한다.
import.meta.env
의 모든 속성은 특수 구문을 사용해 HTML 파일에서도 사용할 수 있다. %ENV_NAME%
<h1>Vite is running in %MODE%</h1>
<p>Using data from %VITE_API_URL%</p>
다만 import.meta.env
에 존재하지 않으면 무시되고 대체되지 않는다.
이 방법은 추천되는 방법은 절대 아니지만, 라이브러리를 수정하지 못하고 꼭 process.env 방식을 지원하게 해야 할 때 사용을 권한다.
import { defineConfig, loadEnv } from 'vite';
import react from '@vitejs/plugin-react';
// https://vitejs.dev/config/
export default defineConfig(({ command, mode }) => {
const env = loadEnv(mode, process.cwd(), '');
return {
plugins: [react()],
define: {
'process.env': env,
}
};
});
vite는 기본적으로 vite/client.d.ts
의 import.meta.env
에 대한 타입 정의를 제공하고 있다.
src
디렉터리 내 env.d.ts
파일을 생성한 후, 아래와 같이 정의하여 환경 변수에 대한 타입을 정의할 수 있다.
interface ImportMetaEnv {
readonly VITE_APP_TITLE: string
// 다른 환경 변수들에 대한 타입 정의...
}
interface ImportMeta {
readonly env: ImportMetaEnv
}
코드에서 DOM
이나 WebWorker
와 같이 브라우저 환경의 타입이 필요하다면, tsconfig.json
에서 lib
필드에 이를 명시해줄 수 있다.
{
"lib": ["WebWorker"]
}
기본적으로 dev
명령으로 실행되는 서버는 development
모드로 동작하고, build
명령을 실행되는 경우 production
모드로 동작한다.
즉, vite build
명령을 실행하게 되면, .env.production
에 정의된 환경 변수를 불러오게 된다.
vite build
명령을 실행할 때 다른 모드로 변경하고 싶다면, --mode
옵션 플래그를 통해 덮어쓸 수 있다.
ex) staging
모드
vite build --mode staing
이때, .env.staing
파일을 생성해주어야 한다.
# .env.staing
VITE_APP_TITLE=My App