[vue] vue와 spring 연동하는법(vue 배포방법)

vue를 배포할때는 크게 두가지 방법을 사용합니다.

 

• nginx, appach, IIS 등 웹서버에 빌드된 html파일을 넣는다
• was에 붙여서 배포한다
• aws s3
• aws cloudfront

첫번째 방법과 두번째 방법을 정리합니다.

 

1. nginx, appach, IIS 등 웹서버에 연동하는 방법

저는 nginx를 사용하였습니다.

 

(1). dockerfile 작성

FROM node as build-stage
WORKDIR /app
COPY . .

RUN yarn install -g
RUN yarn run build

# # production stage
FROM nginx:stable-alpine as production-stage
COPY  ./nginx/nginx.conf /etc/nginx/conf.d/default.conf

COPY --from=build-stage /app/dist /usr/share/nginx/html
EXPOSE 8086
CMD ["nginx", "-g", "daemon off;"]

멀티 스테이징을 이용하여 도커이미지를 만드는 dockerfile을 만들어줍니다.

node의 환경에서 yarn install, build후 결과파일을

nginx환경의 /usr/share/nginx/html로 보내줍니다.

 

(2). nginx.conf파일 작성

도커파일을 작성한 후 dockerfile에서 사용하는 nginx.conf파일을 만들어줍니다.

위치는 ./nginx/nginx.conf 입니다.

server {
  listen 8086;
  client_max_body_size 5M;

  location / {
    alias /usr/share/nginx/html/;
    try_files $uri $uri/ /index.html;
  }
}

 

(3). docker build, run

$ docker build -t {내이미지이름} .
$ docker run -d -p 8086:8086 {내이미지이름}

html파일이 하나만 떨어지는 spa프레임워크인 vue는

프론트 서버를 아주 쉽게 배포할 수 있습니다.

 

 

그러나 이 방식에는 단점도 있습니다.

백엔드와 프론트엔드 포트를 두개 열어줘야하고 두개의 컨테이너이므로 관리가 불편하고, 쿠버네티스 환경이라면 백엔드와 통신하기 위해 cluster-ip를 만들어줘야 하는 단점이 있습니다.

 

거대한 서비스라면 이렇게 해야하지만 vue를 이용해 백오피스 frontend를 개발하는 경우거나, 간단한 토이프로젝트에서는 굳이 이렇게 해야할 필요는 없습니다.

 

사실 스케일 아웃에는 별로 좋은선택이 아니고, was를 타는것보다 ws에 프론트서버를 띄우는게 성능적으로도 더 좋지만 spring과 vue를 합치는 방법도 있습니다.

 

 

2. was에 붙여서 배포하는 방법

(1). vue.config.js 파일 수정

// vue.config.js
const path = require("path");
module.exports = {
  outputDir: path.resolve(__dirname, "../src/main/resources/static"),
  indexPath: path.resolve(__dirname, "../src/main/resources/static/index.html"),
}

vue.config.js 파일을 수정해줍니다.

 

스프링은 resource의 static에 html파일이 들어가면 됩니다.

(thymeleaf같은 템플릿 엔진을 사용하고있다면 resources/templates에 넣어야 합니다.)

 

이제 소스를 빌드하게되면 html과 css, js가 스프링 프로젝트의 resource/static 에 안착하게 됩니다.

 

이제 @Controller를 하나 만들어서 /요청을 index에 보내주기만 하면 성공입니다.

 

빌드할때는 도커파일이나 shell을 작성해서 프론트를 빌드하고 static에 결과파일을 넣어줘도 되지만

gradle, maven의 라이프사이클에 프론트엔드를 같이 빌드할수 있도록 도와주는 플러그인을 끼워넣을수 있으므로 끼워넣어줘도 됩니다.  

 

(아래는 연동하자마자 바로 겪게되는 에러입니다.)

[vue] 스프링(spring)에서 vue router 사용법