Springboot&Vue.js 연동

베하~~~ 안녕하세요 여러분! 일단고 팀입니다!!

즐거운 5월을 보내고 계신가요?

이번주는 Backend를 담당하는 Springboot와 Frontend를 담당하는 Vue.js를 연동하는 방법을 알아보겠습니다.

저만 따라오면 아주 쉽게 연동할 수 있어요. 화이팅!

---

1. Spring boot 프로젝트 생성

저는 IDE로 Intellij IDEA (Ultimate)를 사용할게요.

Community Edition을 사용하고 계시다면

https://start.spring.io/

해당 링크를 통해 프로젝트를 생성해주세요!

 

Dependencies는 간단하게 Spring Web만 추가할게요.

 

2. Vue.js 설치

Vue.js CLI 설치 방법은 아래 링크를 참고하세요.

https://btcd.tistory.com/1064

[Vue.js] Vue.js 환경 구성하기

 

Command Propmt를 열어볼게요!

Vue.js 프로젝트를 생성하기 위해 Springboot 프로젝트의 최상위 폴더에서 vue create <vue 프로젝트명>을 입력합니다.

그러면 Vue 옵션을 선택할 수 있는데, 저는 Default ([Vue 2])를 선택할게요.

생성이 완료되면 아래 사진처럼 폴더가 새로 생긴 것을 확인할 수 있어요.

 

3. Spring boot와 Vue.js 연동하기

HelloController 작성

연동 결과를 서버에 접속하여 확인하기 위해 HelloController를 작성해볼게요.

src/main/java/peristalsis.ildango아래에 controller 패키지를 생성하고, controller 패키지 안에 HelloController 클래스를 아래와 같이 생성합니다.

package peristalsis.ildango.controller;

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

@Controller
public class HelloController {
    
    @GetMapping("/")
    public String hello(){
        return "index.html";
    }
}

★   / 경로로 접속했을 때 Vue.js 빌드에 의해 생성되는 index.html을 반환합니다.

 

서버 포트 변경

Vue.js의 포트와 충돌을 방지하기 위해 서버의 포트를 80으로 변경할게요.

src/main/resources/application.properties 에 다음을 추가합니다.

server.port=80

 

Vue.config.js 파일 수정

Vue 프로젝트를 빌드하여 생성되는 파일들이 Spring Boot 프로젝트 내 /src/main/resource/static 하위로 빌드되도록 설정하겠습니다.

frontend/vue.config.js 파일에 아래 코드를 입력합니다.

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

 

Vue 프로젝트 빌드

터미널을 열어서 Spring boot 프로젝트 내의 Vue 프로젝트로 이동하여 npm run build를 입력합니다.

그 결과로 src/main/resources안에 index.html이 생긴 것을 확인할 수 있어요.

 

연동 확인 (서버 접속)

Spring boot의 내장 톰캣을 실행하여 서버를 켜줍니다.

잘 실행되었습니다.

 

이제 브라우저에서 localhost:80으로 접속하면!

잘 연동된 것을 확인할 수 있습니다.

 

 

그럼 다음에 다시 만나요!!