Gradle - 스프링부트&NPM으로 프론트엔드 라이브러리 관리

dragonappear·2021년 11월 28일

gradle

Gradle

목록 보기

1/5

Spring Boot 에서 NPM 으로 프론트엔드 라이브러리 Gradle 빌드 task 만들기

스프링 부트에서 프론트엔드 라이브러리를 관리하는 방법은 다음과 같다.

WebJar
NPM

여기서 NPM으로 관리한다는 것은 package.json으로 dependencies를 관리한다는 것을 말한다.
즉, npm install로 의존성을 설치한다.

다음의 고려사항이 있다.

프론트엔드 라이브러리 위치
html
build.gradle
스프링 시큐리티

프론트엔드 라이브러리 위치

스프링 부트에서 정적 리소스를 관리하는 경로에 위치를 지정한다.
src/main/resources/main

# 위치 이동
$ cd src/main/resources/static

# package.json 생성
$ npm init

# 부트스트랩 라이브러리 설치
$ npm install bootstrap

다 엔터를 눌러준다. 마지막은 yes를 입력한다.

html 작성하기

css, script 의 소스 경로를 작성한다.

<head>
    <meta charset="UTF-8">
    <title>title</title>
    <link rel="stylesheet" ref="/node_modules/bootstrap/dist/css/bootstrap.min.css" />
    <link rel="stylesheet" href="/node_modules/font-awesome/css/font-awesome.min.css" />
    <script src="/node_modules/jquery/dist/jquery.min.js"></script>
    <script src="/node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
    <script src="/node_modules/jdenticon/dist/jdenticon.min.js"></script>
</head>

build.gradle에 plugin, task 추가하기

스프링 부트를 빌드할때 package.json에 정의된 프론트앤드 라이브러리도 같이 설치 하도록 설정한다.(npm install)

플러그인 추가
nodeModulesDir: package.json 이 위치하는 경로 설정
copyFrontLib task 추가
체인 걸기 - copyFrontLib - npmInstall - compileJava

build.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

/**
 * npm install end
 */

스프링 시큐리티

프론트엔드 라이브러리가 위치하는 경로를 시큐리티 필터에서 ignore 처리해준다.

참고:

https://velog.io/@max9106/SpringBoot-NPM
https://jundragon.tistory.com/8

dragonappear

다음 포스트