vite 환경변수 설정

CI/CD를 위해 인프라 구성에 맞춰 배포 설정

배포 모드를 결정한다.
1. develop
2. stg
3. prd

프로젝트 루트 디렉토리에 환경 설정 파일을 생성하고 해당 환경에 맞춰서 값을 설정한다.

VITE_WEB_URI=https://web-dev.yourdomain.biz
VITE_API_URI=https://api-dev.yourdomain.biz

VITE_WEB_URI=https://web-stg.yourdomain.biz
VITE_API_URI=https://api-stg.yourdomain.biz

VITE_WEB_URI=https://web-prd.yourdomain.biz
VITE_API_URI=https://api-prd.yourdomain.biz

package.json 파일에 빌드 항목을 설정한다.

{
    "name": "*********",
    "private": true,
    "version": "0.0.0",
    "type": "module",
    "scripts": {
        "dev": "vite",
        "build": "tsc -b && vite build",
        "build:develop": "tsc -b && vite build --mode develop",
        "build:stg": "tsc -b && vite build --mode stg",
        "build:prd": "tsc -b && vite build --mode prd",
        "lint": "eslint .",
        "preview": "vite preview",
        "storybook": "storybook dev -p 6006",
        "build-storybook": "storybook build",
        "prepare": "husky",
        "format": "prettier --cache --write .",
        "test": "vitest"
    },
    ...

상태 확인을 위해서 상태 확인을 할 수 있는 컴포넌트를 만든다.

export const PageEnv = () => {
    return (
        <div>
           <div>Env</div>
           <div>{`mode: ${import.meta.env.MODE}`}</div>
           <div>{`prod?: ${import.meta.env.PROD}`}</div>
           <div>{`dev?: ${import.meta.env.DEV}`}</div>
           <div>{`dev?: ${import.meta.env.DEV}`}</div>
           <div>{`VITE_WEB_URI?: ${import.meta.env.VITE_WEB_URI}`}</div>
           <div>{`VITE_API_URI?: ${import.meta.env.VITE_API_URI}`}</div>
        </div>
    )
}

웹서버 설치(Optional)

빌드한 다음 웹서버에 배포해서 설정을 확인한다.

pnpm run build:develop

Env
mode: develop
prod?: true
dev?: false
VITE_WEB_URI?: https://web-dev.yourdomain.biz
VITE_API_URI?: https://api-dev.yourdomain.biz

다른 모드에 맞춰서 빌드하고 배포하여 출력값을 확인한다.
빌드를 하게 되면 항상 운영상태로 빌드되어 import.meta.env.PROD 변수가 항상 true 값으로 설정되는 것에 주의해야 한다.
참고문서