[TIL] 0619 | VITE + React 환경 변수 사용하기

이전 포스팅 을 확인해보면, 믹스패널을 붙이기 위해 빌드환경에 따라 env 환경변수를 다르게 판별하는config.ts 를 생성한 적이 있었다.

type Env = 'production' | 'development';

export const APP_ENV: Env =
  import.meta.env.APP_ENV === 'production'
    ? import.meta.env.APP_ENV
    : 'development';

export const isProduction = APP_ENV === 'production';
export const isDev = APP_ENV === 'development';

믹스패널을 연결했다고 생각했지만, 이벤트가 믹스패널에 들어오지 않았다. Vite 공식문서를 확인해봤더니, Vite에서 사용하는 환경 변수는 VITE_APP을 변수 key의 머릿말로 쓰는 것을 권장했다. 그래서, 아래와 같이 수정했다.

type Env = 'production' | 'development';

export const APP_ENV: Env =
  import.meta.env.VITE_APP_ENV === 'production'
    ? import.meta.env.VITE_APP_ENV
    : 'development';

export const isProduction = APP_ENV === 'production';
export const isDev = APP_ENV === 'development';

마지막으로 workflow-build-and-deploy.yml 에 추가해주면 끝!

- name: Build
	run: yarn build --mode ${{ inputs.build_env }}
  env:
		VITE_APP_ENV: ${{ inputs.app_env }}

⚡️ 참조

https://vitejs.dev/guide/env-and-mode.html
https://hoyashu.tistory.com/304