vue.js [spring boot와 연동] (2)

 

이전 포스팅에서 vue.js 프로젝트 생성을 마친 후

 

이번에는 Vue.js Dev Server Proxy 설정을 할 것이다.

 

proxy란  클라이언트가 자신(Proxy)을 통해서 다른 네트워크 서비스에 간접적으로 접속할 수 있게 해주는 컴퓨터 시스템이나 응용 프로그램을 말한다. 쉽게말해 대리로 통신을 수행하는 것이다.

 

설정을 통하여 Spring boot로 오는 요청을 Vue.js dev서버에서 프록싱해서 받고, 다시 전달하는 과정이다.

 

 

 

 

우선 frontend디렉토리로 가서 request모듈과, path모듈을 설치한다.

 

 

npm install request : request모듈 설치

npm install path : path모듈 설치

 

 

 

 

모듈 설치 후 Springboot 기본 서버 포트 8080을 8090으로 변경한다. (vue.js Dev 서버포트 : 8080)

 

 

 

 

 

 

 

frontend디렉토리 밑에 vue.config.js파일 생성.

 

 

 

 

 

 

 

 

Vue.js Dev 서버에서 locallhost:8080/api로의 요청을 받으면 8090으로 해당요청을 돌려준다.

 

vue.config.js

 

 

 

 

 

 

 

 

cmd창에 명령어 npm run serve를 입력하면 Vue.js Dev 서버가 실행된다.

 

 

 

Vue.js Dev서버 : locallhost8080,

Spring Boot 서버 : locallhost8090