Vue.js & Spring Boot 연동 및 개발환경 구축

• 지금까지 JSP와 HTML 기반으로 프론트엔드를 개발했는데, 이번에 새로운 프로젝트를 시작하면서 Vue.js로 프론트엔드를 구현해보고자 하여, 그 방법을 정리해보려고 합니다.
• Spring Boot와 Vue.js를 연동하는 방법은 크게 두 가지가 있습니다.
  • 프론트엔드와 백엔드 각각의 서버를 두고 백엔드에서 데이터만 조회하여 프론트엔드에서 보여주는 방법
  • 하나의 서버를 두어 두 개를 통합하여 빌드 후 배포하는 방법
• 필자는 하나의 서버로 진행할 예정이며, 그 방식은 Vue.js를 빌드하면 Spring Boot 내 프로젝트로 빌드 파일이 생성되며, Spring Boot 배포 파일들과 함께 웹 서버로 배포하는 방식입니다.
• 백엔드는 STS, 프론트엔드는 VS Code로 구축하여 통합할 예정이며, 이 과정을 진행하기 위해서는 우선 node.js 및 vue가 설치되어 있어야 합니다.

 

📌 개발환경

• STS(Spring Tool Suite) 4
• Visual Studio Code
• Spring Boot 3.1.1
• Maven

---

.📝 Spring Boot 프로젝트 생성

📜 Spring Initializr

• 먼저 Spring Initializr를 통해 백엔드를 담당할 Spring Boot 프로젝트를 생성해주었습니다.

• 기호에 맞게 설정을 마친 뒤 GENERATE 버튼을 클릭하여 프로젝트를 생성한 후, STS Workspace에 압축을 풀어줍니다.
• 일단 연동이 주 목적이기 때문에 이 외의 라이브러리는 추가하지 않았습니다. 추가로 사용할 라이브러리가 있다면 각자 추가하도록 합시다.

 

📜 HomeController

• 이후 적절히 패키지를 생성한 뒤 Controller를 구현해주었습니다.
• 해당 Controller는 URL 요청 시 Vue.js 빌드에 의해 생성되는 index.html을 리턴합니다.

package com.example.test.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;

@Controller
public class HomeController {

    @GetMapping("/")
    public String index() {
        return "index.html";
    }
}

---

📝 Vue 프로젝트 생성

• 이제 프론트엔드 설정을 위해 VS Code를 실행합니다.
• File → Open Folder를 클릭하여 위에서 생성한 Spring Boot 프로젝트 디렉터리를 열고, Ctrl + `를 통해 터미널 창도 열어줍니다.

• 이후 아래 명령어를 실행하여 vue라는 이름의 Vue 프로젝트를 생성해주었습니다.

> cd src/main
> vue.cmd create vue

• 즉, 이제 src/main/vue 폴더에서 프론트엔드 클라이언트 코드를 관리하게 됩니다.
• 보통은 프로젝트 루트 경로에 Vue 프로젝트를 구성해도 상관없으나 저는 src/main/java처럼 src/main/vue로 구성하는 방식이 마음에 들었습니다.

프리셋 선택

• 작업이 완료되면 아래 명령어를 순서대로 실행해봅니다.

> cd vue
> npm run serve

• npm run serve는 내 호스트에 뷰 프로젝트를 띄워주는 역할을 수행합니다. 쉽게 말해 현재까지 작성한 페이지를 미리보기로 띄워주는 기능입니다.
• 실제로 위 명령어를 실행한 뒤, 결과로 나오는 URL 주소로 접속하면 페이지가 잘 출력되는 것을 확인할 수 있습니다.

 

📜 Vue Configuration & Build

• 다음으로 Vue 프로젝트와 Spring Boot 프로젝트를 연동해야 합니다.
• 즉, Vue 프로젝트를 빌드하여 생성된 파일들을 Spring Boot 프로젝트 내 /src/main/resource/static 하위로 빌드하여 Spring Boot 프로젝트 실행 시 생성된 Vue 프론트엔드를 보여주어야 합니다.
• 이를 위해 vue.config.js 파일을 아래와 같이 수정해줍니다.

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  outputDir: '../resources/static', // Build Directory
    devServer: {
        proxy: 'http://localhost:8080' // Spring Boot Server
    }
})

• 스프링 부트 애플리케이션은 별다른 설정이 없으면 8080 포트를 사용하게 됩니다. 따라서, Vue 개발용 서버는 따로 설정해주지 않으면 자동적으로 8081, 8082, 8083... 포트를 사용하게 됩니다.
• Vue 프로젝트를 빌드하기 위한 명령어는 다음과 같습니다.

> npm run build

• 빌드 작업을 완료한 후 Spring Boot 프로젝트를 확인해보면 다음과 같이 static 폴더 하위에 Vue 프로젝트 파일이 생성된 것을 확인할 수 있습니다.

• 이후 Spring Boot 프로젝트를 실행하여 접속해보면 Vue로 생성된 화면이 출력되는 것을 확인할 수 있습니다.

• App.vue 파일이 메인 페이지에 해당하기 때문에 앞으로는 해당 파일에 코드를 작성해주면 됩니다.
• 그럼 이후 실행할 때, 해당 파일을 HTML로 컴파일하여 index.html 파일에서 이를 출력하게 됩니다.

---

📌 References

• https://jiurinie.tistory.com/102
• https://kdevkr.github.io/spring-boot-integration-vuejs/