React.JS アプリケーションを Java (Spring Boot) アプリケーションにパッケージ化する

## 1.プロジェクトを作成する

公式：[spring initializr](https://start.spring.io/)

① ブラウザを開き、(https://start.spring.io/) を入力し、開く
② 下記を入力し、Dependenciesで下記を選択し、『GENERATE』ボタンを押す

- Project: Maven
- Language: Java
- SpringBoot: 3.1.1
- jar
- 17

- Group: com.wazooinc
- Artifact: springboot_with_react
- Name : springboot_with_react
- Description: Demo projects for Spring Boot with React
- Package name: com.wazooinc.springboot_with_react

Dependencies
- Spring Boot Web
- Spring Boot DevTools

③src/mainファイルに移動し、create-react-appで新規プロジェクト構築する

```
cd src/main
npx create-react-app frontend
npm start
npm -v
node -v
```

④pom.xmlにMavenプラグインを入力する

最新のバージョンを調べる
[mave fronted react](https://mvnrepository.com/artifact/com.github.eirslett/frontend-maven-plugin)

```pom.xml
//省略
	
<build>
　<plugins>
	<plugin>
	　<groupId>org.springframework.boot</groupId>
		<artifactId>spring-boot-maven-plugin</artifactId>
	</plugin>
 
 //追加
 <plugin>
				<groupId>org.springframework.boot</groupId>
				<artifactId>frontend-maven-plugin</artifactId>
				<version>1.15.0</version>

				<executions>
					<!-- installing node and npm-->
					<execution>
						<id>Install node and npm</id>
						<goals>
							<goal>install-node-and-npm</goal>
						</goals>
						<phase>generate-resources</phase>
						<configuration>
							<nodeVersion>v20.11.0</nodeVersion>
							<npmVersion>10.2.4</npmVersion>
						</configuration>
					</execution>

					<!-- running npm installing -->
					<execution>
						<id>npm install</id>
						<goals>
							<goal>npm</goal>
						</goals>
						<phase>generate-resource</phase>
						<configuration>
							<arguments>install</arguments>
						</configuration>
					</execution>

					<!-- build our production version -->
					<execution>
						<id>npm build</id>
						<goals>
							<goal>npm</goal>
						</goals>
						<phase>generate-resources</phase>
							<configuration>
								<arguments>run build</arguments>
							</configuration>

					</execution>
				</executions>

				<configuration>
					<nodeVersion>v16.15.0</nodeVersion>
					<workingDirectory>src/main/frontend</workingDirectory>
				</configuration>
			</plugin>

				<!-- copy our react build arttifacts to spring boot -->
				<plugin>
					<groupId>org.apache.maven.plugins</groupId>
					<artifactId>maven-resources-plugin</artifactId>
					
					<executions>
						<execution>
							<id>Copy JavaScript app into SpringBoot</id>
							<phase>process-resources</phase>
							<goals>
								<goal>copy-resources</goal>
							</goals>
							<configuration>
								<outputDirectory>target/classes/static</outputDirectory>
								<resources>
									<resource>
										<directory>src/main/frontend/build</directory>
										<filtering>true</filtering>
									</resource>
								</resources>
							</configuration>
						</execution>
					</executions>
				</plugin>
		    </plugins>
//追加

　<plugin>
</build>
</project>

```
⑤ mvnwをパッケージ化する

```
./mvnw package

```
⑥java/com/example/springboot_frontendにcontrollerフォルダを作成し、
ClientForwardController.javaを作成する

```ClientForwardController.java
package com.wazooinc.springboot_with_react.controllers;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;

@Controller
public class ClientForwardController {
    
    @GetMapping(value = "/**/{path:[^\\.]*}")
    public String forward(){
        return "forward:/";
    }
}
```
⑦resouces/application.propertiesを編集する

```resouces/application.properties
spring.mvc.pathmatch.matching-strategy=ant_path_matcher

```


## 参考サイト
[React.JS アプリケーションを Java Spring Boot アプリケーションにパッケージ化する](https://www.youtube.com/watch?v=_CLLw3QAuOE)