[vueSpringProject] 블로그를 보면서 따라하는 vueSpringproject 도전기

VsCode로 vue, springboot 프로젝트를 구현해보았다.

 

back -spring boot project 생성

plugin -> Spring boot extension pack 를 설치해서 spring initializer gradle로 springboot 프로젝트 생성 완료.

 

front -vue project 생성

springboot porject 에서 

npm install -g @vue/cli 명령어로 vue cli를 설치한다.

설치 후 vue create front 로 front 프로젝트 생성 완료

 

다음으로 springboot port정보를 변경해줬다. application.properties에서 변경 간으

 

 

build.gradle 파일에서 jar로 배포하기 위한 설정 추가

 

아래 경로와 같이 생성되는 것을 확인할 수 있다.

 

 

생성이 완료되면

java -jar JarName.jar 명령어로 springboot project 실행이 가능하다.

-> example : java -jar /build/libs/vue_springboot.jar

 

front 프로젝트에서 vue.config.js 파일을 생성하고 아래 코드를 작성한다.

- 아래 코드의 proxy 서버를 통해 base 경로를 설정하고 axios로 통신할때 사용하는걸로 보여진다. (포인트)

vue front 서버 포트는 3030, springboot 포트는 3000으로 정의한다.

 

이후 프론트 폴더에 들어가 npm run build 명령어 실행

이렇게 하면 설정한 outputDir 경로에 vue에서 사용할 기본 리소스가 만들어진다고 한다.

즉, front 폴더 안에 있는 public 폴더는 이제 필요가 없으니 삭제해도 된다.

 

application.properties 파일

 

build.gradle 에 필요한 의존성

이후 다시 springboot project를 

./gradlew bootjar로 jar 재배포 후 java -jar로 다시 실행하면 아래와 같은 로그인화면이 :뜬다. 해당 부분은 security 의존성을 추가했기 때문이다.

 

출처 :

https://pjs21s.github.io/vue-springboot-tutorial/

Vue.js와 Spring Boot 연동 및 CRUD JPA 기초