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

7459 단어 gradlegradle

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

[java, #4] 웹어플리케이션 제작 큰그림
W과정 JQuery 15일차 - 0813

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage