使用Spring Boot打包React应用程序[操作指南]

关于这是如何开始的一些背景故事。 我的团队需要在我们所请求的基础架构上节省一些资金，并且由于我们要构建的应用程序的大部分负载将在客户端而不是服务端。 我们决定看看是否可以将Spring应用程序与React应用程序结合起来并提供一个war文件。

了解如何将Create React App与Spring Boot结合使用以给您一个war文件

Spring Boot和Create React App的基本思想。

1. 创建React应用程序可帮助您非常快速地启动React项目。 它为您提供了启动并尽快运行所需的所有基本功能。
2. Spring Boot帮助您快速轻松地启动和维护Spring应用程序。

目标：

1. 单一战争文件中的前端和后端，具有经过优化的制作
2. 保持收益Create React App可以提供诸如热重装

设定：

1. 必须安装了Java。 前往此处下载版本
2. 必须安装了Maven。 对于Mac，我使用Homebrew（brew install maven），否则，请转到此处
3. 必须安装节点。 对于Mac，我使用Homebrew（brew安装节点），否则，请转到此处

* 旁注：我选择的IDE是IntelliJ。 在编写React代码时，我通常会切换到VS Code。 随意使用让您感到舒适的东西

1. 在Github上创建一个空的仓库，并添加自述文件，gitignore，许可证等。
2. 前往https://start.spring.io创建您的spring应用程序并在本地下载。 Group和Artifact也可以是您想要的任何东西。


GroupId ：e.the.awesome

工件 ：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 。 您应该看到我们添加到控制器中的爸爸笑话。

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

npx  create-react-app basic-frontend- app

您可以随心所欲地调用它，我只是称呼我的basic-frontend-app

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

cd basic-frontend- app < br >npm start

启动后，它应如下所示：

8.由于我们要将爸爸笑话服务集成到前端，因此首先我们要解决代理问题。 如果您已经注意到，您的服务从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" >
             

            
            
{this.state.message}
            
            

            To get started, edit src/App.js and save to reload.
        
        

); } } export default App;

重新启动前端，您应该会很好。 如果您碰巧遇到此错误：我删除了package-lock.json文件，并在node_modules文件夹中重新安装了npm软件包并再次运行

9.您的应用程序现在应该看起来像。 您可以看到爸爸笑话API调用的结果。

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

在下添加

< groupId > com.github.eirslett groupId >
frontend-maven-plugin< /artifactId>
1.6 version>
dependency >

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

1. 使用指定版本的节点安装npm
2. 运行前端的生产版本
3. 存放生产版本

   < groupId > com.github.eirslett groupId >
   frontend-maven-plugin< /artifactId>
   1.6 version>
   < configuration >
       basic-frontend-app
      target 
   configuration >
   
      < execution >
          install node and npm
         
            install-node-and-npm
         
         
            v8.9.4
            5.6.0
          
      execution >
      
         < id > npm install id >
         
            < goal > npm goal >
         < /goals>
         
            install arguments >
         configuration >
      < /execution>
      
         npm run build d>
         < goals >
             npm 
         goals >
         
            < arguments > run build arguments >
         < /configuration>
       execution>
   executions >
< /plugin>

   maven-antrun-plugin artifactId>
   < executions >
       
         generate-resources
         
            
               
                  
               
            
         
         
            run
         
      
    
plugin >

旁注：顺序对于您的插件很重要，因此请确保在复制构建文件执行之前执行节点/ npm安装

11.添加此命令后，运行mvn clean install并验证target / classes目录同时包含前端文件和Java文件。 而且您应该很好。

最后看一下我的pom文件 。

这就是我所拥有的。 如果您想看看回购或使用它。 可以在我的Github上找到它。

接下来是有关如何在Heroku上部署War文件的文章。 对此期待！

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