Nginx React Springboot 연동

목차

• Spring boot ( gradle )로 Rest api 생성
• React 설치
• React proxy 설정 및 api 호출
• React build 파일로 nginx 연동

---

1. Spring boot 로 Rest api 생성

https://start.spring.io/   를 사용해 스프링 프로젝트 생성

OS	Window
port	8080

1-1. 의존성 설정

1-2. HelloController.java 작성 ( 간단한 Rest Controller를 작성합니다. )

작업 후 테스트 결과

잘 작동되는 모습입니다.

---

2. React 설치

react는 vm을 이용해 설치 하였습니다.

 

테스트 환경

OS	Ubuntu18.04
node	v14.17.1
npm	6.14.13

2-1. 아래 명령어를 통해 최신 버전의 nodejs를 설치합니다.

$ curl -sL https://deb.nodesource.com/setup_14.x | sudo -E bash -

2-2. nodejs 설치

$ apt-get install -y nodejs

2-3. npm 설치

$ apt-get install npm

2-4. nodejs, npm 버전 확인

2-5. npm install 시 에러 날 확률이 높아 실행시켜줌

$ apt-get install build-essential

2-6. create-react-app을 사용해 react 프로젝트 생성

$ npm install -g create-react-app

$ create-react-app --version ( create-react-app 버전 확인 )

$ create-react-app task
$ cd task

$ npm start

ubuntu 서버의 3000번 포트로 접속하면 리액트 앱이 잘 실행됩니다.

3000번 포트가 닫혀 있으면 열어주도록 합니다.

iptables -I INPUT 1 -p tcp --dport 3000 -j ACCEPT

---

3. React proxy 설정 및 api 호출

react에서 axios를 사용하여 api 호출 시에는 CORS 이슈가 있습니다.

프록시 설정을 통해 해결해 보도록 하겠습니다.

 

CORS와 Proxy에 대해서는 아래를 참고해 주세요.

CORS 이슈란??

 

CORS( Cross-Origin Resource Sharing )는 클라이언트와 서버의 포트가 다른 상태에서 클라이언트 측에서 서버 측으로

무언가를 요청했을 때 브라우저가 보안상의 이유로 요청을 차단하는 문제입니다.

 

ex) 위에서 만든 backend rest server의 port는 8080, 우분투 서버(frontend server )의 port는 3000번일 때 보안상의 이유로 차단됨.

 

위 문제를 해결하기 위해 Proxy( 프록시 )설정을 활용해보도록 하겠습니다.

 

 

Proxy( 프록시 )란??

 

프로토콜에 있어서 대리 응답이라는 개념으로 이해를 하면 쉽습니다.

 

위와 같이 192.xxx의 Ip를 갖는 유저가 존재할 때 유저가 인터넷에 어떠한 요청을 하게 되는 경우  IP가전 달이 됩니다.

 

인터넷에서 유저의 IP를 받을 때 프록시 서버가 임의로 유저의 IP를 변경할 수 있습니다.

인터넷 측이 유저의 실제 IP를 알 수 없도록 하는 것이 프록시 서버의 역할입니다.

 

또한 클라이언트 측에서 데이터를 보낼 때 프로시 서버에서 데이터를 바꾸고 서버 측에 전달할 수도 있습니다.

반응형

3-1. 프록시 설정을 통한 CORS 이슈 해결

react 프로젝트 최상단으로 가서 아래의 패키지를 설치합니다.

$ npm install http-proxy-middleware --save

3-2. 이후 src 폴더 아래 setupProxy.js란 파일을 생성 후 아래와 같이 작성합니다.

7줄 소스 부분의 target의 value 값은 backend 서버의 포트로 지정해 줍니다.

 

3-4. 클라이언트 소스 쪽 수정 ( App.js )

backend server에서 만든 api 2벌을 호출해 보았습니다.

 

여기까지 했으면 npm start 후에 접속해보도록 합니다.

 수정한 대로 잘 나오는 모습.

---

4. React build 파일로 nginx 연동

 

이제 위에서 생성한 결과물들로 nginx와 연동하여 실행해보도록 하겠습니다.

 

react를 설치한 서버에서 같이 nginx를 설치해보도록 하겠습니다.

 

먼저 웹서버 ( Nginx )는 빌드된 파일을 사용하기 때문에 react 프로젝트의 빌드 산출물을 만들어 놔야 합니다.

 

4-1. task 프로젝트( react 프로젝트 이름 ) 상단에서 아래 명령어 실행.

$ npm run build

뭔가 성공적이라고 나왔습니다.

 

4-2. nginx 설치 ( nginx가 없는 분들은 설치해 주시기 바랍니다. )

$ apt-get install -y nginx

4-3. nginx 설정 파일 수정

우분투 서버의 /home/revision/html 을 root폴더로 설정하였습니다.

 

심볼릭 링크를 생성합니다. ( 4-1 에서 build 한 후 폴더를 매핑시켜줍니다. )

api 라우트에 대해 proxy pass 설정을 해줌. ( backend server의 8080 포트로 매핑 )

nginx 문법 검사 후에 재시작해줍니다.

$ service nginx configtest

$ service nginx restart

 

전 윈도우 환경에서 도메인 주소로 들어가고 싶어서 window hosts 파일에 task.react.wiro.kr 을 우분투 서버로 연결할 수 있도록 추가하였습니다.

window hosts 파일 추가하는 방법은 구글링 하면 많이 나옵니다.

크롬 브라우저에서  task.react.wiro.kr 로 접속하면 App.js 에서 작성했던 내용대로 나오는 모습을 확인할 수 있습니다.

---

여기까지 Spring react nginx의 연동을 해보았습니다.

 

열심히 봐주셔서 감사합니다.