【AICon】探索RAG 技术在实际应用中遇到的挑战及应对策略!AICon精华内容已上线73%>>> 了解详情
写点什么

用 Spring Boot 打包你的 React 应用

  • 2020-03-31
  • 本文字数:3612 字

    阅读完需:约 12 分钟

用Spring Boot打包你的React应用

先讲一讲这篇文章的背景故事。之前我的团队需要在我们需求的基础架构上节省一些资金,并且由于我们要构建的这个应用程序中,大部分负载都会在客户端而非服务端上,所以我们决定试验一下能否将一个 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.设置


附注:我选择的 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;
@SpringBootApplicationpublic 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;@RestControllerpublic 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


2020-03-31 09:522895

评论

发布
暂无评论
发现更多内容

什么型号的LED显示屏适合用在购物中心外墙

Dylan

价格 像素 LED显示屏 全彩LED显示屏

Microsoft Remote Desktop Beta for Mac:微软远程连接工具

晴雯哥

后端开发需要安装哪些软件/插件?

小齐写代码

IBM SPSS Statistics 26 for Mac 苹果spss数据统计分析工具 SPSS26中文永久激活版

晴雯哥

HarmonyOS自定义页面请求与前端页面调试

HarmonyOS开发者

HarmonyOS

万字深度 | 上篇:GPT 时代人类智力活动新地图

豆哥

意识 思维模式 认知领域 智力活动

15年磨砺,亚信科技AntDB 8.0数据库,倾“擎”发布

亚信AntDB数据库

AntDB 国产数据库 AntDB数据库

蓝易云:什么是HTTP500内部服务器错误,要如何修复?

百度搜索:蓝易云

云计算 Linux 运维 HTTP

Mac电脑剪切板复制粘贴推荐: PopClip for Mac激活中文版

胖墩儿不胖y

Mac软件 剪切板工具 文本编辑工具

图文结合丨GreatSQL MGR + ProxySQL集群搭建方案

GreatSQL

数据库 greatsql

iZotope Ozone 11 Advanced Mac激活版 臭氧11音乐制作软件

晴雯哥

中文PhpStorm 2023 Mac破解版 PHP集成开发 PhpStorm 2023最新版激活安装教程

晴雯哥

浪潮云连续2年入选Gartner中国云基础设施和平台服务市场标杆厂商

浪潮云

云计算

直击火山引擎V-Tech峰会!仅需简单登录,即可极速体验数据引擎ByteHouse

字节跳动数据平台

数据库 大数据 云原生 数仓 企业号9月PK榜

“昇腾万里•齐聚津门”昇腾AI创新大赛2023 天津区域赛暨第十期“津英汇”活动成功举办

彭飞

亚马逊 CodeWhisperer 初体验

亚马逊云科技 (Amazon Web Services)

JavaScript typescript 人工智能

金融和大模型的“两层皮”问题

脑极体

金融 大模型

打破界限!百度「共拓计划」将AIGC营销推向新高度

科技热闻

降低代码圈复杂度优化技巧

南城FE

JavaScript 前端 代码 代码规范

“文心高校行”助力高校大模型人才培养!欢迎高校申请!

飞桨PaddlePaddle

大模型 走进高校 文心

蓝易云:CentOS-7详细基础教学!

百度搜索:蓝易云

云计算 Linux centos 运维 云服务器,

苹果Mac电脑专业修图软件 Affinity Photo 2 正式中文版

mac大玩家j

Mac软件 修图软件 修图工具 图像编辑器

TF-IDF算法

小魏写代码

应用容器化转型-容器镜像怎么做

品高云计算

云计算 科技 容器镜像 应用容器化

灞桥康养论坛圆满落幕 宜居灞桥全力推进康养产业高质量融合发展

联营汇聚

用Spring Boot打包你的React应用_大前端_Emmanuella_InfoQ精选文章