IntelliJ에 SpringBoot + Vue.js 설치 및 연동 - 2

상황

저번 포스팅에서는 vue.js를 IntelliJ에 설치를 했다면,이번에는 backend 서버와 frontend서버를 연결하여 데이터 주고 받기를 해볼 차례다.

 

설치 포스팅 👇

2023.04.19 - [Programming/Vue] - IntelliJ에 SpringBoot + Vue.js 설치 및 연동 - 1

 

 

---

적용

 

✔️. backend 서버와 frontend 서버를 연결하여 데이터 주고 받기

Spring Boot와 Vue.js 설치를 했으니, 이제 연동을 시켜보자.

 

📌 Proxy서버를 활용하여 연동할 수 있다.

Spring Boot(백엔드 서버)와 Vue.js(프론트엔드 서버)를 연결하기 위해 중계인인 Proxy가 필요하다.

 

나같은 경우에는 백엔드는 8081 (application.properties)

프론트엔드는 8080 서버 (기본) 로 설정해주었다.

포트번호는 상황에 맞게 설정하면 되지만, 결과적으로 백/프론트가 다르면 된다. 

같으면 당연히 충돌난다.

 

이제 frontend 폴더 하위에 vue.config.js(Vue설정 파일)을 생성한다. 

그리고 아래 코드처럼 입력한다.

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

module.exports = defineConfig({
  // common
  lintOnSave: false, // 오류 상황 미리 고지 옵션

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


})

 

위와 같이 설정하면

클라이언트는 Vue 화면인 8080 포트로 접속할 테지만, /api 라는 경로로 시작하게 되면 8081 포트로 연결되게 된다.