ec2 리눅스 리액트 스프링부트

Question

제가 nginx로 리액트 빌드 파일을 ec2에 올리고 스프링을 ec2에 올리는데 빌드도 정상적으로 되는데 , 리액트에서 백으로 요청할 때 자꾸 이런식으로 xhr.js:251 GET http://localhost:8080/api/duplicate? net::ERR_CONNECTION_REFUSED 오류가 나네요 ㅜㅜ ec2에 올리기 전에는 오류가 안났는데, nginx.conf가 문제일까요..?설정파일과 ec2 인바운드 규칙 , properties 파일 함께 첨부할게요!! 선배님들 도와주세요&#43;배포하기전에 리액트에서 프록시 설정은 했습니다.application.properties 파일 server.address&#61;localhost server.port&#61;8080 *** 생략~nginx 설정 파일 ~ &#34;/etc/nginx/sites-available/PlantFrontend.conf&#34; 19L, 677B 18,1 All server { listen 80; location /{ root /etc/client/**/build; index index.html index.htm; try_files $uri $uri/ /index.html; } location ^~ /api { proxy_pass http://localhost:8080; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header Host $http_host; } }

Gear · Answer

xhr.js:251 GET http://localhost:8080/api/duplicate? net::ERR_CONNECTION_REFUSED이게 콘솔에 보이는 내용인가요?요청을 잘못 하신 것 같네요.const getDuplicates = async () => { const response = await fetch("/api/duplicate"); return response.json(); }이렇게 해야 하는 것을export const API_SERVER = "http://localhost:8080";import { API_SERVER } from "~/constants"; /* 생략 */ const getDuplicates = async () => { const response = await fetch(API_SERVER + "/api/duplicate"); return response.json(); }이런 식으로 하신 게 아닐까 싶습니다.리액트에서 프록시 설정했다고 하셨는데, 그건 이렇게 배포할 때 쓰는 것이 아닙니다.webpack dev server에서 사용되는 설정을 하신 것일겁니다.빌드 결과가 html, css, js 파일이므로, 빌드 결과에는 프록시 같은 것을 적용할 수가 없습니다.추가 내용 1http://localhost:8080/api/duplicate로 요청하도록 하여 배포하면 이런 문제가 생깁니다.문제 A│사용자│ ──(요청)──> │localhost:8080│──> { Error }사용자 PC에는 8080 포트로 띄운 WAS가 없으므로 응답 불가 (질문자님과 같은 상황 발생)리액트로 개발 할 때 npm run dev 같은 명령어를 통해 웹 브라우저에서 바로 확인 해가며 개발 하잖아요?그게 빌드 도구(가령 웹팩)에 있는 개발 서버를 실행하는 것입니다.개발 서버를 보통 3000 포트로 실행 할텐데, 그럼 http://localhost:3000이 개발서버 접속 주소가 되겠지요그렇게 접속한 페이지에서 스키마(http://), 도메인(localhost:3000)을 생략하고 /api/duplicate로 요청하게 되면 하면, 접속한 페이지의 것으로 전송이 됩니다.그러니까 http://localhost:3000 에다가 /api/duplicate에 대한 요청을 하게 되겠지요.예시개발 서버: 3000 포트, http로 구동 중WAS: 8080포트, http로 구동 중[상황 1]http://localhost:3000에서 접속하여 http://localhost:8080/api/duplicate로 요청 시│사용자│ ──(요청)──> │WAS(localhost:8080)││사용자│ <──(응답)────┘개발 시에는 문제 없겠지만* 그대로 배포 시 앞선 문제(문제 A)가 발생* 사실 문제가 있을 수 있긴 한데(SOP) 여기선 생략상황 1의 문제 해결을 위해서는 배포 시 http://localhost:8080 대신 https://도메인 과 같은 식으로 변경해서 빌드 해야 함[상황 2]http://localhost:3000에서 접속하여 /api/duplicate로 요청 시│사용자│ ──(요청)──> │개발 서버(localhost:3000)│──> { Error }개발 서버에는 /api/duplicate에 대한 요청을 처리하는 기능이 없음개발 서버에 프록시 설정을 한 경우프록시 설정을 해두면 개발 서버에서 WAS에게 다시 요청하는 식으로 처리를 맡겨버립니다.http://localhost:3000에 접속하여 /api/duplicate로 요청 시│사용자│ ──(요청)──> │개발 서버(:3000)│──(요청)──> │WAS(:8080)││사용자│ <──(응답)── │개발 서버(:3000)│<──(응답)────┘하지만 리액트 빌드 결과는 html, css, js 파일이므로, 위와 같이 프록시 처리를 해 줄 서버가 없습니다.그래서 질문자님이 하신 것과 같이 nginx에서 프록시 설정을 해두는 것이죠:location ^~ /api { proxy_pass http://localhost:8080; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header Host $http_host; }│사용자│ ──(요청)──> │Nginx │──(요청)──> │WAS││사용자│ <──(응답)── │Nginx │──(응답)────┘

ec2 리눅스 리액트 스프링부트

1개의 답변

Q&A 목록