Spring Boot에 React 포함하기(maven)

1. Spring starter project로 프로젝트 생성

maven으로 생성

---

2. cd src/main
    npx create-react-app test

---

3. cd src/main/test
yarn run start

---

4. frontend-maven-plugin, maven-resources-plugin 플러그인 사용

pom.xml파일에 properties 를 추가

<frontend-src-dir>${project.basedir}/src/main/test</frontend-src-dir>
<node.version>v16.15.0</node.version>
<yarn.version>v1.22.19</yarn.version>
<frontend-maven-plugin.version>1.12.1</frontend-maven-plugin.version>

참고: 여기에 표시된 버전은 예시용이므로 위에 나열된 각 항목의 최신 버전을 사용하십시오.

 

추가된 pom.xml  

		    <plugin>
		      <groupId>com.github.eirslett</groupId>
		      <artifactId>frontend-maven-plugin</artifactId>
		      <version>${frontend-maven-plugin.version}</version>
		      <configuration>
		        <nodeVersion>${node.version}</nodeVersion>
		        <yarnVersion>${yarn.version}</yarnVersion>
		        <workingDirectory>${frontend-src-dir}</workingDirectory>
		        <installDirectory>${project.build.directory}</installDirectory>
		      </configuration>
		      <executions>
		        <execution>
		          <id>install-frontend-tools</id>
		          <goals>
		            <goal>install-node-and-yarn</goal>
		          </goals>
		        </execution>
		        <execution>
		          <id>yarn-install</id>
		          <goals>
		            <goal>yarn</goal> <!-- npm 사용시 변경 ->
		          </goals>
		          <configuration>
		            <arguments>install</arguments>
		          </configuration>
		        </execution>
		        <execution>
		          <id>build-frontend</id>
		          <goals>
		            <goal>yarn</goal> <!-- npm 사용시 변경 ->
		          </goals>
		          <phase>prepare-package</phase>
		          <configuration>
		            <arguments>build</arguments>
		          </configuration>
		        </execution>
		      </executions>
		    </plugin>
		    <plugin>
		      <artifactId>maven-resources-plugin</artifactId>
		      <version>3.0.1</version>
		      <executions>
		        <execution>
		          <id>position-react-build</id>
		          <goals>
		            <goal>copy-resources</goal>
		          </goals>
		          <phase>prepare-package</phase>
		          <configuration>
		            <outputDirectory>${project.build.outputDirectory}/static</outputDirectory>
		            <resources>
		              <resource>
		                <directory>${frontend-src-dir}/build</directory>
		                <filtering>false</filtering>
		              </resource>
		            </resources>
		          </configuration>
		        </execution>
		      </executions>
		    </plugin>

5. mvn packge  

6. java -jar target/springboot-react-0.0.1-SNAPSHOT.jar

7. http://localhost:8080/index.html