Vue와 스프링부트(Spring Boot) 연동/연결하기

---

Vue와 Spring Boot 연동/연결하기

Vue와 Spring Boot를 연동하는 방법은 크게 2가지가 있습니다.

1. Spring Boot 프로젝트 내에 Vue 프로젝트를 생성하는 방법
   • 하나의 프로젝트로 관리할 수 있음 (작업은 분리해서 할 수 있음)
2. Vue 프로젝트의 빌드 결과를 Spring Boot 프로젝트의 특정 위치에 위치시켜두는 방법
   • Frontend와 Backend 프로젝트를 분리해서 관리할 수 있음

구글링해보면 1번 방법이 대부분이나 저는 프로젝트를 분리하여 관리하고 싶기 때문에 2번 방법으로 진행하였습니다.

본 포스팅 또한 2번 방법을 진행하는 방법에 대해 작성되어 있습니다.

 

---

사전 준비

아래 사항에 대해서 사전 준비가 완료되지 않으신 분들은 아래 링크를 참조하여 사전 준비를 진행합니다.

• [실습] 뷰(Vue.js)로 관리자/직원 전용 Web Application 개발하기 - 프론트엔드(Font-end) 환경 구축하기
• [실습] 스프링부트(Spring Boot)로 관리자/직원 전용 Web Application 개발하기 - 백엔드(Back-end) 환경 구축하기

 

---

연동 방법

Vue 프로젝트

Vue 프로젝트를 Spring Boot 프로젝트와 연동하기 위해 수정해야할 파일은 총 1개입니다.

 

1. 'vue.config.js' 파일에 outputDir에 대한 코드를 추가합니다.

• 경로: {프로젝트 Root 폴더}\vue.config.js
• 코드 설명:
  
  • outputDir: Vue 프로젝트 빌드 결과 파일이 생성될 경로

좌: 변경 전 우: 변경 후

vue.config.js 파일의 전체 코드가 궁금하신 분들은 아래 더보기를 클릭해주세요.

const { defineConfig } = require("@vue/cli-service");
module.exports = defineConfig({
  transpileDependencies: ["vuetify"],
  outputDir: "{자신의 Backend 프로젝트 Root 폴더}/src/main/resources/static",
});

 

2. 구동 명령어인 'npm run serve'가 아닌 'npm run build'를 명령어로 입력 후 정상적으로 명령어가 수행하는지 확인합니다.

• npm run serve: 개발용 버전으로 웹에서 바로 실행해서 보기 위한 구동 명령어
• npm run build: 배포용 버전으로 빌드 결과 파일을 생성하기 위한 명령어

 

Spring Boot 프로젝트

Vue 프로젝트에 이어서 작업하기 때문에 넘버링도 이어서 표시합니다.

 

3. 1번에서 설정한 경로에 빌드 결과 파일이 생성되었는지 확인합니다.

• 파일 탐색기에서 확인한 경우

좌: 1번 설정 전 우: 1번 설정 후

• IntelliJ에서 Spring Boot 프로젝트를 오픈하여 확인한 경우

좌: Vue 프로젝트 빌드 결과물이 없을 때 우: Vue 프로젝트 빌드 결과물이 있을 때

 

4. 우측 상단에 위치한 'Run > Run '{프로젝트명}Application''을 클릭하여 Spring Boot 프로젝트를 구동합니다. 

 

5. 정상적으로 구동이 완료된 것이 아래와 같이 'Run' 창에서 확인이 된다면, Chrome에서 localhost로 정상적으로 Vue 프로젝트가 구동되는지 확인합니다.

• Run 창

• localhost:8080 접속 결과

 

 

---

References

• [Vue3] devServer proxy 설정하는 이유, 방법
• [SpringBoot][Vue] Spring Boot & vue 연동
• Vue.js + Spring Boot 프로젝트 연동하기