어드민 프로젝트를 만들 때 spring project 내부에 static 위치에 front 관련 코드를 위치시켜서 화면과 api를 하나의 프로젝트에서 진행하는 경우가 있다. 이 경우 gradle를 통해서 npm build를 진행하게되는데 같이 개발을 진행하는 개발자들 로컬 node.js 버전과 서버 node.js 버전에 따라서 프론트에서 사용하는 일부 라이브러리등이 build시 지원되지 않는 경우가 있다.
나같은 경우에는 서버는 node js버전이 12이었고 node-sass 버전을 4.x를 쓰고 있었다. 그러나 회사에서 제공하는 서버의 node 버전이 16으로 업그레이드 되면서 nodes-sass 6.x 이상으로 올려야했다. 근데 node-sass를 올릴 경우 사용되고 있는 script-ext-html-webpack-plugin이나 vue 2.x버전등이 지원을 하지 않아서 프로젝트 전반의 lib를 모두 업데이트 해야했다.
해결책을 찾던 중 Gradle node.js plugin이 있어 적용해봤고 해결하게되어 나중에 다시 보기 위해 정리해봤다.
적용방법
해당 플러그인을 사용하게 되면 system에 grobal하게 설치되어있는 node.js버전을 사용하지 않고 기재한 node 버전을 .gradle 디렉토리에 다운로드 받고 그것을 사용하게 된다.
build.gradle
// 1
plugins {
id "com.github.node-gradle.node" version "3.2.1"
id "java"
}
apply plugin: 'com.github.node-gradle.node'
node {
// 2
version = '12.22.12'
npmVersion = '6.14.16'
// 3
download = true
// 4
nodeProjectDir = file("${project.projectDir}/src/frontend")
}
// 5
task buildAdmin(type: NpmTask) {
args = ['run', 'build']
}
processResources.dependsOn 'buildAdmin'
1) Gradle node js plugin을 사용하기 위해 PluginsDsl에 선언하고 가져온다.
2) 사용하고자 하는 node와 npm버전을 명시한다.
3) download가 true이면 위에 명시한 node js를 다운로드 받아서 사용하고 false인 경우 다운받지 않는다. (필히 true설정)
4) npm run build를 실행할 프로젝트의 위치가 build.gradle위치와 다를 경우 projectDir기준 상대 경로를 작성해준다.
5) gradle build실행 시 수행될 task를 명시해주는데 이때 NpmTask를 사용해야 node js plugin이 사용된다. commandLine등으로 npm run build를 수행할 경우 동작하지 않으니 주의해야한다.
https://plugins.gradle.org/plugin/com.github.node-gradle.node
'web > Spring' 카테고리의 다른 글
Dynamodb enhanced client (0) | 2022.07.24 |
---|---|
lombok에서 @builder annotation 사용 후 static 접근 시 cannot find symbol 에러 문제 (0) | 2022.06.05 |
S3Mock을 사용한 S3 테스트 방법 (0) | 2022.03.08 |
만들면서 배우는 아키텍처 그리고 매핑 프레임워크 MapStruct를 사용한 매핑 (0) | 2022.02.02 |
@Transactional이 동작하지 않는 이유 (0) | 2022.01.07 |