[Java Web programming] SpringBoot, Vue 연동하기

프로젝트의 Back단은 Spring Boot, Front단은 Vue.js로 동작하는 방식을 사용하기 위해서 SpringBoot 프로젝트의 Vue를 연동할 것이다. 

 

기본적인 npm, vue 설치가 먼저 되어있어야한다.

해당 프로젝트의 터미널을 열어서 설치 명령어를 입력해서 설치해주면 된다.

1. Vue.js 설치

npm install -g @vue/cli

 

 

 

2. 설치 완료되었는지 확인

vue --version

 

 

 

3. 프로젝트 동작 원리 이해

1) Vue 프로젝트 개발 후, Spring Boot static 폴더 밑에 결과가 생성함

2) Spring Boot 실행

3) 웹 페이지 접속 -> Spring Boot 프로젝트 내의 static 폴더에 생긴 Vue 결과물을 실행시킴

 

4. Spring Boot + Vue.js를 연동해야하는 이유

1) build 간편화

서로 연동되지 않으면 Vue.js를 이용해 만든 Front쪽의 구성이 바뀌면 매번 Back도 build를 해줘야하고 Build의 결과물을 Spring Boot resource 쪽에 직접 이동시켜줘야하는데 이런 번거로움을 줄일 수 있다.

 

2) 배포의 간편화

연동되지 않으면 Vue.js 서버 1개, Spring Boot 서버 1개해서 2개를 켜두고 진행하여아한다.

이럴 경우, 배포환경이 복잡해질 수 있다.

서버는 Spring Boot 서버 하나만 생길 수 있도록 연동할 것이다. 

 

5. Vue.js 프로젝트 생성하기

Spring Boot 프로젝트 바로 하위에 vue폴더를 생성하고 vue폴더 밑에 vue프로젝트를 생성할 것이다.

mkdir vue
cd vue

 

경축! 아무것도 안하여 에스천사게임즈가 새로운 모습으로 재오픈 하였습니다.
어린이용이며, 설치가 필요없는 브라우저 게임입니다.
https://s1004games.com

 

vue init webpack vue-front

 

 

 

6. Vue.js 프로젝트 설정하기

vue.js 프로젝트를 설정하는 파일은 vue-front >config >index.js 파일이다.

수정해줄 부분은 vue 프로젝트가 빌드 시, 결과물을 저장해두는 파일을 지정하기 위한 설정이다.

  build: {
    // Template for index.html
    index: path.resolve(__dirname, '../../../src/main/resources/templates/vue/index.html'),

    // Paths
    assetsRoot: path.resolve(__dirname, '../../../src/main/resources/static/vue'),
    assetsSubDirectory: 'static',
    assetsPublicPath: 'vue/',
    
    ... 이하 생략

 

7. 프로젝트 빌드 및 기동하기

터미널에서 아래 명령어를 통해 프로젝트를 빌드해준다. 

당연한 말이지만 프로젝트 빌드는 vue-front 경로까지 이동 후에 실행해주어야한다.

npm run build

 

 

빌드가 성공하고 나서 Spring Boot 프로젝트 resources> static> vue> static> js/css

경로로 가보면 파일이 생성된 것을 확인할 수 있다.

 

 

 

8. index.html 파일 읽어오기

build 결과물을 확인하기 위해서 index.html 파일을 읽어올 것이다.

controller 부분에 url을 하나 생성해서 읽어오면 된다.

생성 후, Spring Boot 프로젝트를 실행하여 "locahost:8090/vue" 로 접속한다.

 

 

정상적으로 잘 불러오는 것을 확인할 수 있다.

 

[출처] https://ohrora-developer.tistory.com/25

 

본 웹사이트는 광고를 포함하고 있습니다.
광고 클릭에서 발생하는 수익금은 모두 웹사이트 서버의 유지 및 관리, 그리고 기술 콘텐츠 향상을 위해 쓰여집니다.
번호 제목 글쓴이 날짜 조회 수
206 스프링 CKEditor 적용 - 에디터 졸리운_곰 2018.03.07 2555
205 [Spring] 스프링 비밀번호 암호화 졸리운_곰 2018.10.08 2224
204 전자정부 표준 프레임워크 egov bootstrap 부트스트랩 적용 file 졸리운_곰 2020.01.15 2087
203 spring ckeditor 파일업로드 예제 (file upload) file 졸리운_곰 2018.03.07 1996
202 React.js and Spring Data REST : react.js 자바 스프링 연동 file 졸리운_곰 2018.09.11 1962
201 Quartz + Spring Batch 조합하기 file 졸리운_곰 2018.02.08 1925
200 [Java][Web][Spring] vo 여러개 전달하기. LIST<VO> vo를 list 로 넘기기 / 받기 졸리운_곰 2021.05.20 1864
199 [ibatis] 부적합한 열 인덱스 가을의곰을... 2013.12.27 1475
198 [visual studio code] 스프링 부트 + 리액트 개발 셋업 file 졸리운_곰 2020.07.01 1395
197 How To Integrate React in JSP Application : React와 JSP 연동 file 졸리운_곰 2018.09.11 1344
196 JSP 요약 정리 file 졸리운_곰 2016.09.11 1262
195 [JSP] 네이버 스마트 에디터 연동 + 이미지파일 업로드 기능 추가 file 졸리운_곰 2018.07.28 1060
194 eGov 표준프레임워크(전자정부프레임워크) 공통 컴포넌트 사용법 : Common Component file 졸리운_곰 2017.01.29 1000
193 java spring redis 세션 공유 : Spring Session을 이용한 세션 클러스터링 졸리운_곰 2018.05.06 989
192 Spring Boot with React 설정 file 졸리운_곰 2020.03.05 971
191 [MyBatis] MyBatis 프레임워크의 트랜잭션 제어 가을의곰을... 2013.12.30 870
190 Spring MVC Tiles Plugin with Example file 졸리운_곰 2017.01.15 809
189 Spring SQL Server 연동 (실습) file 졸리운_곰 2020.01.24 717
188 Introduction to Angular 2 with Spring MVC file 졸리운_곰 2016.11.20 641
187 JAVA] Quartz (쿼츠)를 사용하여 자바 스케줄링(scheduling) 하기 졸리운_곰 2018.02.08 573
대표 김성준 주소 : 경기 용인 분당수지 U타워 등록번호 : 142-07-27414
통신판매업 신고 : 제2012-용인수지-0185호 출판업 신고 : 수지구청 제 123호 개인정보보호최고책임자 : 김성준 sjkim70@stechstar.com
대표전화 : 010-4589-2193 [fax] 02-6280-1294 COPYRIGHT(C) stechstar.com ALL RIGHTS RESERVED