Vue.js + SpringBoot 연동 설정

1. 스프링부트 프로젝트 파일을 만든다. (springboot)

2. springboot의 루트에 VueCLI로 Vue프로젝트(Front용)를 만든다. (vue)

3. vue의 루트에 vue.config.js를 만든다. 내용은 아래와 같이 작성한다.

module.exports = {
  devServer: {
    port: 8083,
    proxy: {
        '^/': {
            target: 'http://localhost:8080' //springboot쪽 서버
            changeOrigin: true // 기본 베이스 URL을 변경할지 여부
      }
    }
  },
  outputDir: "../src/main/resources/static", // 빌드가 완료 된 파일을 생성할 위치
}

4. Springboot와의 프록시 설정과 포트 변경은 완료됐다.

 

이렇게 설정하면 Front쪽은 Node.js 서버로, Back쪽은 스프링부트의 내장 웹서버로 나눠서 동작시킬 수 있다.

그래서 두 개의 서버를 켜 놓고, 앞단 작업을 바로바로 확인하며 효율적으로 작업할 수 있게 된다.

 

* 협업할시에는 node_modules는 gitignore설정을 하는 게 좋다.

어차피 디펜던시 개념이라 알아서 다운받음...

 

~ 여기까지가 기본 연동과정이고, data의 출력까지 확인해보려면..... ~

 

5. 커맨드 창을 열고 vue위치로 가서 'npm install axios'로 엑시오스를 다운로드 한다.

6. springboot쪽에서도 json관련 dependency를 추가한다.

https://mvnrepository.com/artifact/org.json/json

 

7. 서버에서 @ResponseController어노테이션을 이용해(혹은 @ResponseBody) 요청할시 json데이터를 리턴하게 한다.

 

8. front쪽 data를 받을 vue에 axios를 임포트하고, 

import axios from 'axios'

export default {

			.........

methods: {
   test : function() {
     axios.get("/test")
     .then((res => {
       console.log(res.data);
       this.name = res.data.name;
       this.day = res.data.day;
     }))
    }
  },
  			.........

 

위와 같은 방식으로 데이터를 가져온다.

 

+ CORS문제가 생길 수 있으므로, 서버를 관리할 수 있는 상황에서는

springboot쪽에 아래와 같은 클래스를 작성해놓는다.

front에서 프록시 설정을 잘 해뒀으면 상관없다!

@Configuration
public class WebConfig implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**").allowedOrigins("http://localhost:8083");
    }
}