[구축] vue, spring boot 병합

1. 서론

이전 게시물에서는 front 단락을 서술한 vue.js프로젝트와 back 단락을 서술한 spring boot프로젝트를 구분하여 구축하고, 이 두 프로젝트를 연동하는 내용에 대해 정리하였다.

 

이번 게시물에서는 한개의 프로젝트에서 vue.js 기반의 front 코드와 spring boot 기반의 back코드를 다루며, 두 소스가 연결될 수 있도록 병합 처리하는 과정에 대해 다루어 볼 예정이다.

 

병합을 진행하려는 이유는 간단하다. 프로젝트가 두개로 구분되면 개발 및 배포 작업을 위해서 두개의 디렉토리에 접근해야하는 부분이 번거롭다고 느껴졌기 때문이다. 규모가 작은 소스들이기 때문에 별도로 구분하는게 더 비효율적인 것 같다는 단순한 생각에서 출발한 작업이다.

 

chatGPT 피셜 해당 작업에 대한 장단점은 아래와 같다.

단점이 있음에도 병합을 추진한 이유는, 혼자 작업하는 작은 규모의 프로젝트이기 때문입니다.

 

 

---

 

2. 본론

 

사실 말이 병합이지 실로 간단한 작업이다. spring boot 틀을 가진 프로젝트 구조에 정적소스(front)를 모아둘 디렉토리를 설정하고, 해당 경로에 node module설치를 진행. vue.js구조를 붙이면 된다.

 

본인의 경우에는 이미 spirng boot로 구현되어있던 프로젝트를 vue.js화 하는 작업을 진행하게 되면서 해당 포스팅을 작성하였음을 참고할 필요가 있다.

 

어떤 형식으로 구조를 잡았는지 설명하기 위해 하단에 사진을 첨부하였다.

(좌)spring boot 프로젝트 구조 / (우)vue.js 코드 삽입

 

vue라는 폴더 자체를 별개의 frontend 프로젝트라고 생각하고, 필수로 필요한 파일들을 생성해주면 된다. 또한 vue폴더와 동위에 있는 dist라는 파일에는 npm run build 명령어를 통해 생성되는 정적 파일이 생성될 타겟 디렉토리 이다.

 

당연한 소리지만, node명령어는 터미널에서 vue파일이 위치한(node_modules이 위치한) 경로로 이동 후 사용해야한다.

 

 

---

 

3. 마무리

vue.config.js파일에 proxy 설정을 추가로 진행하여 특정 요청에 한해 spring boot 프로젝트와 연결되도록 처리하면 작업 완료이다. 과거 포스팅에서 다루었던 작업이므로 해당 포스팅에서는 생략하였다.

 

필수로 필요한 파일과 그에대한 내용을 하단에 첨부하였다.

 

main.js예시

import {createApp} from 'vue'
import {router} from '@/config/router'
import {store} from "@/config/store";
import App from './App.vue'

const app = createApp(App);

app.use(router);
app.use(store);
app.mount('#app');

 

 

babel.config.js 예시

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ]
}

 

 

vue.config.js 예시

const {defineConfig} = require('@vue/cli-service')

module.exports = defineConfig({
    transpileDependencies: true,
    outputDir: '/src/main/resources/static/dist', //build시 생성할 정적파일 저장 경로 설정

    devServer: {
        proxy: {
        	'/back': {
            	target: 'http://localhost:back포트번호',
				changeOrigin: true, 
            },
            
            //타 api활용 시, CORS에러 방지
            '/chem_acc_impact': { //axios에서 "*/chem_acc_impact"요청을 이쪽 객체 정보로 매핑
                target: 'http://ip:port number', //http://ip:port number/chem_acc_impact로 전송
                changeOrigin: true, //CORS 에러 방지(출처를 targetURL로 변경)
                onProxyReq(proxyReq, req, res) { //서버 로그
                    console.log('Proxying request:', req.method, req.url);
                },
                onProxyRes(proxyRes, req, res) {//서버 로그
                    console.log('Received response:', proxyRes.statusCode);
                },
                pathRewrite: {'^/chem_acc_impact': '/chem_acc_impact'} //프론트에서 전달된 주소정보를 뒤의 값으로 변경하여 백으로 전달.
            }
        }
    },
})

 

 

 

vue디렉토리 구조

 

 

---