spring boot + vue.js 환경 구성하기

dev·2022년 3월 25일

나는 원래 프론트엔드 개발자이다.
정확히 말하면 안드로이드 앱 개발자로 일하고 있다.
그러다 기회가 생겨 웹 개발을 잠시하게 되었는데 spring boot안에 vue.js를 함께 쓰는 아키텍처로 구성이 된 프로젝트였다.
프리랜서에 도움이 받아 개발을 진행하게 되었는데 그때 당시에는 너무 모르는게 많아 원래 그런가보다 하고 일을 진행하다가
어느 순간 불편한 부분들과 마주하게 되었다.
하지만 개발이 많이 진행되어 되돌릴수 없기 때문에 불편한걸 감수하고 그대로 진행하기로 했다.
프로젝트가 마무리되고 나서 spring boot에 vue가 들어가면 router를 사용 할 수 없는건가? 하는 의구심이 들어 찾아보았고 답을 찾을 수 있었다.
기본적인 java, node, vue cli 등은 설치가 되어 있다고 가정하고 진행한다.

- https://start.spring.io 에서 spring boot 프로젝트 생성하기

혼자서 개발하는것이라면 사용하는 IDE에서 프로젝트를 생성해도 상관 없지만 여럿이 협업하는 상황이라면 특정 IDE에 종속?되지 않게 Spring Initializr에서 프로젝트를 생성하는것을 추천한다.

- 생성된 프로젝트를 사용하는 IDE에 추가한다.

- 터미널에서 vue 프로젝트를 생성한다.

vue-cli를 이용하여 vue create frontend 명령어로 프로젝트를 생성하였고 스프링부트 프로젝트와는 따로 분리시켰다.

- vue 빌드시 스프링부트에 정적 폴더로 디플로이 작업

package.json 파일에 scripts 부분 수정

vue 수정시 자동으로 컴파일되도록 하기 위하여 수정이 필요하다.

"serve": "vue-cli-service serve"   =>   "serve": "vue-cli-service serve --port 3000" 
"build": "vue-cli-service build"   =>   "build": "vue-cli-service build --watch"

vue.config.js 파일에 아래 내용 추가

module.exports = {
  // npm run build 타겟 디렉토리
  outputDir: '../backend/src/main/resources/static',

  // npm run serve 개발 진행시에 포트가 다르기때문에 프록시 설정
  devServer: {
    proxy: 'http://localhost:8080'
  }
};

이 후에 터미널에서 frontend 폴더에서 npm run build를 하면 스프링부트에 정적 폴더에 vue 프로젝트에 빌드된 파일이 디플로이 된것을 확인할 수 있다.

스프링부트 서버를 실행시키고 브라우저에서 http://localhost:8080 으로 접속하면 vue로 작성된 페이지가 열릴것이다.

- router 사용을 위해 스프링부트에 ErrorController를 implements하여 아래 내용을 구현해 준다.

@Controller
public class WebErrorController implements ErrorController {

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

    public String getErrorPath() {
        return "/error";
    }
}