Vite Env Variables, IntelliSense for TypeScript, Modes

SUNG JUN LEE·2023년 6월 9일
0

vite

목록 보기
4/4

vite의 환경변수와 모드, 문서 정리 외 vite에서 process.env를 통해 환경변수를 접근하는 방법

Env Variables

vite는 import.meta.env 객체를 이용해 환경변수에 접근할 수 있다.

  • import.meta.env.MODE (string): 현재 앱의 동작 모드
  • import.meta.env.BASE_URL (string) : 앱이 제공되는 베이스 URL
  • import.meta.env.PROD (boolean) : 앱이 프로덕션인지 여부
  • import.meta.env.DEV (boolean) : 앱이 개발 환경인지 여부 / PROD 와 항상 반대되는 값을 가진다.
  • import.meta.env.SSR (boolean) : 앱이 SSR 인지 여부


프로덕션에서의 환경변수

프로덕션에서는 환경변수가 모두 정적으로 교체되어 정적으로 참조해야 한다.
import.meta.env[key] 와 같은 동적참조는 작동하지 않는다.


Vite에서의 .env

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 는 노출되지 않는다.


Prefix(접두사) 를 변경하고 싶다면

위에서 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가 시작될 때 가져와진다. 따라서 내용이 변경되었다면 서버의 재시작이 필요하다.


HTML에서 환경변수를 사용법

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 에 존재하지 않으면 무시되고 대체되지 않는다.


Vite에서 import.meta.env 가 아닌 process.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,
    }
  };
});

IntelliSense for TypeScript

vite는 기본적으로 vite/client.d.tsimport.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"]
}



Mode

기본적으로 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
profile
FE developer

0개의 댓글