[vue.js] Spring Boot & Vue.js 연동 (1)

개발환경

1. STS

2. @vue/cli 5.0.8

3. Spring Boot 2.7.14

 

연동방식

하나의 서버를 두어 두개를 통합하여 빌드후 배포하는 방식

vue.js 를 빌드하면 Spring Boot 내 프로젝트로 빌드파일이 생성되어 , Spring Boot 배포 파읽들과 함께 웹 서버로 배포하는 방식

 

1. 백엔드 Spring Boot 파일을 만든다(생략)

2. 프론트엔드 설정을 위해 VS code 를 실행

Open Folder 를 클릭해서 해당 Spring Boot 프로젝트 디렉토리를 열고

Ctrl + ` 를 이용해 터미널을 열어준다

vue create frontend

해당 명령어를 실행후 Default Vue3 을 선택한다

3. Open Folder 를 클릭하여 생성된 frontend 로 이동

4. 해당 디렉토리에서 다음 명령어를 실행한다

npm run serve

5. fronted 해당 경로로 들어가면 정상적으로 vue 서버 확인

package.json 스크립트 serve 에 --open 을 추가하면 서버 실행시 자동으로 화면이 오픈된다

6. 다음으로 vue 프로젝트와 Spring Boot 프로젝트 연동 

vue 프로젝트를 빌드하여 생성된 파일들을 Spring Boot 프로젝트 내 /src/main/resource/static 하위로 빌드되어 Spring Boot 프로젝트 실행시 생성된 Vue 프론트엔드를 보여줘야한다

7. vue 프로젝트 빌드

npm run build

8. STS  프로젝트 확인 

9. Spring Boot 프로젝트 실행