Vue.js와 SpringBoot 연동 하는법을 배워보았다.
# 연동 하는이유
SpringBoot와 Vue.js가 연동하지 않으면
Vue.js를 이용해 만든 클라이언트 쪽 페이지의 구성을 바꿀때 마다 매번 build를 하고 build결과물을 SpringBoot 쪽의 html 페이지쪽인 resource/static쪽으로 매번 이동 시켜줘야해서 개발 할때마다 성가시게 된다.
개발환경에서는 서버 두개(SpringBoot, Vue.js) 켜서 port 두개로 진행해도 상관 없을테지만, 배포시엔 서버를 두개나 두기엔 곤란하다. 그렇기에 실제 배포환경에선 연동을 통해 Vue.js의 빌드 결과물의 목적지를 SpringBoot의 resources/static으로 맞추고, 실 서버는 SpringBoot 서버 하나만 두게 할것임.
#연동방법
Proxy = 중계인
Proxy 서버라는 것을 활용한다. 이것은 MSA 든지 지금 Vue js든지 사용하는데,
서로 연결점이 없거나 보안상의 이유로 직접 통신할 수 없는 외부 네트워크들을 간접적으로 연결시키는 중계인 역할을 한다.
SpringBoot의 백엔드 서버와 Vue.js의 프론트엔드 서버를 연결하기 위해선 이와 같은 Proxy가 필요하다.
사용자가 프론트엔드 서버로 접근해서 리소스를 요청하면 프록시는 이 요청을 백엔드로 연결시켜 요청을 전달한다.
1. SpringBoot를 켠다. 포트 번호 겹치면 실행이 안되기에 application.yml에 port를 바꿔주자. 나는 8055로 했다.
2. Vue.js를 켠다.
해당
cmd
cd 위치에서
npm run serve
해당 Vue.js의 port번호는 8081.
3. vue.config.js를 에디터기 또는 vim으로 열어서 안에 내용을 적어주자.
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true,
outputDir: "../src/main/resources/static", // 빌드 타겟 디렉토리
devServer: {
proxy: {
'/spring-vue': {
// '/spring-vue' 로 들어오면 포트 8055(스프링 서버)로 보낸다
target: 'http://localhost:8055',
changeOrigin: true // cross origin 허용
}
}
}
});- transpileDependencies: true
- 이 옵션은 Vue CLI에서 Babel 트랜스파일러를 사용하여 프로젝트의 종속성을 트랜스파일할지 여부를 설정하는 옵션이다.
- Vue.js 프로젝트에서 ES6 이상의 문법을 사용하는 외부 라이브러리를 사용할 때.
TypeScript를 사용하여 프로젝트를 개발하고 있을 때.
프로젝트에서 사용하는 라이브러리나 모듈이 ES6 이상의 문법을 사용하고 있을 때.
이 옵션을 설정함으로써 Vue CLI는 이러한 종속성을 트랜스파일하여 프로젝트에서 사용할 수 있도록 해준다.
- outputDir
- Vue.js에서 만든 빌드의 결과물을 SpringBoot 서버쪽의 resource/static에 만들도록 설정해준것.
- devServer
- 개발환경에서의 서버를 설정.
- 개발 환경에선 프록시로 데이터를 Vue.js 서버에서 SpringBoot로 넘겨주는 것, 실제 빌드/배포 시엔 설정해둔 outputDir를 통해 Vue.js 빌드 결과물을 SpringBoot쪽의 경로로 내보내고 SpringBoot 서버 하나만 배포한다.
- proxy
- /spring-vue라는 경로로 접근하면, target(SpringBoot 서버)으로 요청을 넘김.
- changeOrigine : true
- CORS 도메인이 다르거나 아이피 주소가 다른 곳을 교차 출처 될 수 있도록 허용 푸는것. 원래는 콘솔창에서 CORS 에러라고 하면서 기본적으론 막혀져있다. 그것을 풀수 있게 해주는 옵션.
# 테스트
SpringBoot
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
@Controller
@RequestMapping(value = "/spring-vue")
public class MainController {
@RequestMapping(value = "")
public String frame() {
return "main/main";
}
}
main.html
<!DOCTYPE html>
<html lang="ko" xmlns:th="http://www.thymeleaf.org">
<head>
<title>Vue.js Sample</title>
</head>
<body>
<div id="app">
{{ message }}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el: "#app",
data: {
message: "Hello Vue.js!"
}
});
</script>
</body>
</html>
# 결과
Vue.js (URL)
위 처럼 SpringBoot 와 Vue.js가 연동 된다.
'개발 > vue.js' 카테고리의 다른 글
| [vue.js] TypeError: (0 , i.openBlock) is not a function 에러가 뜨면서 vue-resizable 적용 안될시 에러 (0) | 2024.03.07 |
|---|---|
| [vue.js] 각종 에러 해결법 (npm ERR! code 1[node-sass]) (0) | 2024.03.07 |
| [vue.js] import 안에 해당 경로를 못 찾으면? (0) | 2024.03.07 |
| [Vue.js] 'vue-cli-service'은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는배치 파일이 아닙니다. 에러해결법 (0) | 2024.03.06 |
| [Vue.js] 설치 및 첫 셋팅 (0) | 2024.03.05 |
