[Gradle] Spring Boot & NPM 으로 프론트엔드 라이브러리 관리하기

티스토리 뷰

개발/TIL (Today I Learned)

[Gradle] Spring Boot & NPM 으로 프론트엔드 라이브러리 관리하기

준드래곤 2020. 4. 24. 11:35

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

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

WebJar
NPM

두가지 방법 중 NPM 으로 관리하는 것이 더 좋았다.

여기서 NPM 으로 관리한다는 것은 package.json 으로 dependencies 를 관리한다는 것을 말한다.

즉, npm install 로 의존성을 설치한다.

python 에서 requirement.txt 에 라이브러리 명과 버전을 작성하여 관리하는 것과 같다.

다음의 고려사항이 있다.

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

step 1. 프론트엔드 라이브러리 위치 정하기

스프링 부트에서 정적 리소스를 관리하는 경로에 위치를 정했다.

src/main/resources/static

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

# package.json 생성
$ npm init

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

step 2. 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>

step 3. build.gradle plugin, task 추가하기

maven 보다 gradle 로 빌드를 관리하는 것을 선호한다.
spring boot 를 빌드할 때 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
 */

step 4. 스프링 시큐리티 설정하기

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

@Override
public void configure(WebSecurity web) throws Exception {
    web.ignoring()
            .mvcMatchers("/node_modules/**")
            .requestMatchers(PathRequest.toStaticResources().atCommonLocations());
}

저작자표시

'개발 > TIL (Today I Learned)' 카테고리의 다른 글

[Gradle] lombok - test 환경에서 사용하기 (0)	2020.04.27

공지사항

최근에 올라온 글

최근에 달린 댓글

Total

Today

Yesterday

링크

TAG more

« 2024/12 »
일	월	화	수	목	금	토
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30	31

글 보관함

MINIMAL LIFE,

티스토리 뷰