개요

• 회사 프로젝트 중 테스트 서버와 실제 라이브 서버가 사용하는 api 서버가 각각 달랐다
• 테스트 서버에 반영되는 test 브랜치와 라이브 서버에 반영되는 main 브랜치에 build 시 .env 파일의 api 서버를 매번 수동으로 변경해야되는 어려움
  -> 휴먼 에러 다수 발생 (라이브 서버에 test용 api 서버를 연결한다던지..)
• 빌드 시 자동으로 .env 분기처리하는 방법 고안
• vite 기준

해결

vite 공식 문서 "환경 변수와 모드" 섹션 참고

1. .env.development 파일 추가

dev 모드 용

// .. 이하 중략
VITE_API_URL=https://test.api.server.kr/
VITE_MODE=dev

2. .env.production 파일 추가

prod 모드 용

// .. 이하 중략
VITE_API_URL=https://live.api.server.kr/
VITE_MODE=prod

• 차이1 : 환경변수 VITE_API_URL이 각각 다른 주소를 담고 있음
• 차이2 : 환경변수 VITE_MODE 이 각각 다른 mode value를 담고 있음

3. package.json 내 scripts 변동 사항

	"scripts": {
      	//.. 이하 중략
		"dev": "vite --mode development",
		"build:prod": "vite build --mode production", // prod 모드 빌드 실행
		"build:dev": "vite build --mode development" // dev 모드 빌드 실행
	},

• 기존 “build” → “build:dev” , “build:prod” 둘로 분기 처리
• --mode production은 .env.production에서,
  --mode develoption은 .env.development 파일에서 환경변수를 가져온다

정리

1. build 시

main 브랜치에서는 build:prod

test 브랜치에서는 build:dev

명령어로 빌드

2. CSS에서의 모드 별 분기 처리

• CSS 에서 모드 확인 방법
  • import.meta.env.VITE_MODE 환경 변수로 접근
    • return prod 혹은 dev
  • 아직 미완성된 기능 등에 적용

				// dev 모드에서만 보여주고 실제 production에서는 숨기고 싶을 경우
				div {
					display: ${import.meta.env.VITE_MODE === 'prod' ? 'none' : 'flex'};  
				}