[Spring Boot + Vue.js] 프로젝트 개발 환경 구성

[Spring Boot + Vue.js 연동] 프로젝트 개발 환경 세팅, axios로 데이터 전송, prettier와 cors 에러 해결

Vite 기반 Vue.js 프로젝트 만들 때는 위의 링크를 참고하세요.

 

 

1. Spring Boot 프로젝트 생성

저는 Gradle을 사용하였습니다.

위 링크를 참조해서 프로젝트를 생성해주세요.

 

Dependency는 이렇게 추가했습니다.

 

 

src/resources/application.properties

포트 번호를 변경해 줍니다.

server.port=8086

 

아직 DB 설정을 안해주었으니 

 

2. Vue.js 설치

 

터미널을 열어주세요. (Alt + F12)

 

저는 src 밑에 뷰 프로젝트 폴더를 설치할거라서 경로를 이동합니다

프로젝트 폴더를 설치할 경로로 이동하세요.

cd src

 

Vue를 전역설치 합니다.

npm install -g @vue/cli
또는
yarn global add @vue/cli

 

설치가 잘 되었는지 확인합니다.

vue --version

 

이제 vue 프로젝트 파일을 생성합니다.

vue create 프로젝트명

vue create frontend

 

 

 

package.json파일을 수정합니다. (필수 아님)

--open : 서버를 실행할 때 브라우저를 같이 열어준다. 

--port 포트번호 : 포트번호를 설정한다. 설정하지 않을시 기본값은 8080이다.

  "scripts": {
    "serve": "vue-cli-service serve --open --port 8087",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  }

 

 

3. Spring Boot와 Vue.js 연동, 빌드 타겟 디렉토리

Vue 프로젝트 파일에 vue.config.js 파일을 생성합니다.

module.exports = {
    outputDir: "../src/main/resources/static",
    devServer: {
        proxy: {
            '/api': {
                target: 'http://localhost:8086/',
                changeOrigin: true
            }
        }
    }
};

 

outputDir

빌드 파일이 생성되는 디렉토리 설정

 

devServer.proxy

프론트엔드 앱과 백엔드 API 서버가 동일한 호스트에서 실행되지 않는 경우

개발중에 API 서버에 API 요청을 프록시 해야한다.

 

프록시로 데이터를 백엔드 서버(target)로 넘겨준다.