Spring

리액트 프로젝트를 스프링부트 프로젝트에 포함하기

My April 2024. 9. 23. 11:40
반응형

1. 스프링 파일의 build.gradle 맨 밑에 내용 추가

// 리액트 프로젝트를 스프링부트 프로젝트에 포함하기

// 변수 선언 및 프로젝트 폴더 설정
// $projectDir : 스프링부트 프로젝트 폴더를 의미
def frontendDir = "$projectDir/src/main/frontend"

// 리액트 프로젝트가 빌드되어 복사될 위치 설정
sourceSets {
    main {
        resources {
            srcDirs = ["$projectDir/src/main/resources"]
        }
    }
}

processResources {
    dependsOn "copyReactBuildFiles"
}

// task : gradle 파일에서 실행하는 함수

// 리액트 프로젝트 인스톨 함수
task installReact(type: Exec) {
    // 작업 폴더 설정
    workingDir "$frontendDir"
    inputs.dir "$frontendDir"
    group = BasePlugin.BUILD_GROUP

    // 리액트 모듈 다운로드, os 종류에 따라 실행하는 명령어가 조금 다름
    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 "$frontendDir"
    inputs.dir "$frontendDir"
    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 copyReactBuildFiles(type: Copy) {
    dependsOn "buildReact"
    // 빌드된 리액트 프로젝트 위치 설정
    from "$frontendDir/dist"
    // 빌드된 리액트 프로젝트 파일을 복사할 위치 설정
    into "$projectDir/src/main/resources/static"
}

// bootJar 명령 실행 시 아래 명령 동작
tasks.bootJar {
    dependsOn "copyReactBuildFiles"
}

 

 

2. gradle의 bootJar 더블클릭

 

 

3. cmd창 열기

cd C:\fullstack405\react\backend\build\libs 입력

backend-0.0.1-SNAPSHOT.jar 파일을 실행하기 위해서

java -jar backend-0.0.1-SNAPSHOT.jar 입력

하면 실행됨

 

 

3. 스프링, 리액트 파일 모두 실행 끄고 localhost:8080으로 접속(안되면 방화벽 끄고 시도해보기 - 방화벽 설정하는 글도 올려뒀습니다)

 

 

4. 종료하고 싶으면 cmd창에서 컨트롤+c 여러 번 누르면 됨

 

끝!!

 

 

 

 

 

<추가>

 

5. AWS EC2에서 실행 시 jar 파일이 있는 경로에서 아래의 명령어 입력

java -jar awsweb-1.0.0.jar

5-1. 백그라운드에서 실행하고 싶으면 아래의 명령어 입력, 명령어 치고 서버 돌아간 후 엔터치면 다른 작업을 할 수 있음

java -jar awsweb-1.0.0.jar &

 

5-2. 서버 종료시키고 싶으면 

ps -ef | grep java

를 입력하여 돌아가고 있는 번호(아래 사진에서는 34067)를 확인하고

kill -9 방금본번호(아래 사진에서는 kill -9 34067)

를 입력하면 된다.

 

 

5-3. 백그라운드로 실행시키지 말고 PuTTY를 하나 더 열어서 거기서 다른 작업하고 종료시켜도 된다

 

6. 다른 포트의 서버랑 같이 돌리고 싶으면 앞에 sudo를 불이면 된다. 종료할 때도 kill 앞에 sudo를 붙이면 된다.

sudo java -jar awsweb-1.0.0.jar

sudo kill -9 34067

 

7. url에는 aws 사이트에서 퍼블릭 IPv4를 확인하고

퍼블릭 IPv4 DNS:8080

으로 접속하면된다.

반응형