[구축] vue & spring boot 연동

 

vue 프로젝트를 서버 프로젝트와 연동하기 위한 작업 내용을 정리해보았다.

window OS, intelliJ IDE로 작업되었다.

 

연동이라는 단어로 표현했다싶이 vue와 spring, 각각의 프로젝트를 연결하는 작업에 대한 게시물이다.

01. 개요

02. 작업
   01) spring boot 프로젝트 생성
   02) vue 프로젝트 설정
   03) 실행

03. 기타

 

---

 

 

01. 개요

front를 오직 html과 jsp로만 진행하다가, vue나 flutter같은 framework를 활용하여 작업을 하다보니 당연히 한 프로젝트 내에서 front와 back의 작업이 일어나는 것이라는 전제가 아주 단단히 잘못된 생각이었다는 것을 깨닫게 되었다.

 

이래서 기본 부족한 비전공자란,,,

 

Vue 프로젝트와 server 프로젝트를 별도로 생성하여 이 두 프로젝트를 연동해주어야한다. Vue 프로젝트 빌드를 통해 생성되는 출력물을 server 프로젝트의 Static 폴더에 저장하여, 해당 출력물을 실행하는 원리이다.

 

따라서 순서는 01) Vue 프로젝트 빌드, 02) server 프로젝트 빌드, 03) 접속 이라고 정리할 수 있다.

 

 

---

02. 작업

해당 포스팅은 이미 vue 프로젝트로 기본 UI가 퍼블리싱 된 상태에서 진행되었음을 알 필요가 있다.

 

 

01) spring boot 프로젝트 생성

프로젝트 생성 자체에 어려움이 있는것은 아니므로 관련된 포스팅을 참조하였다. 

 

https://dev-coco.tistory.com/66

[Spring Boot] intelliJ로 Spring Boot 프로젝트 생성 및 실행하기

 

 

아래와 같이 spring boot 프로젝트를 정상적으로 생성하였다.

 

 

---

 

02) vue 프로젝트 설정

목차 제목에 해당하는 파일을 열어 필요 내용을 변경해주어야한다.

 

① package.json

json파일에서 "scripts"문자열 검색을 통해 확인되는 serve와 build의 내용을 아래 이미지와 같이 변경해주어야한다.

변경 완료 화면

 

    "serve": "vue-cli-service serve --port 3000",
    "build": "vue-cli-service build --watch",

 

 

---

 

 

② vue.config.js

아래의 내용을 그대로 복붙하여 본인의 기타 설정에 맞게 변경할 수 있겠다.

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

  // npm run build 타겟 디렉토리 -> 해당 경로에 vue 빌드 출력물 생성됨
  outputDir: '../backend/src/main/resources/static',

  // npm run serve 개발 진행시에 포트가 다르기때문에 프록시 설정
  devServer: {
    proxy: 'http://localhost:8080' //서버 프로젝트 포트번호와 동일할 것
  },

})

이때 ouputDir설정을 통해 REST API, 즉 서버프로젝트의 하위에 정적 빌드 폴더를 생성하는 것이 필수는 아니다.

 

vue프로젝트와 서버프로젝트의 호스팅을 함께하는 경우에만 정적 빌드 폴더를 서버프로젝트 하위에 둔다. 호스팅을 함께한다는 것은 하나의 서버에 두 프로젝트가 배포된다는 것이고, 이 하나의 동작만으로 아래와 같은 이점을 가질 수 있다.

Spring Boot 프로젝트에 정적 리소스를 배포하는 이유는 다양합니다. 몇 가지 예시를 들어 설명해드리겠습니다:

1. Vue.js, React, Angular 등과 같은 프론트엔드 프레임워크와의 통합: Vue.js와 같은 프론트엔드 프레임워크는 주로 정적 리소스로 구성되어 있습니다. 이러한 프로젝트를 단독으로 호스팅하는 대신, Spring Boot 프로젝트에 정적 리소스를 포함하여 함께 배포함으로써 하나의 서버에서 프론트엔드와 백엔드를 함께 구동할 수 있습니다.
2. 서버 사이드 렌더링 (Server-Side Rendering, SSR): SSR은 프론트엔드 렌더링을 서버 측에서 처리하여 초기 로딩 성능을 개선하는 방법입니다. Vue.js나 React와 같은 프론트엔드 프레임워크에서 SSR을 구현하기 위해서는 서버에 정적 리소스를 배포하고, 이를 이용하여 서버 사이드에서 페이지를 렌더링하여 클라이언트에 전달해야 합니다.
3. 정적 파일 제공: 이미지, CSS, JavaScript 파일 등과 같은 정적 파일을 제공하기 위해 정적 리소스를 활용할 수 있습니다. 이를 통해 클라이언트에서 해당 파일을 요청할 때 서버에서 직접 응답하여 파일을 전달할 수 있습니다.
4. CDN (Content Delivery Network) 사용: 정적 리소스를 CDN에 배포하면 전 세계 여러 지역의 서버를 통해 정적 리소스를 제공할 수 있습니다. 이는 전체 사용자에게 빠른 속도로 리소스를 제공하고, 서버의 부하를 분산시킬 수 있는 장점이 있습니다.

위의 예시들은 Spring Boot 프로젝트에서 정적 리소스를 제공하는 이유 중 일부입니다. 정적 리소스를 함께 배포함으로써 프론트엔드와 백엔드를 통합하고, 초기 로딩 성능 개선, 정적 파일 제공, CDN 사용 등의 이점을 얻을 수 있습니다.

feat.Chat GPT

 

아래 링크를 통해 호스팅에 대한 개념 이해를 도울 수 있다.

https://brunch.co.kr/@skykamja24/194

도메인? 호스팅이 뭔가요?

 

---

 

03) 실행

 

① vue 프로젝트 build

 

터미널에서 명령어를 통해 프로젝트를 build한다.

>> npm run build

 

 

 

정상 build가 완료되면 아래와 같이 spirng boot 프로젝트에 static폴더가 생성된 것을 확인할 수 있다.

 

 

 

 

---

 

② spring boot 프로젝트 build

spring boot 프로젝트 또한 build 한 후, SpringBootApplication파일을 실행시키고 url에 "localhost:설정한 포트번호"를 입력하면 정상적으로 페이지가  표출된다.

 

 

 

 

---

 

03. 기타

블로그를 찾아보니 간혹 새로고침시 에러가 발생하는 경우가 있다며, ErrorController도 생성해 주어야한다고 하더라

package com.ham.backend.controller;

import org.springframework.boot.web.servlet.error.ErrorController;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;

@Controller
public class WebErrorController implements ErrorController {

    @GetMapping({"/","/error"})
    public String redirctRoot() {
        return "index.html";
    }

    public String getErrorPath() {
        return "/error";
    }

}

 

 

하는김에 ApiController하나 더 만들었당