先讲一讲这篇文章的背景故事。之前我的团队需要在我们需求的基础架构上节省一些资金，并且由于我们要构建的这个应用程序中，大部分负载都会在客户端而非服务端上，所以我们决定试验一下能否将一个Spring应用程序与一个React应用结合起来，并打包成一个war文件。

这篇文章会告诉你如何将Create React App与Spring Boot结合使用，从而为你打包出单个war文件。

Spring Boot和Create React App的基本功能介绍

Create React App可帮助你非常快速地启动React项目。它为你提供了启动并尽快运行项目所需的全部基本功能。
Spring Boot可以帮助你快速而轻松地启动和维护Spring应用程序。

步骤

1.目标

在单一war文件中包含前端和后端，具有优化的生产构建
保留Create React App所提供的好处，如热重载等

2.设置

必须安装Java。前往此处下载（https://www.oracle.com/java/technologies/javase-downloads.html）
必须安装Maven。对于Mac，我使用的是Homebrew（brew install maven）；其他情况请转到此处（https://maven.apache.org/install.html）
必须安装Node。对于Mac，我使用的是Homebrew（brew install node）；其他情况请转到此处（https://nodejs.org/en/download/）

附注：我选择的IDE是IntelliJ。当使用React代码时，我通常会切换到VS Code。你可以随意使用自己习惯的方法

在Github上创建一个空的仓库，并添加自述文件、gitignore和许可证等。
转到（https://start.spring.io）创建你的Spring应用程序，并下载到本地。Group和Artifact也可以随意设置。

GroupId：e.the.awesome

Artifact：spring-react-combo-app

3.将下载的项目解压缩到你的git目录中并提交。

你的SpringReactComboAppApplication看起来应该像这样。

package e.the.awesome.springreactcomboapp;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.boot.web.servlet.support.SpringBootServletInitializer;

@SpringBootApplication
public class SpringReactComboAppApplication  extends SpringBootServletInitializer{

	public static void main(String[] args) {
		SpringApplication.run(SpringReactComboAppApplication.class, args);
	}

}

4.现在创建一个基本服务。

我们将其称为DadJokesController。这应该在与SpringReactComboAppApplication文件所在的文件夹中创建。我知道这不是正确的Rest API格式，但现在暂时忽略它。

package e.the.awesome.springreactcomboapp;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;
@RestController
public class DadJokesController {
    @GetMapping("/api/dadjokes")
    public String dadJokes() {
        return "Justice is a dish best served cold, if it were served warm it would be just water.";
    }
}

5.在你的终端运行

mvn spring-boot:run

然后在浏览器中检查http://localhost:8080/api/dadjokes。你应该会看到我们添加到控制器中的dad joke。

6.要创建你的React应用，只需在根目录中运行

npx create-react-app basic-frontend-app

你可以随心所欲地调用它，我这里只调用我的basic-frontend-app

7.要运行前端应用程序：

cd basic-frontend-app<br>npm start

8.解决代理问题

由于我们要将Dad Jokes服务集成到前端，因此首先我们要解决代理问题。你可能已经注意到了，你的服务从localhost:8080开始，而前端从localhost:3000开始。如果我们尝试从前端调用服务，具体取决于你的浏览器，你可能会收到一个CORS错误。

解决此问题的最简单方法是让前端代理处理从端口3000到8080的所有请求。此更改将在package.json文件中进行：

{
  "name": "basic-frontend-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^16.3.1",
    "react-dom": "^16.3.1",
    "react-scripts": "1.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  },
  "proxy": {
    "/api": {
      "target": "http://localhost:8080",
      "ws": true
    }
  }
}

将以下内容添加到你的前端App.js文件中

import React, {Component} from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {

    state = {};

        componentDidMount() {
            this.dadJokes()
        }

    dadJokes = () => {
        fetch('/api/dadjokes')
            .then(response => response.text())
            .then(message => {
                this.setState({message: message});
            });
    };

    render() {
        return (
            <div className="App">
            <header className="App-header">
            <img src={logo} className="App-logo" alt="logo"/>
            <h3 className="App-title">{this.state.message}</h3>
            </header>
            <p className="App-intro">
            To get started, edit <code>src/App.js</code> and save to reload.
        </p>
        </div>
    );
    }
}

export default App;

如果你也遇到了下图的这个错误，我的做法是：首先删除了 package-lock.json 文件；其次在 node_modules 文件夹中重新安装了npm包并再次运行；然后重新启动前端，问题就解决了。

9.你的应用程序现在应该看起来像这样。

你可以看到dad jokes API调用的结果。

10.创建生产版本

现在我们的基本前端和后端已经完成，该创建生产版本和单个war文件了。

在< dependencies>下添加

<!-- https://mvnrepository.com/artifact/com.github.eirslett/frontend-maven-plugin -->
<dependency>
<groupId>com.github.eirslett</groupId>
<artifactId>frontend-maven-plugin</artifactId>
<version>1.6</version>
</dependency>

在pom文件的< plugins>部分下，我们将添加以下命令，这些命令将在运行mvn clean install时执行以下操作。

npm安装指定版本的node
运行我们前端的生产构建
存放生产构建

<plugin>
   <groupId>com.github.eirslett</groupId>
   <artifactId>frontend-maven-plugin</artifactId>
   <version>1.6</version>
   <configuration>
      <workingDirectory>basic-frontend-app</workingDirectory>
      <installDirectory>target</installDirectory>
   </configuration>
   <executions>
      <execution>
         <id>install node and npm</id>
         <goals>
            <goal>install-node-and-npm</goal>
         </goals>
         <configuration>
            <nodeVersion>v8.9.4</nodeVersion>
            <npmVersion>5.6.0</npmVersion>
         </configuration>
      </execution>
      <execution>
         <id>npm install</id>
         <goals>
            <goal>npm</goal>
         </goals>
         <configuration>
            <arguments>install</arguments>
         </configuration>
      </execution>
      <execution>
         <id>npm run build</id>
         <goals>
            <goal>npm</goal>
         </goals>
         <configuration>
            <arguments>run build</arguments>
         </configuration>
      </execution>
   </executions>
</plugin>
<plugin>
   <artifactId>maven-antrun-plugin</artifactId>
   <executions>
      <execution>
         <phase>generate-resources</phase>
         <configuration>
            <target>
               <copy todir="${project.build.directory}/classes/public">
                  <fileset dir="${project.basedir}/basic-frontend-app/build"/>
               </copy>
            </target>
         </configuration>
         <goals>
            <goal>run</goal>
         </goals>
      </execution>
   </executions>
</plugin>

附注：对于你的插件来说，顺序正确是很重要的，因此请确保在复制构建文件执行之前执行node/npm安装

11.运行 mvn clean install

添加此命令后，运行mvn clean install，并验证target/classes目录同时包含了前端文件和Java文件。这里你应该是一路畅通的。

最后看一下我的pom文件：

https://github.com/Emmanuella-Aninye/Spring-Boot-ReactJS-Starter/blob/master/pom.xml

这就是我的方法。如果你想看看repo或使用它，可以在我的Github上找到它：

https://github.com/Emmanuella-Aninye/Spring-Boot-ReactJS-Starter

延伸阅读：

https://hackernoon.com/package-your-react-app-with-spring-boot-a-how-to-guide-cdfm329w

创作场景

用 Spring Boot 打包你的 React 应用