[SpringBoot] Vue.JS + SpringBoot 연동하기

해당 내용에 추가하여 새롭게 글을 작성하였습니다.

부족한 부분은 여기 를 통해 확인 부탁드립니다~

[Vue.js] Vue + SpringBoot + Mysql 를 이용한 Todo 구현(1) - 프로젝트 구성하기

---

대부분 프론트엔트 프레임워크(vue.js, react.js 등)을 사용할 때에는 백엔드 구성을 Node.js를 사용합니다.

하지만, SpringBoot로도 백엔드를 구성하여 사용을 해보고자 하여 한번 적용해보기로 하였습니다.

 

해당 글에서는 SpringBoot + Vue.js 프로젝트 구성하는 방법에 대해 작성하였습니다.

 

SpringBoot는 Intelli J를 사용하였고, Vue.js는 VS Code를 사용하였습니다.(사실 인텔리제이에서 다 코딩이 가능합니다!!!  여기서는.. Eclipse 때 따로 사용했던 기억 때문에...)

기본적인 npm, vue는 설치가 되어있다고 가정하고 진행하였습니다.

---

1. 프로젝트 구조 및 간단한 동작 원리

1-1. 프로젝트 구조

• Vue 프로젝트에서 개발한 것을 빌드(Build)하여 결과물을 SpringBoot 프로젝트 내의 static 폴더에 저장합니다.
• 우측 이미지는 SpringBoot 프로젝트 내에서 Vue 프로젝트를 따로 생성한 이미지입니다.
• 좌측 이미지는 위 Vue 프로젝트를 build 할 때 SpringBoot 프로젝트 구조 이미지입니다.

1-2. 프로젝트 동작 원리

1. Vue 프로젝트 개발 후 Build -> SpringBoot(static 폴더에 생성)
2. SpringBoot 실행
3. 웹 페이지 접속(지정 경로) -> SpringBoot 프로젝트 내의 static 폴더에 생긴 Vue 결과물을 실행

2. SpringBoot 프로젝트 생성하기

- SpringBoot 프로젝트 생성하는 글은 이전 글을 참고해주세요.

- 프로젝트가 생성되었다면, resources -> static 아래에 디렉토리(원하시는 이름, ex: vue)를 생성하겠습니다.

- 해당 디렉토리는 vue 프로젝트 build 결과물을 저장할 디렉토리 입니다.

 

3. Vue.js 프로젝트 생성하기

- SpringBoot 프로젝트에 vue프로젝트를 개발할 디렉토리를 생성합니다.(해당 글에선 vue라고 사용하였습니다.)

- VS Code를 통해 해당 디렉토리로 이동하여 vue 프로젝트를 생성해보도록 하겠습니다.

- VS Code를 실행하여 SpringBoot 프로젝트를 열어 생성한 vue 디렉토리로 이동합니다.

  (~/~/경로/SpringBoot프로젝트/생성한 vue 디렉토리)

cd vue
(cd 이동할 디렉토리명)

- 아래 명령어를 통해 디렉토리에 vue 프로젝트를 생성합니다.

vue init webpack 프로젝트명
ex : vue init webpack vue-front)

• project name : 프로젝트 이름
• project description : 프로젝트 설명
• Author : 사용자
• Vue build : Runtime + Compiler 선택합니다.(아마도 아래는 실행만 해주는 옵션 같습니다.)
• Install vue-router : 라우터 설치(라우터를 사용하고자 하면 Y 를 선택합니다.)
• Use ESLint to lint youe code : ESLint 플러그인을 통해 코드 검증을 합니다.(해당 글에서는 N으로 사용을 안하였습니다.)
                                                  (Build 할때 너무 까다롭습니다....)
• Set up unit tests : 유닛테스트 설정(해당 글에서는 N으로 사용을 안하였습니다.)
• Setup e2e test with Nightwatch : 잘 모르겠습니다... 아마 테스트 관련 인 것 같습니다.(해당 글에서는 N으로 사용을 안하였습니다.)
• Shoud we run npm install ~ : NPM을 사용할지 Yarn을 사용할지 선택합니다.(해당 글에선 NPM을 사용하였습니다.)

- 모든 설정을 마치시면 프로젝트가 생성이됩니다.

4. Vue.js 프로젝트 설정하기

- vue 프로젝트를 build 시 결과물을 SpringBoot 프로젝트의 static 폴더로 지정하기 위해 설정을 수정하도록 하겠습니다.

- vue프로젝트 -> config -> index.js 파일을 아래와 같이 수정합니다.

....

  build: {
    // Template for index.html
    // 기존 경로: index: path.resolve(__dirname, '../dist/index.html'),
    //  SpringBoot Static Folder
    index: path.resolve(__dirname, '../../../src/main/resources/templates/vue/index.html'),

    // Paths
    // 기존 경로: assetsRoot: path.resolve(__dirname, '../dist'),
    //  SpringBoot Static Folder
    assetsRoot: path.resolve(__dirname, '../../../src/main/resources/static/vue'),
    assetsSubDirectory: 'static/',
    assetsPublicPath: 'vue/',

....

- index: path.resolve(__dirname, 'SpringBoot 프로젝트에 html을 위치할 경로')

참고!!!)
resources/static 아래가 아닌 resources/templates 에 한 이유는
해당 프로젝트는 현재 thymeleaf를 사용하고 있으며, 기본적으로 html을 읽어오는 경로가 templates 아래 경로이기 때문입니다.
만약, thymeleaf를 사용을 안하신다면, resources/static 아래로 작성하셔도 무방합니다.
또한, 따로 프로젝트를 설정하여, vue에 관한 경로를 설정하여 사용하실 경우 원하시는 경로로 작성하시면 됩니다.

- assetsRoot : path.resolve(__dirname. 'SpringBoot 프로젝트에 build 결과물 저장할 경로')

• vue 프로젝트를 빌드 시 생성될 css, js 등 파일을 위치할 경로를 설정합니다.
• 위 index.html은 해당 경로의 css, js 등 파일을 읽어와 화면에 보여지게 됩니다.

- assetsPublicPath: 'vue/'

• index.html에서 읽어올 때 의 경로 (default로는 '/' 이지만, 2번에서 static아래에 vue라는 디렉토리를 생성하였기 때문에, 해당 디렉토리를 읽어오기 위해 수정하도록 하겠습니다.)

- 수정을 완료하셨다면, 저장 후 프로젝트를 build 해보도록 하겠습니다.

 

5. 프로젝트 실행하기

- VS Code 내 vue 프로젝트에서 아래 명령어를 통해 빌드(Build)를 진행합니다.

npm run build

- Build가 성공적으로 끝이 났다면, SpringBoot 프로젝트에 정상적으로 Build 결과물이 생성되었는지 확인합니다.

- Build 결과물을 확인하기 위해, index.html을 읽어오도록 하겠습니다.

- Controller 를 생성하여 vue/index.html을 읽어옵니다.

@Controller
@AllArgsConstructor
public class WebController {

    @GetMapping("/vue")
    public String vue(){

        return "vue/index";
    }
}

- Controller 까지 작성되었다면, SpringBoot를 실행해보도록 하겠습니다.

- localhost:포트/vue 로 접속합니다.(ex: localhost:8081/vue)

- 정상적으로 Vue 화면을 확인할 수 있습니다.

---

출처

- itteamb.blogspot.com/2021/02/vuejsspring-boot-spring-boot-vue.html

---

번외로... 지인 프론트 개발자분이 Vue.js 에 대해서 조그맣게 Youtube(유튜브)에 기초 강의를 올리고 계십니다.

참고해보셔도 좋을 것 같습니다.

9Diin