Kakao 소셜 로그인: Local 환경에서는 되고, S3 + Cloudfront 배포 후는 안되는 문제 해결

카카오 로그인 redirect URI 이슈를 3일간 붙잡고 있던 기록을 푼다..

 

로컬에서 redirect URI의 경로를 /auth/callback으로 설정했을 때 정상적으로 동작했다.

AWS S3와 CloudFront로 배포했을 때 redirect URI를 인식하지 못해 404 에러가 발생했다.

2가지 원인을 추측했다.

1. 정적 웹 호스팅으로 S3에 배포했기 때문에 카카오 소셜 로그인을 사용할 수 없다.
2. 경로를 인식하지 못한다. 리액트 라우터 문제일 수 있다.

CloudFront를 처음 다뤄보았기 때문에 구글링을 엄청 했다.

퇴근 전에 다른 개발자분께 조언을 받아 2 가지 솔루션을 받았다.

1. BrowserRouter 대신 HashRouter를 사용해보라. URL이 복잡해질 수 있지만 이 방법으로 해결한 경험이 있다.
2. 다른 배포 플랫폼을 써보라. (Vercel, Netfily..)

업무를 주말까지 업고 갔다.. 그 결과,

1. Kakao Developer에서는 fragment(#)를 사용할 수 없었다. (빠른 포기..)
2. Vercel에서도 동일한 경로 문제 발생 → 다시 S3로 컴백

구글링을 통해 CloudFront에서 404 에러를 반환할 경우 /index.html로 리다이렉트하도록 설정하였다.

다른 경로 에러는 /index.html로 해결되었지만, 카카오 리디렉션은 여전히 문제.

인가 코드는 반환되지만,

Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.

 

JS 파일이 필요한데 HTML 파일이 반환되어 에러가 발생했다.

 

결국 구글링이나 지피티로도 해결되지 않아,

'원인 파악이라도 해보자..'라는 반포기한 마음으로 개발자 도구의 네트워크 탭을 키고, 하나씩 눌러보았다.

request URL에서 {도메인 주소}/auth/index.js 를 읽는 것이었다.

 

오잉? 내 프로젝트 파일에는 auth라는 폴더가 없는데?

 

그래서 Kakao Developer와 내 코드의 경로를 /auth-callback으로 변경해보았다.

build를 하고 조마조마한 마음으로 확인해보니, 드디어!!! 배포 주소에서도 카카오 소셜 로그인 성공!!!

 

리디렉션 경로의 앞부분을 파일로 인식하고 있었다. 진짜로 경로가 없었으니 404 에러가 떴던 것이다.

서버가 이 경로를 인식하면 문제없이 작동하지만, 클라이언트에서 경로를 처리하다 보니 에러가 발생한 것으로 이해하였다.

 

구글링으로 찾아볼 때, 카카오 소셜 로그인이 로컬에서는 동작하지만 배포 후 404 에러가 발생하는 경우가 많았다.

카카오 측의 답변은 경로가 없다는 간단한 설명이었지만, 그게 맞았던 것이다..

 

이 이슈를 통해 웹 브라우저와 프레임워크의 특징을 조금 더 배울 수 있었던..뜻 깊다..

 

보통 리디렉션 경로를 /auth/kakao처럼 설정하는 경우가 많은데,

나와 같은 상황에서는 상위 폴더로 인식될 수 있으니, 굳이 /를 2개 설정하지 말길..