[Vue.JS] SpringBoot + Gradle 프로젝트 연동

 

 

 

 

 

개인 프로젝트를 진행하기에 앞서 프로젝트 설정 작업 및 언어 선택 등 다양한 선택지와 버전 등 매 순간 선택의 연속이었습니다. 스프링부트 프로젝트를 기반으로 Gradle과 JPA를 활용해서 백엔드(API)를 만들고, 프런트엔드 프레임워크는 Vue 또는 React를 사용하려고 합니다.

 

백엔드는 Java, SpringBoot로 선택하고 프론트쪽을 Vue로 선택은 했지만 서버에 올릴 때는 각자의 서버 구동 방식이 아닌 하나의 프로젝트에서 SpringBoot의 내장 톰캣의 포트만 사용하고 싶었습니다.

 

이러한 방식이 가능한지 가능하다면 설정은 어떻게 하는지 원리는 무엇인지 궁금증이 생겨서 이참에 한번 찾아보고 프로젝트 세팅을 해보겠습니다. (하겠다는 건 방법이 있다는 거겠죠? 😘)

 

 

 

---

#1. SPA ? SSR ?! CSR !?!

SPA의 원리인 CSR(Client Side Rendering)과 SSR(Server Side Rendering)의 기본 개념 간략하게만 알아보겠습니다.

 

 

SPA 란?

• SPA(Single Page Application)는 서버로부터 첫 페이지만 받아오고 이후에는 동적으로 페이지를 구성하는 웹 애플리케이션을 뜻

 

 

SSR 이란 ?

 

• SSR(Server Side Rendering), 즉 서버 측에서 렌더링이 일어난다는 뜻
• 데이터까지 모두 삽입된 상태의 완성된 HTMl을 서버로부터 받아오는 렌더링 방식

 

CSR 이란 ?

 

• CSR(Client Side Rendering)은 말 그대로 SSR과 달리 렌더링이 클라이언트 쪽에서 일어난다는 뜻
• 웹 브라우저에 주소 입력 시 데이터가 없는 빈 HTMl만 받아오고, 데이터는 여러 static 파일들이 로드된 후에 서버에 요청해서 받아오는 방식으로 렌더링

 

 

---

#2. 프로젝트 설정

현재 가장 많이 사용하고 있는 인텔리제이(IntelliJ IDEA) 툴을 이용해서 작업을 해볼 예정입니다. VS Code나 다른 툴에 친숙하시다면 해당 툴에서 작업하셔도 됩니다.

 

해당 내용에서는 SpringBoot 프로젝트를 생성하는 내용은 다루지 않겠습니다. 예전에 작성해 둔 포스팅이 있으니 설정에 참고해 주시고 버전이 낮을 수 있으니 최신 버전으로 업그레이드해주시면 되겠습니다.

 

해당링크는 여기를 클릭해 주세요.

[SpringBoot] IntelliJ에서 Springboot + gradle 실행하기

 

1. Vue 설치 및 프로젝트 생성

#설치
$ npm install -g @vue/cli

#확인
$ vue --version

#vue 프로젝트 생성
$ vue create frontend

#플러그인 세팅 재확인
$ npm i

#vue 프로젝트 시작
$ cd frontend
$ npm run serve

300x250

 

위에서부터 차례대로 명령어 실행해서 Vue 설치 및 Vue 프로젝트를 생성해 줍니다. 여기까지 진행했다면 아래와 같은 구조가 되어있을 겁니다.

참고용 예시

 

---

사실 여기까지만 해도 로컬 테스트는 가능하지만, 저의 목표는 서버 배포까지 완료하는 것입니다.

서버에 이대로 배포하려면 Vue 프로젝트에서 작업하고 빌드된 파일을 스프링부트 프로젝트에 수작업으로 옮겨와야 하고... 생각만 해도 귀찮은 작업 같지 않나요?! 아니시라면 어쩔 수 없지만.. 예... 저는 그래서 스프링부트 내장 톰캣 실행 시 자동으로 Vue Build를 진행하고 결과 파일들은 스프링부트 하위 디렉터리에서 생성될 수 있도록 설정을 하겠습니다.

 

이런 구조로 만들게 된다면 로컬 개발 시에는 포트를 분리해서 쓰고 개발 서버에 올릴 때는 Jar 파일 하나만으로 하나의 포트를 가진 상태로 배포할 수 있게 됩니다.

 

※ 또 다른 방법으로 프로젝트 설정할 수도 있습니다. 결과는 동일합니다. ※
한 프로젝트에 같이 두는 것이 아닌 동일 Depth에 Vue 프로젝트와 SpringBoot 프로젝트를 따로 만들고 경로만 맞춰주면 각각의 소스를 따로 형상관리할 수 있습니다.

 

 

2. Springboot 실행 시 Vue.js 자동 배포 실행 코드 추가

아무튼! 이번 포스팅에서는 SpringBoot 프로젝트 안에서 Vue 프로젝트를 생성하고 빌드를 돌린 후 빌드된 파일의 타겟 위치를 /src/main/resources/static 으로 지정하도록 하겠습니다.

 

// build.gradle 설정 추가


plugins {
    id 'com.moowork.node' version '1.3.1'
}

node {
    workDir = file("./frontend")
    npmWorkDir = file("./frontend")
    nodeModulesDir = file("./frontend")
}

task setUp (type: NpmTask) {
    description = "Install Node.js packages"
    args = ['install']
    inputs.files file('package.json')
    outputs.files file('node_modules')
}

task buildFrontEnd (type: NpmTask, dependsOn: setUp) {
    description = "Build vue.js"
    args = ['run', 'build']
}

processResources.dependsOn 'buildFrontEnd'

// vue.config.js 파일에 설정 추가


const { defineConfig } = require('@vue/cli-service')

module.exports = defineConfig({

    ....(중략)

    transpileDependencies: true,
    outputDir: "../src/main/resources/static",  // 빌드 타겟 디렉토리
    devServer: {
        proxy: {
        	// 로컬 서버 테스트 시 이용
            '/api': {
                // '/api' 로 들어오면 포트 8081(스프링 서버)로 proxy 처리
                target: 'http://localhost:8081',
                changeOrigin: true // cross origin 허용
            }
        }
    }

    ....(중략)

})

// WebConfig.java


@Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {

	....(중략)

    registry.addResourceHandler("/**/*")
            .addResourceLocations("classpath:/static/")
            .resourceChain(true)
            .addResolver(new PathResourceResolver() {
                @Override
                protected Resource getResource(String resourcePath, Resource location) throws IOException {
                    Resource requestedResource = location.createRelative(resourcePath);
                    return requestedResource.exists() && requestedResource.isReadable() ? requestedResource
                            : new ClassPathResource("/static/index.html");
                }
            });
            
            
	....(중략)

}

 

 

여기까지 성공적으로 설정이 되셨다면 아래와 같은 위치에 빌드된 파일이 생성이 됩니다.

 

추가로, 협업하고 계실 때는 아래와 같이 깃 이그노어 파일을 하나 만들어서 설정해 주셔야 다른 작업자들과의 충돌을 예방하실 수 있습니다.

// .gitignore 에 아래의 디렉터리는 Git Commit 예외 처리


....(중략)

/frontend/node_modules
/src/main/resources/static

....(중략)

 

 

---

마치며..

한번 설정한 내용을 다시 스텝을 밟아가면서 기록하고 싶었지만... 이 귀찮음을 이겨내지 못했습니다. 다음에 포스팅할 때는 용기 내서 자료조사부터 설정, 그리고 개발까지 진행하는 내용으로 다시 돌아오겠습니다.

 

제 포스팅을 보시고 설정을 하시다가 막히는 부분이 있으시다면 같이 고민해 볼 수 있도록 댓글을 남겨주세요. 도움이 되실 수도...? 있을 겁니다 😜😜