Spring ํ๋ก์ ํธ ๋ด๋ถ์ React ์ค์ ๋ฐ Build (Gradle)
by ๋๋ถ๋ํด๋น ๊ฒ์๊ธ์ Spring ํ๋ก์ ํธ์ React์ ๋ํ ์์ธํ ์ค๋ช ์ ์ ๊ณตํ์ง๋ ์์ต๋๋ค.
React ํ๋ก์ ํธ ์์ฑํ๊ธฐ
React ํ๋ก์ ํธ๋ฅผ ์์ฑํ๊ณ ์ถ์ ์์น์ ์๋ ๋ช ๋ น์ด๋ฅผ ์ ๋ ฅํ์ฌ ์์ฑํฉ๋๋ค.
npx create-react-app {ํ๋ก์ ํธ ์ด๋ฆ}
๊ทธ๋ฌ๋ฉด ์๋์ ๊ฐ์ด ํ๋ก์ ํธ๊ฐ ์ํ๋ ์์น์ ์์ฑ๋ฉ๋๋ค.
CORS ์ด์๊ฐ ๋ฐ์ํ์ง ์๋๋ก Package.json์ proxy ์ค์ ์ ์ถ๊ฐํด ์ค๋๋ค.
{
// ...
"proxy": "http://localhost:8080"
}
ํตํฉ Build ์ค์ ํ๊ธฐ
Spring์์ React๋ฅผ Build ํ ์ ์๋๋ก ์๋ ์ค์ ์ Gradle์ ์ถ๊ฐํฉ๋๋ค.
์ด๋, frontendDir์ React ํ๋ก์ ํธ Path์ ๋๋ค.
// React ์ค์ ์์
def frontendDir = "$projectDir/daangn-react"
sourceSets {
main {
resources { srcDirs = ["$projectDir/src/main/resources"]
}
}
}
processResources { dependsOn "copyReactBuildFiles" }
task installReact(type: Exec) {
workingDir "$frontendDir"
inputs.dir "$frontendDir"
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 "$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/build"
into "$projectDir/src/main/resources/static"
}
// React ์ค์ ๋
ํด๋น ์ค์ ์ ๋ค์๊ณผ ๊ฐ์ ์์๋ก ๋์ํฉ๋๋ค.
- React ํ๋ก์ ํธ ๋ด๋ถ์์ npm install์ ์ํํ๋ค.
- React ํ๋ก์ ํธ ๋ด๋ถ์์ npm build๋ฅผ ์ํํ์ฌ build ๋๋ ํฐ๋ฆฌ ๋ด๋ถ์ ํ์ผ์ ์์ฑํ๋ค.
- React ํ๋ก์ ํธ build ๋๋ ํฐ๋ฆฌ์ ์์ฑ๋ ์ ์ ํ์ผ์ spring ํ๋ก์ ํธ์ resources/static์ผ๋ก ๋ณต์ฌํ๋ค.
์ฐธ๊ณ
'Spring' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
Spring DI (0) | 2022.11.27 |
---|---|
properties๋ก Spring Boot log๋ฅผ ์ค์ ํด๋ณด์! (0) | 2022.04.23 |
๋ธ๋ก๊ทธ์ ์ ๋ณด
๋๋ถ๋์ Devlog
๋๋ถ๋