vue vite + spring boot 통합으로 연결하기

프로젝트 동작 과정:
1. Spring Boot 프로젝트의 `static` 디렉토리에 Vue.js 프로젝트를 빌드한 결과물을 생성합니다.
2. 사용자가 웹 페이지에 접속하면, Spring Boot 프로젝트 내의 `static` 디렉토리에 있는 Vue.js 빌드 결과물이 실행됩니다.

 

 

조건:

Spring 프로젝트와 Vue 프로젝트는 같은 폴더 안에 위치해야 합니다.

프로젝트 구조:

project
├── spring
└── vue

 

 

vue

vite.config.js

   build: {// 빌드 결과물이 생성되는 경로
        outDir: '../spring/src/main/resources/resources/static'
    },
    server: {
        proxy: {
            '/api': {
                target: 'http://localhost:8081',
                changeOrigin: true,
                rewrite: (path) => path.replace(/^\/api/, '')
            }
        }
    }

 

vite

• webpack을 대체할 수 있는 번들러
• Vue 3에서 권장하는 번들러이며, Vue 창시자 Evan You가 만든 오픈소스

 

npm run dev 서버 띄워 확인 후 

npm run build 

 

 

Spring boot 

static(폴더 생성해줌) 하위에 vue 소스 파일들이 생겼다.

 

 

Spring Boot + Vue.js

1. build 간편화

Vue.js로 만든 프론트엔드 구성 변경 시, 매번 백엔드(Spring Boot)를 빌드하고, 빌드 결과물을 Spring Boot 리소스 디렉토리에 직접 이동시키는 번거로움이 있습니다. 이러한 불편함을 줄일 수 있는 방법을 도입합니다.

 

2. 배포의 간편화

Vue.js 서버와 Spring Boot 서버를 각각 별도로 운영하면 배포 환경이 복잡해질 수 있습니다. 이러한 문제를 해결하기 위해, Spring Boot 서버 하나만으로 통합된 배포 환경을 구성합니다. 이를 통해 서버 운영을 단순화하고 배포를 더 쉽게 할 수 있습니다.

 

참고

https://velog.io/@wooryung/Spring-Boot%EC%99%80-Vue.js-%EC%97%B0%EB%8F%99%ED%95%98%EA%B8%B0

https://ohrora-developer.tistory.com/25