프로젝트

프로젝트 - Spring Boot + Vue.js 연동

youngjae-kim 2024. 6. 7. 16:32
728x90
반응형

Spring Boot 와 Vue.js 를 모두 설치 했으니, 이제 이 둘을 연동시켜볼 것이다.

💡 백엔드 서버와 프론트엔드 서버를 연동해야하는 이유

👉 Spring Boot와 Vue.js를 서로 연동하지 않으면,
Vue.js를 이용해 만든 클라이언트 쪽 페이지의 구성을 바꿀 때 마다 매번 build를 하고
build결과물을 Spring Boot 쪽의 resouces/static으로 이동시켜줘야한다. 매우 번거롭다.

 

👉 개발 환경에선 Spring Boot 서버도 켜주고, Vue.js 서버도 켜서 port 두개를 두고 진행하게 될 테지만,
배포 시엔 서버를 두개나 두기엔 곤란할 수 있다.
때문에 실 배포환경에선 연동을 통해 Vue.js의 빌드 결과물의 목적지를 Spring boot의 resources/static으로 맞추고, 실 서버는 Spring Boot 서버 하나만 두게 할 것이다.

 

vue.config.js 설정하기

vue.config.js은 Vue.js 프로젝트 설정을 커스터마이징 할 때 사용하는 파일

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,

  outputDir: "../src/main/resources/static",  // 빌드 타겟 디렉토리
  devServer: {
    proxy: {
      '/api': {
        // '/api' 로 들어오면 포트 8080(스프링 서버)로 보낸다
        target: 'http://localhost:8080',
        changeOrigin: true // cross origin 허용
      }
    }
  }
})

 

각 설정 설명

  1. outputDir 설정:
    • outputDir은 Vue.js 애플리케이션을 빌드할 때 생성되는 정적 파일들이 저장될 디렉토리를 지정
    • "../src/main/resources/static" 값으로 설정된 경우, 프로젝트의 루트 디렉토리에서 상대 경로를 따라가 src/main/resources/static 디렉토리를 최종 빌드 디렉토리로 지정합니다. 이는 주로 Spring Boot와 같은 Java 백엔드 프레임워크와 함께 Vue.js 프론트엔드를 통합할 때 사용된다.
    • Spring Boot는 static 디렉토리 아래에 위치한 파일들을 자동으로 서빙해주기 때문에, 이 설정을 통해 빌드된 프론트엔드 파일들이 바로 백엔드 서버에 의해 제공될 수 있도록 해준다.
  2. devServer 설정:
    • devServer 설정은 로컬 개발 중인 Vue.js 애플리케이션을 위한 웹 서버를 구성하는 데 사용.
    • proxy 설정은 특정 요청을 다른 서버로 전달(프록시)하기 위한 설정입니다. 이 예시에서는 /api로 시작하는 모든 요청을 http://localhost:8080으로 프록시.
    • 이는 개발 중에 프론트엔드(Vue.js)와 백엔드(Spring Boot)가 다른 포트에서 실행될 때 CORS(Cross-Origin Resource Sharing) 문제를 해결하고, 백엔드 API에 손쉽게 접근할 수 있게 해준다.
    • changeOrigin: true 설정은 프록시 요청이 원본(origin)을 변경하여 보내질 수 있도록 허용. 이는 CORS 정책을 우회할 때에 사용한다.

설정 파일 적용

npm run build

 

vue 프로젝트 실행 및 스프링 부트 서버 실행 후 확인

npm run serve

 

 

이렇게 backend 단의 static 경로 하위에 빌드된 파일들이 생성된 것을 확인할 수 있었다.

 

8080으로 접속했을 때 vue 프로젝트가 로딩 되는 것을 볼 수 있었다.

728x90
반응형