많은 블로그에서 Vue.js와 Spring Boot를 연동하는 방법과 필요성에 대해 쉽게 설명하고 있다. 그러나 나는 블로그들을 보며 한 가지 의문때문에 고생했다. 그 의문은 바로
Vue 프로젝트 안의 target 경로에 localhost를 넣으면 Vue를 어떻게 실제 서버에 빌드하지?
였다. Spring boot 프로젝트를 서버에 띄우면, 해당 서버 ip를 vue 프로젝트에 넣어야 하는 것 아닌가? 근데 왜 그런 블로그들이 단 하나도 없지? 라는 의문을 가지게 된 것이다. 결국 우선 로컬 환경에서라도 해보자 해서 쭉 따라했고, 어렵지 않게 로컬 서버포트에서 vue 프론트를 띄울 수 있었다.
여기서 그냥 한번 .jar 파일을 이용해 서버를 띄워봤는데, 신기하게도 정상적으로 서버에 프론트페이지도 올라간 것이었다.
생각해보니 원리는 꽤 단순했다.
1. Vue 프로젝트의 config.js 파일 수정
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true,
// build 경로 설정
outputDir: "../../IdeaProjects/spring.practice/src/main/resources/static",
devServer: {
// 프록시 설정
proxy: {
'/api': {
target: 'http://localhost:8080',
changeOrigin: true
}
}
}
})
딱 위처럼 수정하면 된다.
ouputDir에는 기존 스프링 프로젝트의 static 폴더를 찾아갈 수 있도록 상대경로를 넣어주면 된다. 또한 밑의proxy에도localhost로 위와 같이 넣어주면 된다. 다만 서버의 포트가8080이라면 2번처럼 vue의 포트번호를 수정해주는 것이 필요하다.
2. Vue 프로젝트의 서버 포트 변경
package.json폴더에서 아래와 같이 포트번호를 변경했다."scripts": { "serve": "vue-cli-service serve --port 9988", "build": "vue-cli-service build --port 9988", "lint": "vue-cli-service lint" },
3. 프론트 빌드
vue 프로젝트의 터미널에서
npm run build를 한다. 그렇게 되면 spring boot 프로젝트에서 아래처럼 vue 관련 파일들이 생성된다.
실제 서버를 배포하기 전 임시로 로컬 서버를 빌드하고localhost:8080등 으로 접속해서 내가 원하는 vue 페이지가 잘 나오는지 확인한다.
4. 서버 빌드
나는 aws 인스턴스에
.jar파일을 넣는 식으로 서버를 배포했는데, 어떠한 방식으로도 서버를 배포하면 로컬에서 테스트했던 대로 화면이 잘 뜨는 것을 확인할 수 있다.
정리
처음에 내가 우려했던 것은 결국 걱정할만한 일이 아니었다. vue프로젝트에서
localhost경로를 넣어준 것은 그냥 vue 프로젝트의 파일들을 spring boot 프로젝트에 넣어준 것이었고, 그config.js파일의 역할은 거기서 끝난 것이었다!! 그 이후로는 그냥 서버 빌드가 전부였던 것이다..
나와 같은 고민을 하는 사람들에게 도움이 될까 글을 정리해 보았다.
