♻️ 실행 환경 분리 및 Preview 기반 QA, 성능 검증 환경 구축

[daaoooy]

🛠️ 리팩토링 설명

• 프론트엔드 실행 환경을 분리하고 서버 환경과 독립적으로 조합 가능하도록 구성합니다.

✅ 리팩토링 필요성

• 기존에는 pnpm dev 환경에서 Lighthouse 성능 측정 및 기능 테스트를 함께 진행하고 있었습니다.
• 그러나 dev 환경 특성상 실제 배포 환경과 다른 번들/캐시/압축 상태로 인해 성능 지표의 신뢰도가 낮게 측정되는 상태였습니다.
• 특히 자바스크립트 번들 크기, 캐시 설정 관련 점수가 실제 배포 환경과 큰 차이를 보였고, 이를 계기로 프론트엔드 실행 환경과 서버 연동 구조를 재정비할 필요성이 발생했습니다.

기존 문제점

1. dev 환경에서 성능 측정 시 실배포 기준과 다른 결과 발생
2. dev 환경이 기능 개발 + QA 테스트 + 성능 검증 역할을 동시에 수행
3. 로컬 개발 서버 (5173) 가 QA 서버가 아닌 실제 운영 서버로 프록시되고 있는 상태
4. 3번을 원인으로, 개발 중 요청이 운영 서버로 직접 전송
5. 운영 데이터 오염 및 장애 가능성 존재
6. QA / 운영 환경 구분이 불명확
7. 성능 측정 결과 부정확

작업 목적

• 프론트엔드 실행 환경을 명확히 역할별로 분리합니다.
• Lighthouse 성능 측정 및 캐시 전략 검증을 실제 배포와 동일한 조건에서 수행할 수 있도록 합니다.
• QA 서버와 연동되는 안전한 테스트 환경을 확보합니다.

목표 환경

실행 환경	command	포트 / URL	연결 서버	목적
로컬 개발(Local Dev)	pnpm dev	localhost:5173	QA 서버 (qa.boost.ai.kr)	HMR 활성, 디버깅 최적화
로컬 프리뷰(Local Preview)	pnpm preview	localhost:4173	QA 서버 (qa.boost.ai.kr)	테스트, 성능 측정 대상
QA 배포(QA Deploy)	vercel	qa-boost.vercel.app	QA 서버 (qa.boost.ai.kr)	QA 팀 검증 환경
운영 배포(Production)	Main	boost.ai.kr	운영 서버 (api.boost.ai.kr)	실서비스 환경

목표 환경 변수 전략

• .env.development: 로컬 개발용 (HMR, QA 서버 연동)
• .env.preview: 로컬 Preview 테스트용 (빌드 결과 + QA 서버 연동)
• .env.production: 실배포용 (운영 서버 연동)

주요 변경 사항

• development / preview / production 환경 명확화
• VITE_FRONT_ENV, VITE_SERVER_ENV 도입
• 환경별 VITE_API_BASE_URL, VITE_REDIRECT_URI 분리 관리
• 실제 배포 번들 기준으로 성능 측정이 가능하도록 Preview 환경 도입
• 프록시 설정 재정비
• 환경 분리 구조에 맞춰 pnpm scripts를 추가·정비
• OAuth 테스트 환경 정리

완료 조건

• pnpm dev 실행 시 QA 서버로 프록시되는가? (운영 데이터 오염 방지)
• pnpm build && pnpm preview 실행 시 실제 배포와 동일한 번들 파일이 생성되는가?
• Preview 환경의 Lighthouse 성능 점수가 Dev 환경 대비 개선(정상화)되었는가?
• OAuth 콜백 URL이 각 환경별(localhost, vercel, production)로 정확히 매핑되는가?
• dev / preview / production 실행 시 사용되는 env 파일이 의도한 대로 분리되는가?

📌 참고 사항

Vite 공식 문서 (Environment Variables)
Lighthouse Performance Scoring
Vite Preview Command