Google login 및 axios 문의

Question

안녕하세요. 강의 잘 들었습니다 강의 내용을 기존 프로젝트에 적용해 보려고 하는데요 몇가지 막히는 점이 있어서 문의드려요 1.  현재 프로젝는 ssr(넥스트)와 api서버 이렇게 2개로 구성되어 있는데 브라우저에서 api 서버로의 요청은 잘 동작하는데 서버 사이드에서 axios로 요청하게 되면 아래 에러가 발생하네요 export const getUser = async () => { const path = "user/my" ; const { data } = await axios . get ( `/api/ ${ path } ` ); console . log ( "getUser" , data ); return data ; }; connect ECONNREFUSED 127.0.0.1:80 2. 구글 및 소셜 로그인을 패스포트와 함게 사용하고 있는데 개발자 페이지에서 redirection url을 설정하도록 되어 있고 현재는 localhost와 배포시 https://서비스 주소 가 등록되어 있는데 도커를 사용할때는 에러가 발생하네요 400 오류: invalid_request Invalid parameter value for redirect_uri: Non-public domains not allowed: http://backend/api/auth/google/callback 검색을 해도 잘 안나와서 해결 방법이 있는지 궁금합니다.

최기홍 · Answer

1번도 관련 내용은 찾아서 억지로 해결은 했는데 약간 문제가 있네요.

https://stackoverflow.com/questions/59888240/next-js-server-side-api-call-returns-500-internal-server-error

localhost를 nginx 컨테이너의 ip로 하드코딩해서 변경했더니 되는데. 매번 생성시마다 ip는 고정되지 않고 변경되어서 수정해야하는 문제가 있습니다. 도와주세요~

최기홍 · Answer

2번은 해결 했습니다. 패스포트에서 콜백이  기존 "/api/auth/google/callback"  였는데 로컬호스트를 붙였더니  "http://localhost:3000/api/auth/google/callback" 해결됐네요. 왜 이렇게 되는건지는 여전히 잘 모르겠네요ㅠ 앞에 경로를 제외하면 왜 localhost:3000이 아닌고    http://backend 인걸까요? 그럼 프론트엔드에서도 요청이 nginx가 아니고 http://frontend로 가야할 것 같은데..

최기홍 · Answer

nginx 설정은 강의와 같게 하고 있습니다. # frontend : docker-compose 파일에서 사용할 이름 upstream frontend { server frontend: 3005 ; } # backend : docker-compose 파일에서 사용할 이름 upstream backend { server backend: 3000 ; } server { listen 80 ; location / { proxy_pass http://frontend ; } location /api { proxy_pass http://backend ; } location /sockjs-node { # 리액트 개발환경 에러 처리를 위한 코드 proxy_pass http://frontend ; proxy_http_version 1.1 ; proxy_set_header Upgrade $http_upgrade ; proxy_set_header Connection " Upgrade "; } }