統合Spring boot+React(Gradle)プロジェクトの作成

Windows 10環境ではIntellij IDEA 2021.3.3バージョンが使用されている.

1.Spring Initializerを使用したスプリングガイドの作成

start.Spring.接続io

ファイルを有効にして生成します.
または、IntellijでSpring Initializerを使用できます.

この記事では、MavenではなくGradleを使用し、Mavenをgradleに変更して使用します.この2つの違いは後で発表されます.

2.Spring Bootに関連付けるreactを設定します。

インストールが完了したら、Intellijの端末を使用してレスポンスを作成します.
ProjectName/src/minにパスを移動します.
create-act-app[projectName]コマンドを入力します.
ProjectNameで作成を任意に指定できます.reactijsで作成します.
npx create-act-app reactjsを入力すると、構築プロセスは1～2分続きます.

正常な実行後にcdreatjsが実行されている場合、npm startが実行されている場合、reactページは3000ポートで実行されます.

次に、npm install、npm run-script build、npm run ejectの順に実行します.
reactjs/config/paths.jsファイルにappbuildに「build/static」と書きます.(buildpathをクリアしました.)
次にreatjs/buildに移動してすべてのファイルをクリアします.
Springの構築.グレアに行こう

plugins {
	id 'org.springframework.boot' version '2.6.4'
	id 'io.spring.dependency-management' version '1.0.11.RELEASE'
	id 'java'
}

group = 'hello'
version = '0.0.1-SNAPSHOT'
sourceCompatibility = '11'

configurations {
	compileOnly {
		extendsFrom annotationProcessor
	}
}

repositories {
	mavenCentral()
}

dependencies {
	implementation 'org.springframework.boot:spring-boot-starter-web'
	compileOnly 'org.projectlombok:lombok'
	annotationProcessor 'org.projectlombok:lombok'
	testImplementation 'org.springframework.boot:spring-boot-starter-test'
}
//해당 부분 부터 입력
def webappDir = "$projectDir/src/main/reactjs"

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

processResources {
	dependsOn "buildReact"
}

task buildReact(type: Exec) {
	dependsOn "installReact"
	workingDir "$webappDir"
	inputs.dir "$webappDir"
	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 installReact(type: Exec) {
	workingDir "$webappDir"
	inputs.dir "$webappDir"
	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'
	}
}
//까지 입력

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

注釈の一部のソースを追加したら、右側の勾配のbuildをクリックして実行します.

magima reactijs/src/appを使用します.jsファイルのソースファイルを変更します.

import logo from './logo.svg';
import './App.css';
import {useEffect, useState} from "react";

function App() {
    const [message, setMessage] = useState([]);
    useEffect(() => {
        fetch("/hello").then((response) => {
            return response.json();
        }).then(function (data) {
            setMessage(data);
        });
    }, []);
    return (<div className="App">
        <header className="App-header"><img src={logo} className="App-logo" alt="logo"/>
            <p> Edit <code>src/App.js</code> and save to reload. </p> <a className="App-link" href="https://reactjs.org"
                                                                         target="_blank"
                                                                         rel="noopener noreferrer"> Learn React </a>
            <ul> {message.map((text, index) => <li key={`${index}-${text}`}>{text}</li>)} </ul>
        </header>
    </div>);
}

export default App;

次にspringfootサーバを開き、localhost:8080ポートを実行します.結果は次のとおりです.

これらの画像を表示すると、SpringBootがコントローラを作成し、入力した部分を反作用に出力していることがわかります.(「こんにちは」「ニコニコ」)
この文章.
https://hjjooace.tistory.com/entry/React-Spring-Gradle-Project-%EC%97%B0%EB%8F%99 ,
https://7942yongdae.tistory.com/136
私たちはブログで説明しました.