티스토리 뷰

프로그래밍/Spring

Spring Boot + Vue.js 연동하기

kkd927 2017. 12. 29. 13:48

Backend 프레임워크인 Spring Boot와 Frontend 프레임워크인 Vue.js의 연동방법에 대해 살펴보겠습니다. Vue.js와 Backend 프레임워크와의 연동방법은 다양하게 있으며 현재 프로젝트 상황에 맞게 연동하면 됩니다.


일반적인 방법으로 빌드시 생성되는 index.html 파일 하나만 두고 사용자 인증, 데이터 가져오기 등 모든 서버와의 통신은 WEB API 통신(REST API, GrapQL 등)으로 연동하는 방법입니다. 이 경우 기존의 렌더링 형태인 controller -> view(jsp, ejs 등 템플릿 엔진) 형태가 아니기 때문에 url 라우팅은 vue-router 등을 통해 처리해야 합니다.


프로젝트 구조

.
├── src/                        # Spring 소스코드 디렉터리
│   └── main/
│       ├── java/
│       └── resources/
│           ├── static/
│           ├── templates/
│           └── application.properties
├── target/                     # Spring 빌드 디렉터리
│   └── ...
├── frontend/                   # Vue.js 루트 디렉터리
│   ├── src/                    
│   └── ...
└── pom.xml

Vue.js 파일들을 관리의 편의성을 위해 frontend 디렉터리 하위에 두어 Spring 파일들과 분리시켜 줍니다. Vue.js를 신규 셋팅을 하는 상황이라면, vue-cli를 이용하여 vue init webpack frontend와 같이 명령어를 입력하시면 됩니다. Vue.js 개발환경 셋팅에 대한 자세한 내용은 [vue-cli] Webpack 템플릿으로 vue.js 개발환경 구축하기를 참조하세요.


이제 Webpack 빌드 시 생성되는 index.html 파일이 스프링의 static 디렉터리에 위치하도록 vuejs conf 파일의 build 속성을 다음과 같이 수정합니다.

frontend/config/index.js

build: {
    // Template for index.html
    index: path.resolve(__dirname, '../../src/main/resources/static/index.html'),

    // Assets Paths
    assetsRoot: path.resolve(__dirname, '../../src/main/resources/static'),
}

추가적인 config 설정 방법은 Backend 프레임워크와 통합하기에서 확인하실 수 있습니다.

이제 npm run build를 실행하면 Webpack의 빌드 결과물들이 Spring Boot의 src/main/resources/static 하위에 생성될 것 입니다.

cd frontend
npm run build

빌드를 실행하면 다음과 같은 화면이 나오면 정상적으로 빌드가 이루어진 것 입니다.

Hash: fa1c05ca567f976f2bb4
Version: webpack 3.10.0
Time: 9372ms
                                                  Asset       Size  Chunks             Chunk Names
               static/js/vendor.5973cf24864eecc78c48.js     112 kB       0  [emitted]  vendor
                  static/js/app.e3f37e373a7b0be800ee.js    11.4 kB       1  [emitted]  app
             static/js/manifest.8c2c40900403ccd0117f.js    1.49 kB       2  [emitted]  manifest
    static/css/app.40074a31a2d49e73485cdf8ca0ded531.css  432 bytes       1  [emitted]  app
static/css/app.40074a31a2d49e73485cdf8ca0ded531.css.map  828 bytes          [emitted]
           static/js/vendor.5973cf24864eecc78c48.js.map     548 kB       0  [emitted]  vendor
              static/js/app.e3f37e373a7b0be800ee.js.map    21.3 kB       1  [emitted]  app
         static/js/manifest.8c2c40900403ccd0117f.js.map     7.8 kB       2  [emitted]  manifest
                                ../templates/index.html  510 bytes          [emitted]

  Build complete.

  Tip: built files are meant to be served over an HTTP server.
  Opening index.html over file:// won't work.


Spring은 기본적으로 root url ("/") 접속 시 static 디렉터리의 index.html 파일을 렌더링 해주기 때문에 URL 설정을 따로 하실 필요가 없습니다. 웹팩 빌드 시 index.html 파일명 외에 다른 파일명으로 설정하셨다면 Nginx 혹은 Apache 와 같은 web 서버 설정에서 해당 url로 설정해주시면 됩니다. 이제 Spring Boot를 띄우고 localhost:8080 에 접속하면 Vue.js 화면이 나오는 것을 확인하실 수 있습니다. 예제 소스 코드는 GitHub에서 확인하실 수 있습니다.


댓글