이번에는 Backend의 프로젝트와 Frontend의 프로젝트를 하나의 프로젝트에서 관리하고자 합니다. 이 말은 여러가지 뜻을 내포하고 있습니다. 보통 Backend와 Frontend는 각기 다른 서버에 구성이 됩니다. 이를테면... Web서버 / WAS서버를 구지 나누듯이 말입니다.
- Web : 기존에 알아본 Frontend Framework인 Vue, React, Angular, JQuery 등과 같이 사용자 view를 위한 프로젝트로 별도 web application server를 통해서 구동합니다.
- WAS : spring과 같이 전문... REST, SOAP 기타 등등 Backend를 통해 데이터를 접근하여 제공하기 위한 프로젝트로 역시나 web application server를 통해서 구동합니다.
간단하게 아주 개념적으로만 보면 그런데... 대규모 프로젝트가 아닌 한가지의 목적으로 만들어지는 프로젝트에서는 이렇게 칼로 무 자르듯이 자르는 것 보다는 이 두개를 하나로 유기적으로 묶으면 더 효율적일 때가 많습니다. 그래서 이 두가지를 합치겠습니다.
기본적으로는 Backend의 application server를 통해서 모두 구동하는 방식이고, Front의 view 소스들은 npm에서 build할때 Backend의 특정 공간으로 수행하고, 사용자가 접근 시 Backend에서는 해당 공간으로 접근을 redirect 해주는 방식으로 구현이 됩니다.
결국 최종 서버에 올라가는 jar / war는 Frontend와 Backend의 소스를 모두 가지고 있는 것이지요. 그럼 실제로 구성을 해보겠습니다.
1. vue project 이동
spring boot와 한 공간에서 관리하기 위해서 vue project를 STS의 workspace로 이동합니다. 단지 이동만 하더라도 STS에서 한눈에 볼 수 있으니 그 것만으로도 일단 효과가 있다고 생각하죠머... 이동은 별로 어려울게 없습니다. 그냥 폴더를 통째로 복사해서 넣으면 됩니다.
보이시나요?? 기존에 spring boot project 구성에 이번에 새로 만든 vue project 폴더인 ad-vue가 살포시 위치해 있습니다. 그럼 STS에서는 어떻게 보이게 될까요??
그냥 윈도우탐색기로 보는 화면과 동일합니다.
2. vue project 내 config 변경
vue project에는 config에 project build에 대한 설정이 들어가 있습니다. 이는 해당 프로젝트의 build 시, 위치를 포함하는데 이 부분은 나중에 vue project 폴더구조를 알아볼때 자세히 살펴보겠습니다. 이번에는 일단 vue project - config - index.js 에 해당 설정이 있고 이를 수정하면 된다고 정도만 알고 넘어가겠습니다.
[index.js]
'use strict'
const path = require('path')
module.exports = {
dev: {
// Paths
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {},
// Various Dev Server settings
host: 'localhost', // can be overwritten by process.env.HOST
port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
autoOpenBrowser: false,
errorOverlay: true,
notifyOnErrors: true,
poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
useEslint: true,
showEslintErrorsInOverlay: false,
devtool: 'cheap-module-eval-source-map',
cacheBusting: true,
cssSourceMap: true
},
build: {
// Template for index.html
index: path.resolve(__dirname, '../../src/main/resources/static/index.html'),
// Paths
assetsRoot: path.resolve(__dirname, '../../src/main/resources/static'),
assetsSubDirectory: 'static',
assetsPublicPath: '/',
productionSourceMap: true,
devtool: '#source-map',
productionGzip: false,
productionGzipExtensions: ['js', 'css'],
bundleAnalyzerReport: process.env.npm_config_report
}
}이 부분을 모두 다 생각할 필요는 없고, build: { } 부분만 확인하면 됩니다. 보면 index.html파일을 지정하는 부분과, 관련된 assets파일을 위치시키는 경로를 지정하는 부분이 있습니다. 내 프로젝트에 맞게 이부분을 수정하면 됩니다.
index: path.resolve(__dirname, '../../src/main/resources/static/index.html'),
assetsRoot: path.resolve(__dirname, '../../src/main/resources/static'),저는 딱 이렇게 설정했습니다. 이렇게 설정을 하면, view에 대한 build를 수행하면 아래와 같이 spring boot의 project안에 static 폴더 밑에 SPA의 근간이 되는 index.html이 위치하게 되고, static아래에 css, js 파일들이 위치하게 됩니다.
3. springboot 내 config 구성
이렇게만 한다고, spring boot의 프로젝트가 내 안에 vue project가 있는지 알 수가 없습니다. 따라서 spring boot를 실행하고 root에 접근 시, vue project의 build 결과물인 index.html로 경로를 redirect 시켜줘야 합니다. 그러기 위해서는 파일 한개만 생성하면 됩니다.
[WebConfig.java]
@Configuration
public class WebConfig implements WebMvcConfigurer {
@Override
public void addViewControllers(ViewControllerRegistry registry) {
registry.addViewController("/").setViewName("forward:/index.html");
}
}길 것도 없습니다. 해당 java는 spring boot의 config 파일이기 때문에 @Configuration 어노테이션을 추가해줍니다. 그리고 WebMvcConfigurer를 implements 시켜주고 해당 class의 특정 메서드를 @Override시켜줍니다.
addViewControllers 메서드에 registry.addViewController("/").setViewName("forward:/index.html") 로 추가해준다면, root인 "/" 들어온 요청을 /index.html로 바꿔줍니다. 그럼 실행해 볼까요??
localhost:8080으로 실행했고, vue project에서 node.js의 서버를 통해 실행했던... npm run dev의 결과와 동일한 결과를 확인 할 수 있습니다. 단 차이는, 변경한 방식은 spring boot의 자체 서버를 통해 vue project의 build결과를 뿌려줬다는 것만 다릅니다.
이제 STS에서 vue project를 개발하고 build하면 spring boot에서 한번에 같이 구동이 가능하게 되었습니다.
-Ayotera Lab-
댓글