본문 바로가기
Chapter02/프로젝트01

[Spring Boot] Backend Frontend 같이 빌드하기

by EmmaDev_v 2024. 3. 14.

팀 프로젝트를 빌드해야한당

 

후후,.,, 그런데,, 

 

task buildFrontend(type: Exec) {
    workingDir file('src/main/frontend')
    commandLine 'npm.cmd', 'install'
    commandLine 'npm.cmd', 'run', 'build'
}

 

 

 

 

 

 

 

 

 

빌드를 하면 이런 화면이 뜬다ㅠㅠㅠㅠㅠ

 

 

 

 

( 근데 아무리 검색해도 이 화면은 안나오는데 나 같은 바보가 정말 나 한 명 인건가,,?

이런 바보는 없는거야 나 말고 한 명도? )

 

 

 

 

 

 

 

 

영문도 모르고 뭐가 잘못된건가

얼레벌레 한참을 헤맸고,,,

 

 

 

우리 프로젝트 구조상

백엔드와 프론트엔드가 같이 빌드되지 않고있다는걸 알게되었다

 

 

 

 

아래와같이 build.gradle파일을 수정하고 새로 빌드해보면

plugins {
	id 'java'
	id 'org.springframework.boot' version '3.2.1'
	id 'io.spring.dependency-management' version '1.1.4'
}

group = 'mogakco'
version = '0.0.1-SNAPSHOT'

java {
	sourceCompatibility = '17'
}

configurations {
	compileOnly {
		extendsFrom annotationProcessor
	}
}

repositories {
	mavenCentral()
}

dependencies {
	implementation 'org.springframework.boot:spring-boot-starter-web'
	implementation 'org.springframework.boot:spring-boot-starter-data-jpa:3.1.2'
	implementation 'org.springframework.boot:spring-boot-starter-security'
	implementation group: 'org.springframework.boot', name: 'spring-boot-starter-validation', version: '3.1.2'
    implementation 'com.github.ulisesbocchio:jasypt-spring-boot-starter:3.0.3'
	implementation 'io.jsonwebtoken:jjwt-api:0.12.3'
    implementation 'io.jsonwebtoken:jjwt-impl:0.12.3'
    implementation 'io.jsonwebtoken:jjwt-jackson:0.12.3'
	implementation 'mysql:mysql-connector-java:8.0.28' 
	implementation 'org.springdoc:springdoc-openapi-starter-webmvc-ui:2.2.0'
	implementation 'org.springframework.boot:spring-boot-starter-data-redis'
	implementation 'org.springframework.boot:spring-boot-starter-batch'
	implementation 'org.springframework.boot:spring-boot-starter-mail'

	compileOnly 'org.projectlombok:lombok'
	annotationProcessor 'org.projectlombok:lombok'
	testImplementation 'org.springframework.boot:spring-boot-starter-test'
	testImplementation 'org.junit.jupiter:junit-jupiter:5.7.1'
    testRuntimeOnly 'org.junit.platform:junit-platform-launcher'
	testImplementation 'org.springframework.security:spring-security-test'
}

tasks.named('test', Test) {
    useJUnitPlatform()
}

def reactDir = "$projectDir/src/main/frontend";

sourceSets{
	main{
		resources{
			srcDirs = ["$projectDir/src/main/resources"]
		}
	}
}

processResources{
	dependsOn "copyReactBuildFiles"
}

def getNpmCommand() {
    return System.getProperty('os.name').toLowerCase(Locale.ROOT).contains('windows') ? "npm.cmd" : "npm"
}

task installReact(type:Exec){
	workingDir "$reactDir"
	inputs.dir "$reactDir"
	group = BasePlugin.BUILD_GROUP

	commandLine getNpmCommand(), "audit", "fix"
	commandLine getNpmCommand(), "install"

}

task buildReact(type:Exec){
	dependsOn "installReact"
	workingDir "$reactDir"
	inputs.dir "$reactDir"
	group = BasePlugin.BUILD_GROUP
	
	commandLine getNpmCommand(), "run-script", "build"
	commandLine getNpmCommand(), "run-script", "build"

}

task copyReactBuildFiles(type:Copy){
	dependsOn "buildReact"
	from "$reactDir/build"
	into "$projectDir/src/main/resources/static"
}

 

 

 

 

짜란 ~!

 

예쁘게 나타난 우리 로그인 화면,, 후후 !

성공!!!!!!!!!!!!!!!!

 

 

 

 

반응형