[Spring] SpringBoot + Gradle + NPM Build 셋팅하기

프론트엔드 라이브러리의 경우 url을 사용해서 참조하는 경우가 많은데, 해당 서버에 장애가 발생하거나 url이 변경되는 경우에 나의 프로젝트에까지 영향을 미치게된다.

그래서 이번시간에는 해당 라이브러리들을 npm install로 다운 받아 gradle 내에서 같이 build 되도록 하는 방법을 공유하려한다.

 

버전

OS : Mac

스프링 : 2.2.4 RELEASE

그래들 : 6.4.1

 

프론트엔드 라이브러리 설정

• NPM 선호

 

고려해야하는 사항

• 빌드, 버전관리, 시큐리티 설정

프로젝트 resources/static 경로로가서

npm init 
엔터를 입력하다보면 init이되고 package.json이 생성된다
npm install bootstrap //bootstrap    설치해주고

설치를했으면 css를 bootstrap cdn에서 받아오지 않아도된다.
As-Is
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

To-Be
<link rel="stylesheet" href="/node_modules/bootstrap/dist/css/bootstrap.min.css" />

• 그리고 gitignore에는 node_module을 제외시켜준다
  또한 빌드툴(메이븐/그래들)에서 해당 패키지를 같이 빌드하도록 설정을 해줘야한다.

 

jQuery 설치

npm install jquery --save

 

Gradle 설정 방법

plugins {
    id "com.github.node-gradle.node" version "2.2.3"
}

/**
 * npm install start
 */
node {
    version = '12.13.1'
    download = true
    nodeModulesDir = file("${projectDir}/src/main/resources/static")
}

task copyFrontLib(type: Copy) {
    from "${projectDir}/src/main/resources/static"
    into "${projectDir}/build/resources/main/static/."
}

copyFrontLib.dependsOn npmInstall
compileJava.dependsOn copyFrontLib

그래들 설정까지 했다면, 시큐리티에서 빌드한 경로에대한 허용을 적용해줘야한다.

 

static resources에 대한 경로가 바뀌었기 때문에 시큐리티에서 막아버린다.

SecurityConfig.java

//img를 허용해주기 위한 설정
    @Override
    public void configure(WebSecurity web) throws Exception {
        web.ignoring()
                .mvcMatchers("/node_modules/**","/img/**")
                .requestMatchers(PathRequest.toStaticResources().atCommonLocations()); //static resources들에 대한 허용
    }