spring-boot 와 vue 이용하여 프로젝트 생성하기

spring boot 와 vue를 이용하여 프로젝트 생성하기

프로젝트를 시작하게 된 계기는 김영한님의 JPA 강의를 들으면서 vue도 다시 공부할 겸, thymeleaf 말고 vue를 이용하여 개발을 해보자 하여 시작하게 되었습니다. 프로젝트를 생성하였던 방법과 프로젝트를 진행하며 발생한 에러에 대해 써보려 합니다.

spring boot 프로젝트 생성하기 [https://start.spring.io/] spring initializr 에 들어가 스프링부트 프로젝트를 생성합니다.

아래 이미지는 프로젝트를 생성하였을 때 [2023-04-18 기준] 세팅입니다.

spring initializr

프로젝트 구성은 아래와 같이 만들었습니다.

프로젝트 구조

back-end 디렉토리에는 server-side 코드가 들어가는 부분이고, front-end에는 client-side 코드가 들어갈 예정입니다.

npm 과, vue 설치에 대한 방법은 생략하도록 하겠습니다.

back-end 디렉토리와 동일 레벨에서 아래 command를 입력하여 vue project 를 생성합니다.

vue create front-end

 

프로젝트 생성 후 몇 가지 설정을 해주어야 하는데, 첫 번째로 vue 에서 build 한 파일들을 back-end의 [ src/main/resources ]하위에 위치하도록 설정해야 합니다. 

해당 설정을 하기 전, 생성한 vue 프로젝트로 이동하여 아래 명령어를 입력하면 front-end 디렉토리 하위에 파일이 생성된 것을 확인할 수 있습니다. ( option.js 파일의 이름은 변경 가능합니다. )

vue inspect > options.js

 

options.js 파일을 살펴보면 vue와 관련된 webpack 설정 값을 확인할 수 있습니다. 빌드 후 어디에 배포 될 것인지, module은 무엇이 설정되어있는지 등등..

 

빌드 파일 경로 설정

현재 options.js 에서 확인해야 할 사항은 output property의 path입니다.

 output: {
    hashFunction: 'xxhash64',
    path: '/Users/a1234/Desktop/github/Inflearn/JPA/1_DEV_APPLICATION/jpashop/front-end/dist',
  //path: '/Users/a1234/Desktop/github/Inflearn/JPA/1_DEV_APPLICATION/jpashop/back-end/src/main/resources/static',
    filename: 'js/[name].js',
    publicPath: '/',
    chunkFilename: 'js/[name].js'
  },

현재 제 프로젝트에 설정되어있는 path인데, 기본적으로 [ vue-project/dist ]로 되어있을 것이다. 이제 이것을 하위 주석의 path 처럼 변경해 주어야 합니다.

front-end 디렉토리 하위에 보면 vue.config.js 파일이 보일텐데 해당 파일에서 설정 값을 변경할 수 있습니다.

config 안으로 들어가보면 아래와 같은 property 값들을 확인할 수 있는데, 이중에서 우리가 수정할 값은 outputDir 입니다.

ProjectOptions

 

outputDir property에 build 후 파일을 생성할 위치를 설정합니다. 설정 값은 back-end의 resources/static 입니다. devServer 속성 값은 아래에서 말씀드리겠습니다. 

이제 outDir 을 수정하고 [ vue inspect > options.js ] 명령어를 다시 입력하면 outputDir이 변경된 것을 확인 할 수 있습니다.

output: {
    hashFunction: 'xxhash64',
    path: '/Users/a1234/Desktop/github/Inflearn/JPA/1_DEV_APPLICATION/jpashop/back-end/src/main/resources/static',
    filename: 'js/[name].js',
    publicPath: '/',
    chunkFilename: 'js/[name].js'
  },

 

이제 터미널에서 npm run build를 통해 빌드를 해보면 main/resources 하위 디렉토리에 파일이 생성되는 것을 확인 할 수 있습니다.

여기서 sh: vue-cli-service: command not found 와 같은 오류가 발생한다면 현재 node_modules를 받지 못한 상황이므로

npm i 또는 npm install 을 통해 node_modules를 받아주시면 됩니다.

 

개발서버 프록시 설정

다음으로 devServer에 대한 설정입니다. devServer property는 npm run serve 로 webpack-dev-server를 띄웠을 때의 서버 설정 값 입니다. devServer property를 따라 들어가보면 아래와 같이 webpack-dev-server 옵션들을 설정하는 값 이라고 설명되어있습니다.

자세한 webpack-dev-server 설정은 [ https://webpack.js.org/configuration/dev-server/ ] 에서 확인하실 수 있습니다.

여기서 설정한 값은 proxy인데 webpack 페이지에 가서 찾아보면 "별도의 api 백엔드 개발 서버가 있고 동일한 도메인에서 API 요청을 보내려고 하는 경우 일부 URL을 프록싱하여 유용할 수 있다."라고 설명이 되어있습니다.

즉, spring-boot tomcat server 는 8080 port로 올라가 있고, webpack-dev-server는 8081 port 로 올라가있는 상태에서  http://localhost:8081/* 와 같이 들어오는 요청에 대해  프록시를 통해 http://localhost:8080/* 로 요청을 전달한다는 의미 입니다.

테스트 controller를 통해 테스트를 진행해보겠습니다. 간단하게 tomcat server port 는 8080으로 webpack-dev-server port는 8081로 띄워두고, 브라우저에서 localhost:8081/api 로 요청을 보내보면

package jpaBook.jpaShop;

import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
public class TestController {

    @GetMapping("/api")
    public void testMethod() {
        System.out.println("get request !");
    }
}

브라우저 요청

intellij console

위 처럼 console에 요청을 들어온 것을 확인할 수 있습니다. 

----------------------------------------------------------------------------------------------------------------

수정

위에 작성한 dev-server 프록시 설정에서 path를 "/"로 설정하였는데.. 이 후 모든 요청에 대해 프록싱으로 하는 것으로 불편함이 있어서..   api로 요청하는 주소에 대해서만 프록시를 설정하는 것으로 변경하였습니다. 서버를 대부분 rest-api로 구성하기에 아래와 같이 변경하였습니다.

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  //build output directory
  outputDir: "../back-end/src/main/resources/static",
  // assetsDir: "./",
  //build index directory
  // indexPath: "./index.html",
  //dev server // npm run serve options
  devServer: {
    hot: true,
    //proxy

    proxy: {
      // http://locahost:8081 -> http://localhost:8080
      '/rest/api/': {
        target: 'http://localhost:8080',
        //cross origin
        changeOrigin: true,
      },
      '/ws/': {
      	target: 'ws://localhost:8080',
        changeOrigin : false,
        ws: true
      }
    }
  }
})

----------------------------------------------------------------------------------------------------------------

 

여기까지 spring-boot와 vue를 이용한 프로젝트 기본 세팅을 완료하였습니다.

 

오류들

- 만약, webpack-dev-server를 띄운 브라우저 console에서 아래와 같은 오류가 뜬다면?  [ https://cronex.tistory.com/25 ]

브라우저 console

 

 

- intellj 에서 stop을 눌렀을 때 console에서 아래와 같은 오류가 뜬다면? [ https://cronex.tistory.com/24 ]

intellij console

 

 

참고:  https://velog.io/@-dev-/spring-boot-vue.js-%ED%99%98%EA%B2%BD-%EA%B5%AC%EC%84%B1%ED%95%98%EA%B8%B0