Spring boot 与react单页应用部署在一个jar中

前言

现在的应用开发越来越多的都是前后端分离的项目。比较常见的部署方法是使用nginx 部署，日常项目中我也是用的 nginx。最近在开发一个非常小的项目，想实现傻瓜式一键部署+运行的效果，显然使用 nginx部署对于小白用户不友好。就研究一下如何把前端代码和后端代码打到一个jar中。

实现方法一 思路：

react使用browserHistory模式路由请求的地址，如果spring boot中没有配置则会报 404。 所有的404请求，全部跳转到 react的index.html，路由让前端来处理。这样就实现ajax数据请求走 spring boot其它请求都走index.html。

application.yml

spring:
  mvc:
    view:
      suffix: .html

如果你的配置文件是application.properties，则这样写。

spring.mvc.view.suffix=.html

AntDesignController.java代码：

import org.springframework.boot.web.servlet.error.ErrorController;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

/**
 * 解决React 应用与 spring boot 相结合的问题。
 * 之前我们部署使用 nginx部署，部署复杂度略高一些，通过这样处理，可以一个jar包搞定了。
 * 思路： 当访问的请求不存在，都跳转到react的index.html页面
 * 虽然不够优雅，但是完美解决了spring boot 与 react 应用结合的问题
 * 也许性能上略有损耗，应该是可以忽略不计的。
 * 日期：2020-12-27
 *
 */
@Controller
public class AntDesignController implements ErrorController {
    @Override
    public String getErrorPath(){
        return "/error";
    }

    @RequestMapping(value = "/error")
    public String getIndex(){
        return "index"; //返回index页面
    }

}

这里有个小缺点，如果真正需要显示 404页面如何处理呢？那只能前端来处理了，如何完美处理我暂时没有明确思路。因为我这个项目是一个极小的兴趣项目，目前这个缺点对我几乎不影响。

实现方法二：参考Ant Design Pro文档实现

https://pro.ant.design/docs/deploy-cn 这篇文章中写了不少部署方法。其中spring boot 相关的部署方法我最有兴趣。内容如下：

使用 spring boot

Spring Boot 是使用最多的 java 框架，只需要简单的几步就可以与 Ant Design Pro 进行整合。

首先运行 build

$ npm run build

然后将编译之后的文件复制到 spring boot 项目的 /src/main/resources/static 目录下。

重新启动项目，访问 http://localhost:8080/ 就可以看到效果。

为了方便做整合，最好使用 hash 路由。如果你想使用 browserHistory ，可以创建一个 controller ，并添加如下代码：

@RequestMapping("/api/**")
public ApiResult api(HttpServletRequest request, HttpServletResponse response){
    return apiProxy.proxy(request, response);
}

@RequestMapping(value="/**", method=HTTPMethod.GET)
public String index(){
    return "index"
}

注意 pro 并没有提供 java 的 api 接口实现，如果只是为了预览 demo，可以使用反向代理到 https://preview.pro.ant.design。

点评： 这种思路我看懂了，但是让我困惑的是上面代码中用到的ApiResult和apiProxy.proxy(request, response)具体的源码到底是什么？如何实现的？原文只是一笔带过的。 知道如何实现的道友，还请不吝赐教。

参考

• Ant Design Pro部署
• 《Ant Design构建完成后与Spring Boot集成部署》