[Spring Boot +Vue.js] 게시판 만들기 2 - Frontend 프로젝트 생성

 

 

 

 

 

📑 Node.js 설치하기

 

🟣 Node.js 사이트에서 최신 버전 LTS를 다운받으면 된다.

 

 

https://nodejs.org/ko/

Node.js

 

 

 

다운 받았다면 IntelliJ 아래에 터미널을 열어주고 npm -v로 node의 버전을 살펴보자. 

 

 

 

 

터미널의 기본 값은 powershell로 되어있는데 git bash를 사용하고 싶다면  File -> settings -> tools -> terminal로 이동한다. shell path를 보면 경로가 적혀있는데 저장하였던 git 파일에 들어가 bin이 위치한 sh.exe 파일을 선택하여 준다. 

파일 경로 뒤에 -login -i를 입력해준 뒤 IntelliJ를 껐다 키면 git bash 터미널 적용이 완료된 걸 확인할 수 있다. 

 

"C:\Program Files\Git\bin\sh.exe" -login -i

 

 

 

 

 

 

📑 Vue Project 설치하기 

 

🟣 1. 프로젝트 파일로 이동하여 npm i -g @vue/cli를 입력 후 엔터를 눌러준다.

 

이미 프로젝트 경로가 파일 내부로 잡혀있을 것이다. 만약 command not found 에러가 뜬다면 아래 링크를 참고해서 환경변수를 잡아주자.

 

https://wonisdaily.tistory.com/209

[Node.js] bash: npm: command not found 환경변수 설정

 

 

 

 

 

🟣 2. vue/cli 설치가 완료되었는지 확인한다. vue --version으로 버전 확인

 

 

 

🟣 3. vue 프로젝트 생성 명령어 입력하기 ( vue create 프로젝트명)

 

 

vue create 명령어를 입력하면 please pick a preset이라는 버전을 선택할 수 있는 선택창이 뜨는데 여기서 Default(Vue 3)으로 설정해줬다.

 

 

🟣 5. 프로젝트 실행시키기 

 

 

프로젝트를 생성하고 난 후 cd로 프로젝트명으로 이동한다.  그 다음 npm run serve로 vue  프로젝트를 실행시킨다. 

 

 

 

아래와 같은 로컬, 네트워크 주소창이 나왔다면 실행 성공! alt를 누르며 local 주소를 클릭하거나 복사해서 검색창에 localhost:8080을 입력하면 된다. 

 

 

아래와 같이 vue 프로젝트 화면이 뜨면 프로젝트 생성은 완료된 것이다. 

 

 

📑 Front와 Back 연동하기 

 

 

만약 Spring Boot와 Vue.js를 서로 연동하지 않으면, Vue.js를 이용해 만든 클라이언트 쪽 페이지의 구성을 바꿀 때 마다 매번 build를 하고 build 결과물을 spring boot 쪽의 resource/static으로 이동시켜줘야 하기에 매우 번거롭다.

 

개발환경에선 spring boot 서버도 켜주고, vue.js 서버도 켜서 port 2개를 두고 진행하게 될테지만, 배포 시엔 서버를 2개나 두기엔 곤란할 수 있다. 때문에 실 배포환경에선 연동을 통해 Vue.js의 빌드 결과물의 목적지를 spring boot의 resource/static으로 맞추고, 실 서버는 spring boot 서버 하나만 두게 할 것이다. 

 

 

연동은 proxy 서버라는 것을 활용한다. proxy란? 직역하면 '대리', '대리인'인데, 여기서는 정확하게 '중계', '중계인'이라고 표현하면 될 것 같다. 말 그대로, 서로 연결점이 없거나 보안상의 이유로 직접 통신할 수 없는 외부 네트워크들을 간접적으로 연결시키는 중계인 역할을 한다. 

 

즉) Spring Boot와 Vue.js를 연결하기 위해 중계인인 proxy가 필요하다. 

 

 

 

---

 

 

frontend 패키지 안에 javascript file을 vue.config.js라는 이름으로 생성해준다. 이미 생성되어 있는 경우 패스 ~ 원래 있던 내용은 주석처리 하고 다음과 같이 설정해준다.

(앞 포스팅에서 백앤드 서버를 server.port = 8081로 변경해두었다. )

 

 

const { defineConfig } = require('@vue/cli-service')
module.exports = {
  outputDir: "../src/main/resources/static",
  devServer: {
    port: 8082,
    proxy: {
      '/api': {
        target: 'http://localhost:8081',
        changeOrigin: true //cross origin 허용
      }
    }
  }
};

 

 

🎈 outputDir 

 - vue.js 빌드 결과물을 spring boot 서버 쪽의 ../src/main/resources/static 에 만들도록 설정한 것이다. 

 

🎈 devServer

 - 개발 환경에서의 서버를 설정한다. 

 - 위에 설명에 따르면, 개발 환경에선 프록시로 데이터를 vue.js 서버에서 spring boot로 넘겨주는 것이고, 실제 빌드/배포 시엔 설정해준 outputDir을 통해 vue.js 빌드 결과물을 spring boot 쪽 경로로 보내고 spring boot 서버 하나만 배포한다. 

 

 - port : vue.js의 포트 번호를 설정해준다. 

 - proxy : '/api'라는 경로로 접근하면, target(spring boot서버)으로 요청을 넘긴다는 뜻이다. 

 - changeOrigin : cross origin을 허용한다는 뜻으로, 말 그대로 "교차 출처"를 허용한다는 말이다. 교차 출처란 다른 출처를 의미한다. 여기서는 서로 다른 포트를 의미한다.      

 

 

 

---

 

 

보낸 데이터를 받아줄 컨트롤러를 하나 만들어 준다. 모든 설정이 끝이 났으므로 테스트 결과인 로그가 잘 출력되나 확인하면 된다. 

 

package com.vueSpring.board_project.controller;

import lombok.extern.slf4j.Slf4j;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

@Slf4j
@RequestMapping("/api")
@RestController
public class TestController {

    @GetMapping("test")
    public void getTest(){
        log.info("테스트 컨트롤러");
    }
}

 

 

일단 스프링 서버도 한 번 껐다 켜주고, 터미널 가서 ctrl + c 눌러 npm 서버도 꺼준 다음에 다시 npm run serve로 서버를 가동 시킨다. localhost:8082/api/test 

 

 

 

 

 

 

 

 

 

참고 : https://choidoosic.tistory.com/167, https://doozi0316.tistory.com/entry/Vuejs-Spring-Boot-MySQL-MyBatis-%EB%A7%9B%EC%A7%91-%EC%A7%80%EB%8F%84-%EB%A7%8C%EB%93%A4%EA%B8%B01-Spring-Boot-Vuejs-%EC%84%A4%EC%B9%98-%EB%B0%8F-%EC%97%B0%EB%8F%99%ED%95%98%EA%B8%B0