[web]spring, react 로 google 로그인 만들던 중 실수 모음

문제 요약

구글 로그인 후 /mypage로 이동했지만,
React에서 VITE_API_BASE_URL이 undefined가 되고,
이후 API 요청 실패 + Spring 서버 500 오류(Whitelabel Error Page)가 발생

문제원인해결

 

import.meta.env.VITE_API_BASE_URL 가 undefined	.env는 존재했지만 Vite가 인식하는 접두어(VITE_)가 아니었거나 빌드 반영 안 됨	VITE_API_BASE_URL로 변수명 변경 → npm run build 다시 실행
구글 로그인 시 Invalid credentials	테스트 사용자 미등록, 동의 화면 미설정	Google Cloud Console에서 본인 계정 등록 + 앱 게시
/api/user/me 요청이 404	Spring 서버가 요청을 처리하지 않고 React에 넘겨버림	ReactForwardController에서 /api/** 제외
React 콘솔 로그 안 나옴	React 앱 자체가 실행되지 않음	빌드 후 결과물을 Spring static/ 폴더에 복사 안 했거나, 잘못된 빌드
Spring 500 오류 (Ambiguous handler methods)	/ 경로를 처리하는 Controller가 두 개 있었음 (HomeController와 ReactForwardController)	한쪽 제거 또는 경로 변경 (/api/... 등으로 분리)

 

1. React와 Spring의 경로 충돌

• / 경로는 React 앱의 진입점이자 Spring 컨트롤러의 루트이기도 함
• @GetMapping("/")이 여러 곳에 존재하면 Spring이 어떤 걸 쓸지 몰라 500 오류 발생

2. Vite의 환경 변수는 VITE_ 접두어만 인식

• CRA(Create React App)의 REACT_APP_과는 다름
• 이걸 모르고 .env에는 제대로 입력했는데, undefined로 로그 찍힘

3. React 빌드 파일은 정적이라 새로 빌드해야 반영됨

• npm run build 후 cp -r dist/* ... 안 하면 구버전이 계속 로드됨

4. 구글 로그인은 “테스트 사용자” 없으면 로그인 자체가 거부됨

• 앱이 테스트 중일 때는 허용된 사용자만 로그인 가능
• 게시하지 않으면 일반 유저는 로그인 시 무조건 실패

요약

Spring + React 함께 쓸 때	@GetMapping("/")는 한 곳에만!
Vite에서 환경 변수 쓸 때	.env는 VITE_ 접두어 필수
빌드 후 배포할 때	npm run build → cp → Spring 재시작
Google 로그인 통합	리디렉션 URI 등록 + 테스트 사용자 등록 + 동의 화면 설정
개발 vs 배포	npm run dev: React 독립 / npm run build: Spring에 통합됨