노트

Vite mode와 env 파일

Env Variables and Modes

프런트엔드#tooling · 연결된 개념 3개

쉽게 말하면

Vite mode는 같은 앱을 '스테이징', '프로덕션' 중 어떤 환경 이름으로 띄울지 정해서, 그에 맞는 .env 파일을 골라 읽게 하는 옵션이에요. 여행지에 따라 다른 준비물 목록을 꺼내는 셈이죠.

비유가 깨지는 곳 준비물 목록만 바뀌지 이동 수단이 바뀌진 않아요. mode는 최적화 수준이 아니라서 압축 같은 최적화는 vite build가 하고, --mode staging 빌드에서도 import.meta.env.PROD는 true예요.

Vite의 --mode는 앱이 어떤 환경 이름으로 동작할지 정하는 옵션이다. 가장 큰 효과는 어떤 .env 파일을 읽을지가 달라진다는 점이다. 기본값은 vite(dev)가 development, vite build가 production이다.

.env                # 항상
.env.local          # 항상, git에 올리지 않음
.env.[mode]         # 해당 mode일 때만
.env.[mode].local   # 해당 mode일 때만, git에 올리지 않음 (뒤에 있을수록 우선)
  • vite build --mode staging이면 .env.staging이 추가로 읽히고, 코드에서 import.meta.env.MODE는 "staging"이 된다
  • 함정: mode는 최적화 수준이 아니다. 압축·트리 셰이킹 같은 프로덕션 최적화는 vite build 명령 자체가 한다. staging mode로 빌드해도 최적화는 똑같다
  • import.meta.env.PROD·DEV는 mode가 아니라 NODE_ENV를 따른다. vite build는 기본적으로 NODE_ENV를 production으로 두기 때문에 --mode staging 빌드에서도 PROD는 true다. .env.staging에 NODE_ENV=development를 직접 적었을 때만 달라진다
  • 클라이언트 코드에 노출되는 변수는 VITE_ 접두사가 붙은 것뿐이다. 비밀 값은 .local 파일에 두고 커밋하지 않는다

환경별 설정을 외부로 빼는 같은 생각은 스프링의 프로파일, 셸의 환경변수 스코프와 source에도 있다. 번들러 전반은 번들러.

출처: Vite - Modes · Vite - NODE_ENV and Modes

연결된 개념

이 노트를 가리키는 문서

뜻이 가까운 노트

  • 배럴 파일과 re-export

    배럴 파일(Barrel File)은 여러 모듈의 export를 index.ts 하나에 모아 다시 내보내(re-export) 진입점을 하나로 만드는 파일이다. 쓰는 쪽은 import { Button, Input } from './components'처럼 한 경로에서 가져온다.

  • Next.js output: 'standalone'

    output: 'standalone'은 next build가 프로덕션 실행에 필요한 파일만 골라 .next/standalone 폴더에 모아 주는 빌드 출력 모드다. 이 폴더는 node_modules를 다시 설치하지 않고 node server.js 하나로 실행된다.

  • Svelte

    컴포넌트를 빌드할 때 DOM(Document Object Model)을 직접 바꾸는 JS(JavaScript)로 컴파일하는 UI 프레임워크. React처럼 런타임에 가상 DOM(Virtual DOM)을 비교하지 않고, 어떤 값이 바뀌면 어떤 DOM을 고칠지 컴파일러가 미리 코드로 만들어 둔다. 앱 프레임워크는 SvelteKit이다.

  • 번들 크기 줄이기

    번들 다이어트는 사용자가 내려받는 JavaScript 양을 측정하고 줄이는 작업이다. 같은 용량이라도 JS는 이미지보다 비싸다. 이미지는 다운로드와 디코딩만 하면 되지만, JS는 다운로드·파싱·컴파일·실행을 모두 거친다.

  • Dockerfile: 레이어 캐시와 멀티 스테이지

    Dockerfile은 이미지를 만드는 명령을 순서대로 적은 파일이다. 파일시스템을 바꾸는 명령(RUN·COPY·ADD)이 각각 레이어(layer)가 되고, 바뀌지 않은 레이어는 캐시를 재사용한다. 그래서 자주 바뀌는 것을 뒤에 두는 순서가 빌드 속도를 좌우한다.

보기 옵션