[nginx] 리액트 + 스프링부트 프로젝트 배포

기존에는 스프링의 resource 내에 리액트를 위치시켜 빌드해 통합배포 했었다.

 

 

스프링 부트는 기본 포트로 8080을 사용하므로, 스프링 부트를 빌드하고 실행할 때는 8080 포트를 사용한다. 리액트는 3000번 포트를 사용하므로, 통합 배포 때는 리액트를 빌드하고 build 폴더를 스프링 부트의 resource 폴더에 넣어 스프링 부트를 빌드하게 된다. 이렇게 하면  8080번 포트로 스프링부트+리액트 통합 애플리케이션이 실행된다.

 

하지만 리액트측에서 카카오 로그인을 진행해서 콜백을 3000번 포트로 받아야 하는 경우가 있는데, 통합 배포를 해버리면 3000포트로 진입이 불가능 하다. 따라서 동시에 리액트측과 스프링부트측으로 라우팅과 url 매핑을 하려면 서버를 따로 두어야 한다.

 

nginx를 사용해 리액트를 배포했다. NCP 서버에 Nginx를 설치하고 nginx.conf를 설정했다. 

 

http {

    server {   					#3000포트에서 요청을 받음
      listen 3000;
      location / {
            root   /home/client/build;		#리액트의 build폴더 경로
            index  index.html;			#index파일로 index.html을 사용함
            try_files $uri $uri/ /index.html;
        }
            location /api/ {			# /api/ 요청은 http://localhost:8081로 프록시되어 
            proxy_pass http://localhost:8081;	#백엔드 서버로 전달
            
        }
            location /static/ {			#정적파일의 경로 지정. JS와 css 적용시에 사용
                    root /home/client/build/;
            }
        }
}

 

systemctl start nginx

 

java -jar /home/server/Clozet-0.0.1-SNAPSHOT.jar

 

nginx를 동작시켜 리액트 페이지를 동작시킨다. 또한 내장 톰캣을 이용하여 jar파일을 배포시킨다.