Spring 웹프로젝트 빌드 설정

코끼릭·2023년 1월 21일

IT

목록 보기

19/24

프론트 프로젝트와 백엔드 프로젝트로 구성된 웹어플리케이션을 동작하려고 할 때 프론트 빌드를 수행하고 백엔드 서버를 구동시켜야 되는 것에 불편함을 느껴 이를 개선하고자 gradle의 node 플러그인을 사용하여 스프링 웹프로젝트가 동작되기 전 프론트엔드 빌드가 수행되도록 설정했다.이를 위한 설정 작업은 아래와 같이 진행됐다.

Spring MVC 설정

PathResourceResolver를 통해 외부에서 들어오는 URL 요청이 들어올 때 서버가 어떤 정적 파일을 반환할지를 설정해준다. addResourceHandler를 통해 모든 URL 목록을 처리할 수 있도록 등록하고 addResourceLocations을 통해 반환할 정적 파일이 있는 디렉터리를 등록한다. 예시의 경우 모든 요청이 하나의 웹페이지 화면(src/resource/static/index.html)을 반환하도록 설정했다.

@Configuration
public class WebMvcConfig implements WebMvcConfigurer {

    @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 requestResource = location.createRelative(resourcePath);
                        return requestResource.exists() && requestResource.isReadable() ?
                                requestResource : new ClassPathResource("/static/index.html");
                    }
                });
    }
}

Vue 프로젝트 빌드 설정

Vite를 사용해 Vue 프로젝트 빌드 결과가 스프링 웹프로젝트가 접근할 수 있는 src/resource/static/에 위치하도록 설정한다. 아래 예시의 경우 프론트엔드 개발 환경에서의 프론트 서버가 백엔드 서버와 동일한 출처로 요청을 보내게 하는 프록시 서버 설정을 통해 CORS 에러를 방지하고자 설정했다.

import {build, defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  server: {
    proxy: {
      // with options: http://localhost:5174/api/test-> http://localhost:8080/test
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, ''),
      }
    },
  },
  build: {
    outDir: '../src/main/resources/static',
    assetsDir: './'
  }
})

Gradle 설정

프로젝트의 의존성을 관리하는 빌드 자동화 툴로 스프링 프로젝트에서 maven과 같이 자주 사용된다. 프로젝트의 빌드와 관련된 작업은 task 단위로 관리되어 수행되고 사용자가 정의한 task가 수행되도록 설정이 가능하다.

task

빌드를 위해 수행되는 원자성을 가진 작업들의 모음이다.

plugin

미리 작성된 task의 집합들로 예제의 경우 프론트 서버 빌드와 관련된 npm task들이 정의된 com.github.node-gradle.node을 사용했다.

build.gradle

기존에 동작되던 스프링 프로젝트 task를
스프링 프로젝트가 컴파일 되기 전 사용자가 정의한 npmBuild task인 npm build run이 동작되도록 설정하고 해당 task는 npmInstall task인 npm install이 동작한 이 후에 수행되도록 설정했다.

plugins {
    id 'org.springframework.boot' version '2.6.6'
    id 'io.spring.dependency-management' version '1.0.11.RELEASE'
    id 'java'
    id "com.github.node-gradle.node" version "3.0.1"
}

repositories {
    mavenCentral()
    gradlePluginPortal()
}

apply plugin: 'com.github.node-gradle.node'

node {
	nodeProjectDir = file("${project.projectDir}/frontend")
	version = '16.16.0'
	download = true
}

task npmBuild(dependsOn: npmInstall, type: NpmTask) {
	args = ['run', 'build']
}

compileJava.dependsOn 'npmBuild'