change vue.config.js
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
// npm run build 타겟 디렉토리
outputDir: '../src/main/resources/static',
// npm run serve 개발 진행시에 포트가 다르기때문에 프록시 설정
devServer: {
// 프록시 설정
proxy: {
'/summoners': {
target: 'http://localhost:8000',
changeOrigin: true
}
}
}
})vue 서버에 /summoners로 시작하는 요청이 오면 http://localhost:8000/summoners로 프록시 되어 전달시켜주는 방식입니다. 위와 같은 방식으로 spring boot 서버로부터 데이터를 가져올 수 있습니다.
outputDir 의 경우는 vue.js 파일을 spring boot의 index.html로 생성시켜주어 spring boot만 동작시켜도 vue.js를 사용할 수 있도록 합니다. 해당 방식을 사용하지 않는다고 했지만, 경험해보고 싶어서 추가했습니다.
3000 port로 구동중인 vue 서버(localhost:3000)에 /summoners로 시작하는 요청을 보내면 localhost:8000/summoners로 보낸 요청과 같은 응답을 주는지 확인해보겠습니다.
8000 Port와 3000 Port 같은 응답을 보내주는 것을 확인할 수 있습니다.
참고 문서