Spring boot & react 통합 빌드해보자!

현재 회사에서 프론트는 react 백엔드는 spring boot로 프로덕트를 만들고 있습니다.. 이제 jar 모듈로 만들어서 QA팀에게 넘겨주려고 합니다.

개발 시에는 spring boot는 8088포트에서, react는 3000번 포트에서 따로따로 실행하였으나 8088포트로 접속했을 때 페이지가 나오고 정상적으로 동작하게 설정해야 합니다.

react proejct : package.json

해당 방법이 아니더라도 프로젝트 진행을 위해서 프록시 설정을 하셨을 것 같습니다.

"proxy": "http://localhost:8088",

spring boot : build.gradle

def reactAppDir = "$projectDir/src/main/front-end"

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

processResources {
	dependsOn "copyReactFile"
}

task installReact(type: Exec) {
	workingDir "$reactAppDir"
	inputs.dir "$reactAppDir"
	group = BasePlugin.BUILD_GROUP
	if (System.getProperty('os.name').toLowerCase(Locale.ROOT).contains('windows')) {
		commandLine "npm.cmd", "audit", "fix"
		commandLine 'npm.cmd', 'install'
	} else {
		commandLine "npm", "audit", "fix"
		commandLine 'npm', 'install'
	}
}

task buildReact(type: Exec) {
	dependsOn "installReact"
	workingDir "$reactAppDir"
	inputs.dir "$reactAppDir"
	group = BasePlugin.BUILD_GROUP
	if (System.getProperty('os.name').toLowerCase(Locale.ROOT).contains('windows')) {
		commandLine "npm.cmd", "run-script", "build"
	} else {
		commandLine "npm", "run-script", "build"
	}
}

task copyReactFile(type: Copy) {
	dependsOn "buildReact"
	from "$reactAppDir/build"
	into "$buildDir/resources/main/static"
}

build.gradle을 설정해줍니다.

$projectDir/src/main/front-end

리액트 프로젝트가 src/main/front-end 안에 있다는 말입니다.

자, 이렇게만 설정하고 jar 모듈을 만듭니다. 저는 현재 vscode를 사용하고 있기 때문에 vscode 플러그인을 사용하여 jar 모듈을 만들었습니다.

이제 프로젝트의 build/libs/ 에 있는 jar 모듈을 실행시킵니다.

java -jar device-0.0.1-SNAPSHOT.jar

메인 페이지도 열어봅니다. 페이지가 잘 열리는 것을 확인할 수 있습니다. 하지만 문제는 바로 url이 '/'가 아닌 다른 path에서 페이지 새로고침을 했을 시 발생합니다.

갑자기 404 에러가 발생합니다. 잠시 왜 404 에러가 발생했을지 예상해 봅시다.

정답은 리액트는 SPA이기 때문에 spring boot와 통합 빌드 후에는 index.html 페이지 하나에서 동작합니다. 하지만 spring boot는 한 페이지 ('/') 밖에 가지고 있지 않는데 /network/vlan는 컨트롤러에 매핑되어 있지 않기 때문에 404 에러가 발생하는 것입니다.

어떻게 해결할까?

이것을 해결하는 방법은 꽤나 많습니다. spring boot 버전에 따라 ErrorController를 implement 한 controller를 만들어서 처리하는 방법도 존재합니다. 저는 ViewErrorConfig 클래스를 만들어서 처리해보도록 하겠습니다.

import org.springframework.boot.web.server.ErrorPage;
import org.springframework.boot.web.server.ErrorPageRegistrar;
import org.springframework.boot.web.server.ErrorPageRegistry;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.http.HttpStatus;

@Configuration
public class ViewErrorConfig {
    
    @Bean
    public ErrorPageRegistrar errorPageRegistrar() {
        return new ErrorPageRegisterar();
    }

    private static class ErrorPageRegisterar implements ErrorPageRegistrar {

        @Override
        public void registerErrorPages(ErrorPageRegistry registry) {
            ErrorPage errorPage = new ErrorPage(HttpStatus.NOT_FOUND, "/");
            registry.addErrorPages(errorPage);
        }

    }
}

404 페이지 에러가 발생하면 path '/'로 이동시키게 작동하는 코드입니다.

이제 다시 빌드를 하고 jar 모듈을 실행 시키면 모든 페이지에서 새로 고침을 해도 404 에러는 발생하지 않는 것이 확인됩니다.

저는 QA팀이 테스트 하기 쉽게 백그라운드 실행 스크립트, 중지스크립트, 서버 reboot 시 자동 실행되는 스크립트를 짜러 가보겠습니다. 감사합니다.