유도지

Java Developer

[Gradle] Gradle Spring BootMultiple Vue Build

구글 검색을 해보면 Spring Boot Gradle + 하나의 vueJS Project Build만 나와있는 경우가 많습니다.

조금 더 응용하여 Spring Boot Gradle + 여러개의 vueJS 빌드하는 방법에 대해 공유하고자 합니다.

Vue 프로젝트 구조 .

build.gradle 수정!!

plugins {
    /**
     * https://github.com/node-gradle/gradle-node-plugin 
     * nodeJS 빌드를 gradle에서 해줍니다. 계속 유지보수중이라 사용하기 좋아요!
     */
    id 'com.github.node-gradle.node' version '3.1.0'
}

node {
    // nodeJS 버전을 지정합니다.
    version = '14.17.0'
    // true일 경우 위에 지정한 node version으로 다운로드 받아서 실행합니다.
    // 따로 설치하지 않을려면 download = true로 진행
    // false일 경우 global로 설치된 nodeJS가 있어야 합니다.
    download = true
  
    // nodeJS 프로젝트 location 지정
    // default로 하나의 프로젝트를 지정하도록 합니다.
    nodeProjectDir = file("${projectDir}/frontend/project1")
}

/**
 * dependsOn: setUp이 걸려있는 task는 먼저 dependsOn을 실행 후 해당 task를 실행합니다.
 * task setup은 vueJS 프로젝트에 필요한 package를 install 합니다.
 */
task setUp(type: NpmTask) {
    description = "install nodeJS packages"
    args = ["install"]
}

/**
 * 빌드 대상 vueJS project를 각각 task로 설정합니다.
 * workingDir로 각각의 프로젝트 root 폴더를 바라볼 수 있도록 합니다.
 */
task project1Build(type: NpmTask, dependsOn: setUp) {
    description = "Build Project1"
    workingDir = file("${projectDir}/frontend/project1")
    args = ["run", "build"]
}

task project2Build(type: NpmTask, dependsOn: setUp) {
    description = "Build Project2"
    workingDir = file("${projectDir}/frontend/project2")
    args = ["run", "build"]
}

task project3Build(type: NpmTask, dependsOn: setUp) {
  description = "Build Project3"
  workingDir = file("${projectDir}/frontend/project3")
  args = ["run", "build"]
}

/**
 * frontend 하위 dir을 돌면서 위 project build task를 실행합니다.
 */
new File("${project.projectDir}/frontend").eachDir { projectName ->
  processResources.dependsOn "${projectName}Build"
}

빌드 결과!!

아래 순으로 Task가 진행되는것을 볼 수 있습니다!

Task :nodeSetup
Task :setUp
Task :project1Build
Task :project2Build
Task :project3Build
spring boot 관련 빌드 진행…

3:04:13 오후: Executing task 'build --stacktrace'...
 
> Task :compileJava UP-TO-DATE
> Task :nodeSetup
> Task :npmSetup SKIPPED
 
> Task :setUp
audited 1413 packages in 5.638s
 
78 packages are looking for funding
  run `npm fund` for details
 
found 132 vulnerabilities (119 moderate, 12 high, 1 critical)
  run `npm audit fix` to fix them, or `npm audit` for details
 
> Task :project1Build
 
> frontend@0.1.0 build /Users/test-project/frontend/project1
> vue-cli-service build
 
##### vue build target: local
 
-  Building for local...
 WARNING  Compiled with 2 warnings3:04:36 PM
 
 warning 
 
asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets:
  js/chunk-vendors.3555b132.js (462 KiB)
 
 warning 
 
entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
Entrypoints:
  app (485 KiB)
      js/chunk-vendors.3555b132.js
      css/app.342c0a50.css
      js/app.56e7b3cf.js
 
 
  File                                      Size             Gzipped
 
  ../../src/main/resources/static/project1    461.58 KiB       139.39 KiB
  /js/chunk-vendors.3555b132.js
  ../../src/main/resources/static/project1    200.11 KiB       51.43 KiB
  /js/chunk-056e7852.0f916084.js
  ../../src/main/resources/static/project1    21.72 KiB        8.28 KiB
  /js/chunk-48d802ba.aba8d5b7.js
  ../../src/main/resources/static/project1    19.25 KiB        6.50 KiB
  /js/app.56e7b3cf.js
  ../../src/main/resources/static/project1    8.67 KiB         3.23 KiB
  /js/chunk-082c73ca.b0789044.js
  ../../src/main/resources/static/project1    1.52 KiB         0.69 KiB
  /js/chunk-27a95d4c.a63c84a3.js
  ../../src/main/resources/static/project1    1.06 KiB         0.62 KiB
  /js/chunk-091955a4.571caf72.js
  ../../src/main/resources/static/project1    30.17 KiB        6.99 KiB
  /css/chunk-056e7852.414581ae.css
  ../../src/main/resources/static/project1    4.06 KiB         1.42 KiB
  /css/app.342c0a50.css
  ../../src/main/resources/static/project1    2.41 KiB         0.73 KiB
  /css/chunk-082c73ca.d4e9cbb2.css
  ../../src/main/resources/static/project1    0.51 KiB         0.29 KiB
  /css/chunk-27a95d4c.b03457a9.css
  ../../src/main/resources/static/project1    0.38 KiB         0.24 KiB
  /css/chunk-091955a4.0584ada6.css
  ../../src/main/resources/static/project1    0.04 KiB         0.06 KiB
  /css/chunk-48d802ba.28bb29d4.css
 
  Images and other types of assets omitted.
 
 DONE  Build complete. The ../../src/main/resources/static/project1 directory is ready to be deployed.
 INFO  Check out deployment instructions at https://cli.vuejs.org/guide/deployment.html


> Task :project2Build

        > frontend@0.1.0 build /Users/test-project/frontend/project2
        > vue-cli-service build

##### vue build target: local

-  Building for local...
WARNING  Compiled with 2 warnings3:04:36 PM

warning

asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets:
js/chunk-vendors.3555b132.js (462 KiB)

warning

entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
Entrypoints:
app (485 KiB)
js/chunk-vendors.3555b132.js
css/app.342c0a50.css
js/app.56e7b3cf.js


File                                      Size             Gzipped

        ../../src/main/resources/static/project2    461.58 KiB       139.39 KiB
/js/chunk-vendors.3555b132.js
        ../../src/main/resources/static/project2    200.11 KiB       51.43 KiB
/js/chunk-056e7852.0f916084.js
        ../../src/main/resources/static/project2    21.72 KiB        8.28 KiB
/js/chunk-48d802ba.aba8d5b7.js
        ../../src/main/resources/static/project2    19.25 KiB        6.50 KiB
/js/app.56e7b3cf.js
        ../../src/main/resources/static/project2    8.67 KiB         3.23 KiB
/js/chunk-082c73ca.b0789044.js
        ../../src/main/resources/static/project2    1.52 KiB         0.69 KiB
/js/chunk-27a95d4c.a63c84a3.js
        ../../src/main/resources/static/project2    1.06 KiB         0.62 KiB
/js/chunk-091955a4.571caf72.js
        ../../src/main/resources/static/project2    30.17 KiB        6.99 KiB
/css/chunk-056e7852.414581ae.css
        ../../src/main/resources/static/project2    4.06 KiB         1.42 KiB
/css/app.342c0a50.css
        ../../src/main/resources/static/project2    2.41 KiB         0.73 KiB
/css/chunk-082c73ca.d4e9cbb2.css
        ../../src/main/resources/static/project2    0.51 KiB         0.29 KiB
/css/chunk-27a95d4c.b03457a9.css
        ../../src/main/resources/static/project2    0.38 KiB         0.24 KiB
/css/chunk-091955a4.0584ada6.css
        ../../src/main/resources/static/project2    0.04 KiB         0.06 KiB
/css/chunk-48d802ba.28bb29d4.css

Images and other types of assets omitted.

DONE  Build complete. The ../../src/main/resources/static/project2 directory is ready to be deployed.
INFO  Check out deployment instructions at https://cli.vuejs.org/guide/deployment.html


> Task :project3Build

        > frontend@0.1.0 build /Users/test-project/frontend/project3
        > vue-cli-service build

##### vue build target: local

-  Building for local...
WARNING  Compiled with 2 warnings3:04:36 PM

warning

asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets:
js/chunk-vendors.3555b132.js (462 KiB)

warning

entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
Entrypoints:
app (485 KiB)
js/chunk-vendors.3555b132.js
css/app.342c0a50.css
js/app.56e7b3cf.js


File                                      Size             Gzipped

        ../../src/main/resources/static/project3    461.58 KiB       139.39 KiB
/js/chunk-vendors.3555b132.js
        ../../src/main/resources/static/project3    200.11 KiB       51.43 KiB
/js/chunk-056e7852.0f916084.js
        ../../src/main/resources/static/project3    21.72 KiB        8.28 KiB
/js/chunk-48d802ba.aba8d5b7.js
        ../../src/main/resources/static/project3    19.25 KiB        6.50 KiB
/js/app.56e7b3cf.js
        ../../src/main/resources/static/project3    8.67 KiB         3.23 KiB
/js/chunk-082c73ca.b0789044.js
        ../../src/main/resources/static/project3    1.52 KiB         0.69 KiB
/js/chunk-27a95d4c.a63c84a3.js
        ../../src/main/resources/static/project3    1.06 KiB         0.62 KiB
/js/chunk-091955a4.571caf72.js
        ../../src/main/resources/static/project3    30.17 KiB        6.99 KiB
/css/chunk-056e7852.414581ae.css
        ../../src/main/resources/static/project3    4.06 KiB         1.42 KiB
/css/app.342c0a50.css
        ../../src/main/resources/static/project3    2.41 KiB         0.73 KiB
/css/chunk-082c73ca.d4e9cbb2.css
        ../../src/main/resources/static/project3    0.51 KiB         0.29 KiB
/css/chunk-27a95d4c.b03457a9.css
        ../../src/main/resources/static/project3    0.38 KiB         0.24 KiB
/css/chunk-091955a4.0584ada6.css
        ../../src/main/resources/static/project3    0.04 KiB         0.06 KiB
/css/chunk-48d802ba.28bb29d4.css

Images and other types of assets omitted.

DONE  Build complete. The ../../src/main/resources/static/project3 directory is ready to be deployed.
INFO  Check out deployment instructions at https://cli.vuejs.org/guide/deployment.html


> Task :processResources UP-TO-DATE
> Task :classes UP-TO-DATE
> Task :bootJar UP-TO-DATE
> Task :jar SKIPPED
> Task :assemble UP-TO-DATE
> Task :compileTestJava UP-TO-DATE
> Task :processTestResources NO-SOURCE
> Task :testClasses UP-TO-DATE
> Task :test UP-TO-DATE
> Task :check UP-TO-DATE
> Task :build UP-TO-DATE
 
Deprecated Gradle features were used in this build, making it incompatible with Gradle 7.0.
Use '--warning-mode all' to show the individual deprecation warnings.
See https://docs.gradle.org/6.3/userguide/command_line_interface.html#sec:command_line_warnings
 
BUILD SUCCESSFUL in 34s
9 actionable tasks: 4 executed, 5 up-to-date
3:04:48 오후: Task execution finished 'build --stacktrace'.

gradle build 성공!!

위 코드를 조금만 응용하면 선택한 vueJS project만 build 하는 것도 가능합니다!!

gradle vue build SpringBoot

2023 17
2021 15

2023

[linux] shell script version compare

최대 1 분 소요

개요 linux를 사용하다 보면 version 비교하는 기능이 필요합니다. 특히 기존 설치된 패키지의 version을 확인하여 업데이트할 경우가 있겠죠. 아래와 같이 간단한 shell script로 구현할 수 있습니다.

[spring batch] spring batch 5 migration

4 분 소요

개요

[jdk] temurin jdk21 release

최대 1 분 소요

jdk 21 출시!!

[jenkins] jenkins docker install

2 분 소요

ci/cd 오픈소스 도구로 가장 많이 사랑 받는 jenkins에 대해 포스팅 해보겠습니다. 먼저 설치부터 해야겠지요? 항상 패키지 매니저로 설치했었는데 이번에는 docker로 설치해보도록 하겠습니다.

[linux] curl과 jq를 이용한 github api 조회

2 분 소요

개요 github rest API 문서를 보면 재미있는 API들이 있습니다. 오늘은 그 중 최신 release 가져오는 API를 만져보도록 하겠습니다.

[jdk] jdk21 string templates

2 분 소요

개요

[linux] shell script function non-standard

최대 1 분 소요

개요 intellij에서 shell script 코드를 작성할 때 이런 warning 메시지를 보여주더군요.

[jdk] jdk21 release

1 분 소요

개요

[springboot] springboot test webclient

3 분 소요

개요

[springboot] springboot intellij-community lombok

최대 1 분 소요

개요

[springboot] springboot history

2 분 소요

springboot 탄생 배경 springboot란 spring framework를 좀 더 쉽게 개발/배포할려는 목적으로 만들어 졌습니다. 2012년 Mike Youngstrom은 spring 프레임워크에서 컨테이너 없는 웹 애플리케이션 아키텍처에 대한 지원을 요청하는 spring...

[springboot] springboot intellij-community import

1 분 소요

개요 지난번 spring-initializer를 통해 프로젝트를 생성하여 파일로 다운로드 받았습니다.

[springboot] springboot3 querydsl 적용

1 분 소요

개요 springboot3로 메이저 업그레이드 되면서 JPA + querydsl 셋팅 환경에 변화가 생겼습니다. 기존 의존성으로는 작동하지 않고 jakarta classification을 추가해야 작동하는 이슈가 발생합니다. springboot3부터 javax -> jakar...

[springboot] springboot3 migration

최대 1 분 소요

개요 2022년 하반기에 springboot3가 공식 release 되었습니다. springboot2가 2018년 상반기에 release되고 나서 새롭게 판올림 버전으로 가장 큰 변화로는 아래와 같습니다. spring framework 6 적용 최소 사양 JDK 17 ...

[springboot] springboot initializer

1 분 소요

개요 항상 intellij ultimate 버전만 사용하고 있었는데 무슨 바람이 난건지.. intellij ce 버전에 도전하였습니다. springboot 프로젝트 생성이며.. 그 밖에 기본적으로 될꺼라 싶은것 중에 안되는 녀석들도 꽤 있더군요. 이번 시간엔 간단하게 spingbo...

[querydsl] querydsl No release for a long time

최대 1 분 소요

개요 JPA를 spring data jpa + querydsl과의 조합으로 접하는 경우가 많습니다. spring data jpa에서 제공해주는 specification으로도 충분히 해낼수 있지만 querydsl에 비할바는 아닙니다. entity에 wrapper Q클래스를 생성하여 ...

[jekyll] jekyll install

6 분 소요

개요 오랫동안 방치했던 블로그를 다시 열면서 jekyll를 다시 설치해봤습니다. 설치 jekyll 프로젝트로 이동하여 아래 명령어를 입력합니다. gem install jekyll bundler Fetching pathutil-0.16.2.gem Fetching terminal-t...

맨 위로 이동 ↑

유도지

[Gradle] Gradle Spring BootMultiple Vue Build

2023

[linux] shell script version compare

[spring batch] spring batch 5 migration

[jdk] temurin jdk21 release

[jenkins] jenkins docker install

[linux] curl과 jq를 이용한 github api 조회

[jdk] jdk21 string templates

[linux] shell script function non-standard

[jdk] jdk21 release

[springboot] springboot test webclient

[springboot] springboot intellij-community lombok

[springboot] springboot history

[springboot] springboot intellij-community import

[springboot] springboot3 querydsl 적용

[springboot] springboot3 migration

[springboot] springboot initializer

[querydsl] querydsl No release for a long time

[jekyll] jekyll install

2021

[코딩테스트] 프로그래머스 - [1차] 캐시(JAVA)

[유틸리티] GitHub Source Search

[코딩테스트] 프로그래머스 - x만큼 간격이 있는 n개의 숫자(JAVA)

[코딩테스트] 프로그래머스 - 폰켓몬(JAVA)

[linux] Parse yaml

[코딩테스트] 프로그래머스 - 실패율(JAVA)

[유틸리티] UML 다이어그램 작성 툴

[Gradle] Gradle Spring BootMultiple Vue Build

[코딩테스트] 프로그래머스 - 완주하지 못한 선수(JAVA)

[코딩테스트] 프로그래머스 - 숫자 문자열과 영단어(JAVA)

[코딩테스트] 프로그래머스 - 음양 더하기(JAVA)

[코딩테스트] 프로그래머스 - 내적(JAVA)

[유틸리티] Mock Http Status Test

[코딩테스트] 프로그래머스 - 짝지어 제거하기(JAVA)

[코딩테스트] 프로그래머스 - 신규 아이디 추천(JAVA)