Search
Duplicate
📒

[React 완벽 가이드] 13-2. Vite 빌드/환경변수 사용

상태
수정중
수업
React 완벽 가이드
주제
4 more properties
참고

1. 목차

NOTE

환경변수

NOTE
vite는 import.meta.env 객체를 이용해 환경변수에 접근할 수 있도록 하고 있으며, 아래와 같은 환경변수에 접근 가능하다.
import.meta.env.MODE: 현재 앱이 동작하고 있는 모드
import.meta.env.BASE_URL: {string} 앱이 제공되는 베이스 URL이며, 이 값은 base설정에 의해 결정된다.
import.meta.env.PROD: {boolea} 앱이 프로덕션에서 실행 중인지 여부이다.(개발 서버 실행 혹은 프로덕션 빌드 시 NODE_ENV=’production’ 설정)
import.meta.env.DEV: {boolean} 앱이 개발 환경에서 실행 중인지 여부이며 항상 PROD와 반대되는 값을 가진다.
.env # 모든 상황에서 사용될 환경변수 .env.local. # 모든 상황에서 사용되나, 로컬 개발 환경에서만 사용 .env.[mode] # 특정 모드에서만 사용될 환경변수 .env.[mode].local # 특정 모드에서만 사용되나, 로컬 개발환경에서만 사용
Ruby
복사
vite build # 기본적으로 .env.production을 사용 vite build --mode [mode name]
Ruby
복사
NODE_ENV
node.js에서 널리 사용되는 환경변수로, 애플리케이션이 실행되는 현재 환경을 지정
서버 사이드에서 활용되며 코드 최적화, 디버깅 메시지 여부, 개발도구 활성화에 쓰인다.
ex) NODE_ENV = production으로 설정되면, 개발용 경고를 비활성화하고 성능최적화를 위한 조취를 취한다.
MODE
Vite 빌드모드, 특정모드에 따라 다른 플러그인 ,설정, 환경변수에 접하게 된다.
차이점
NODE_ENV: 애플리케이션 실행환경
MODE: 빌드 프로세스
10.0.32.23:18800/demo/maven:3.6.3-openjdk-8
"scripts": { "dev": "vite", "build": "tsc && vite build", "build-dev": "tsc && vite build --mode development", "preview": "vite preview", "storybook": "storybook dev -p 6006", "build-storybook": "storybook build" }
Ruby
복사
# 기본 이미지 FROM node:20.11.1-alpine as build-stage WORKDIR /app ARG BUILD_MODE=production ENV NODE_ENV=${BUILD_MODE} COPY package.json yarn.lock ./ RUN yarn set version berry && yarn install COPY . . RUN if [ "$BUILD_MODE" = "development" ]; then \ yarn build-dev; \ else \ yarn build; \ fi # Nginx 스테이지 FROM nginx:alpine COPY --from=build-stage /app/dist /usr/share/nginx/html EXPOSE 80 CMD ["nginx", "-g", "daemon off;"]
Ruby
복사
docker build --no-cache --build-arg BUILD_MODE=development -t react . docker build --no-cache -t react . docker run -d -p 80:80 --name react react
Ruby
복사

목차

NOTE