spring boot + react + nginx 배포시 프록시 설정 문제

Question

react proxy 설정에 문제가 있어 질문 남깁니다. spring boot REST API는 내장 tomcat으로 8888 포트에 올리고,react는 nginx로 동일 ip 80 포트에 올렸습니다. react proxy 설정은 package.json에 &#34;http://IP주소:8888&#34;로 넣어주었고,로컬로 돌렸을때는 당연히 문제 없었고, 혹시나 api가 잘못 되었나 해서 spring boot 서버에 배포 후 postman으로 테스트 해보았는데 잘 동작했습니다.nginx config 설정은 아래와 같이 했습니다. upstream spring { server ip주소:8888; } server { listen 80; server_name ip주소; location / { root /var/lib/jenkins/workspace/BE/build; index index.html index.htm; try_files $uri $uri/ /index.html; proxy_pass http://spring; } } 이틀 꼬박 삽질했습니다........ㅜ &#43;&#43;제가 지금까지 시도한 내용들 추가해보겠습니다..1. 위의 내용 server 안에 <listen 8888;>추가해서 시도해 보았습니다. 이미 rest server가 8888을 먹고 있기 때문에 nginx에서 8888을 가져올 수 없었습니다. 8888 죽이고, nginx가 8888먹게 해준다음 rest 서버 배포하니, 배포가 안되었습니다. 당연..2. prefix 설정도 해보았습니다. 역시나 안됩니다. 위의 상태에서 / 로케이션 설정에 proxy_pass 빼주고, /api location 추가해서 그안에 proxy_pass 넣어주었습니다. 에러도 위의 config 설정과 동일한 에러로 나왔습니다.3. 브라우저 단에서 preflight 문제가 발생하는 것을 토큰인증하면서 배워서, spring interceptor에 option method는 통과하도록 설정도 해주었습니다.등등...많이 시도해보았습니다. &#43;&#43;&#43;jenkins를 도입하며 이런저런 시행착오가 많았습니다.그 과정에서 react와 spring boot를 어떻게 띄워줄지 지식이 없어 한참 헤맸었네요.boot는 내장 톰캣 덕분에 수월하게 배포했으나, react는 정말 하나도 모르겠더라고요다들 docker나 nginx를 사용해서 배포하시던데 저는 그냥 띄워주고 싶다는 생각에 무작정시도하다가서버가 있어야겠다는 깨달음을 얻어서 nginx를 부랴부랴 넣었습니다..배포 구조에 대한 이해가 모자르다보니 그냥 무작정 따라해서 이런 문제가 발생한듯합니다.....

Mux · Answer

발생하신 문제라는게 react에서 api 요청시 spring의 controller와 통신이 되지 않는 다는 말씀이신가요?

고기가가가 · Answer

넵! 맞습니다..8888포트로 request가 보내지는게 아니라, 80포트로 보내지네요.강제로 axios 커스텀 해서 넣어주면 잘 동작합니다.

안전라이딩 · Answer

server { listen 80; server_name ${ip주소}; location / { proxy_set_header X-Forwarded-Host $host:$server_port; proxy_set_header X-Forwarded-Server $host; proxy_set_header X-Forwarded-Proto $scheme; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_pass http://${ip주소}:8888; } }이렇게 한 번 해보세요.

고기가가가 · Answer

감사합니다! 그렇게 시도해봤었는데, nginx 재시작은 잘 되지만,웹상에서 404 떴습니다..

안전라이딩 · Answer

고기가가가 trailing slash 문제일 수도 있습니다.proxy_pass 주소에 추가함 해보세요.proxy_pass http://${ip주소}:8888/

고기가가가 · Answer

네네 위 방법도 혹시나 해서 시도 해봤는데 역시나 404가 뜹니다.비슷한 문제로 의심되어서 시도해보았던 내용 남겨봅니다..listen 포트를 써줄때 8888이 아닌, ${ip주소}:8888; 로 변경해서 시도해 보았으나, nginx를 재실행 해보면 역시나 8888포트를 이미 사용하고있다고 에러났습니다( tomcat이 이미 돌아가고 있었으니 당연한 에러라고 생각합니다.) 띄어쓰기, include파일로 만들어서 넣어보기 등등 시도해 보았습니다.

고기가가가 · Answer

react 쪽에서 동작하는것 같습니다..nginx 설정에 리엑트 파일만 띄우게 설정했어요.저는 nginx를 단순히 react를 띄워주는 웹서버 역할만 바라고 도입했어요..

안전라이딩 · Answer

저도 회사 개발용 docker network 에 리엑트로 만든거 하나 띄우고 프록시로 접근하게 하니 404 나네요.. ㅋㅋㅋ 해결하시면 공유 좀 부탁드립니다..

Mambo · Answer

API 경로를 따로 잡으시길 바래요. 예) /api { proxy_pass } 그리고 정적 파일을 처리할 때 root와 alias의 차이도 있으니 검색해보세요.

고기가가가 · Answer

nginx 프록시 설정에 문제가 있는줄 알고 nginx 프록시 설정쪽으로만 찾아보고 있었는데,간단한 해결 방법이 있어서 임시로 해결해 놓았습니다.리엑트 최상단에 axios baseURL 설정을 글로벌로 해주니 잘 동작합니다.물론, 좋은 해결방법은 아닌 듯 하지만 아직까지 근본적인 해결책을 못찾아서 임시로 동작하도록 해놓았네요..

spring boot + react + nginx 배포시 프록시 설정 문제

10개의 답변

#nginx.conf 목록