Springboot
15 Nov 2020

Spring boot + React + gradle

Spring boot + React + gradle 연동

react 설치

intellij 터미널창에서 명령어 입력

intellij 터미널창에서 bash명령어 사용할 수 있게 바꿔놓는게 편합니다.

npm install -g create-react-app


frontend 디렉토리생성후

(프로젝트경로)/frontend 경로로 들어와서 명령어 입력

create-react-app my-app


(프로젝트경로)/frontend/my-app 경로로 들어온뒤 리액트를 실행한다.

npm start

localhost:3000 으로 접속하면 화면이 뜰겁니다.(추후 설정변경을 통해 localhost:8080으로 바꿀겁니다.)


편의를 위한 설치

npm install bootstrap react-bootstrap --save
npm install react-router-dom --save
npm install axios --save

build.gradle 설정

buildscript{
    //...
    repositories {
        mavenCentral()
        maven { url "https://plugins.gradle.org/m2"}
    }

    dependencies {
        classpath("com.moowork.gradle:gradle-node-plugin:${mooworkVersion}")
    }
}
apply plugin: 'com.moowork.node'

dependencies {
    //...
}

def webappDir = "$projectDir/frontend/my-app"

node {
    version = '12.6.0'
    download=true
    workDir = file("${project.buildDir}/nodejs")
    npmWorkDir=file("${project.buildDir}/npm")
}
task appNpmInstall(type: NpmTask) {
    workingDir = file("${project.projectDir}/frontend/my-app")
    args = ["install"]
}
task appNpmBuild(type: NpmTask) {
    workingDir = file("${project.projectDir}/frontend/my-app")
    args = ['run', 'build']
}
task copyWebApp(type: Copy) {
    from "frontend/my-app/build"
    into 'build/resources/main/static/.'
}
appNpmBuild.dependsOn appNpmInstall
copyWebApp.dependsOn appNpmBuild
compileJava.dependsOn copyWebApp


프로젝트 구조

react연동


package.json 설정 추가

{
    //...

    "dependencies": {
        //...
    },
    "proxy": "http://localhost:8080",  // <- 프록시 추가
    //...
}
Tags:
0 comments