[트러블슈팅] 구글 로그인 404...

문제 발생

구글 로그인 후 계속을 누르면 인가 코드와 함께 콜백 URL 로 리다이렉트 되어야 한다.

근데 쿠버로 이전하면서 404가 뜨게 되었다.

이 그림은 OAuth의 흐름을 그림으로 그렸던 것인데 보자면 구글 서버에서 코드를 줄 때 프론트 서버에서 404가 뜬 것이다.

왜?

SPA의 라우팅 방식

전통적인 웹사이트는 /auth/google/callback 요청이 서버가 auth/google/callback.html 파일을 찾는다. 파일이 있으면 200, 없으면 404

하지만 우리는 React SPA로 구성되어서 index.html 밖에 없다.
그렇기에 모든 경로가 실제로는 index.html 하나인 것이다. index.html이 로드되면 JavaScript 가 URL을 보고 적절한 컴포넌트를 렌더링한다.

하지만 서버는 이를 모르기 때문에 /auth/google/callback 파일을 찾으려고 시도하면서 404가 뜨게 된다.

그래서 nignx에서 정적파일을 서빙할 때

location / {
	try_files $uri $uri/ /index.html; // 파일 없으면 index.html로

error_page 404 /index.html // 404 에러도 index.html로

이렇게 index.html 를 준다면 JavaScript가 적절한 페이지로 띄워준다.

왜 로컬에서는 문제가 없었을까?

Vite 개발 서버는 vite.config.js 가 자동으로 SPA 라우팅을 지원해준다.

export default {
	server: {
    	historyApiFallback: true // 모든 404를 index.html로
    }
}

이렇게 모든 404 에러에 대한 폴백으로 index.html을 연결해주기 때문에 로컬에서는 문제가 없었다.

해결

쿠버 환경에서 nignx에서 라우팅 설정이 빠져있었다.

ConfigMap 생성

nginx 마운트

spec:
	~~~
    ~~~
		volumeMounts:
          - name: nginx-config
            mountPath: /etc/nginx/conf.d
            readOnly: true
      volumes:
      - name: nginx-config
        configMap:
          name: frontend-nginx-config

Nginx 설정을 Pod에 주입시켰다.

이렇게 모든 요청이 index.html 을 향하게 되면서 404 에러를 없애고 JavaScript 가 안전하게 모든 요청을 처리할 수 있게 되었다.

결론

구글 OAuth 로그인 과정에서 404가 발생한 이유는 React 기반 SPA의 라우팅 특성 때문이었다.
SPA는 실제로 존재하지 않는 경로라도 모두 index.html에서 처리하지만,
Nginx는 이를 인식하지 못해 /auth/google/callback 파일을 찾으려다 404를 반환했다.

쿠버네티스 환경에서 Nginx 설정에

try_files $uri $uri/ /index.html;
error_page 404 /index.html;

을 추가해 모든 요청을 index.html로 리다이렉트하도록 수정함으로써 문제를 해결했다.

결국, SPA 라우팅에 대한 Nginx 설정이 빠져 있었던 것이 원인이었으며,
이 설정을 통해 프론트엔드가 정상적으로 구글 로그인 콜백을 처리할 수 있게 되었다.