Spring Boot + React, 一个jar包让前后端一起跑

之前在写项目的时候，前端用React进行开发，后端则是使用了Spring Boot，而这时候有一个需求：需要将两端的项目合在一起，在本地运行。同时，项目启动完成后需要自动打开前端页面。

本人第一反应是，Spring Boot自带tomcat服务器，那能不能把编译后的前端静态文件放入后端项目中，然后一起打包，这样就可以满足一个jar包启动前后端了。在本人的不懈努力下（不断的在互联网上翻箱倒柜），总结出了一套解决方案，现在，简单的分享一下。

0. 一些前提

本人的项目，因为将前后端打包在一起启动，两端共用了一个接口，所以不存在跨域问题。

1. 打包项目

先将前端项目打包

npm run build
复制代码

然后将构建生成的build文件夹修改名字为public, 并将其复制到resource文件夹下。

接下来，使用包管理工具（maven，gradle）对你的项目进行打包即可得到可运行的jar包。

可以尝试执行以下命令在本地启动项目：

    java jar ...//你的jar包全称
复制代码

接下来在url后加上index.html就能够访问到项目的主页了。

但还有一个问题没有得到解决，如何在启动项目后自动打开前端页面？

2.启动时打开前端页面

又是一通乱找之后，我找到了解决方案-利用Spring Boot的CommandLineHandler接口。

实现这个接口的Java类（前提条件是要用被注册入Spring容器管理，如使用@Component注解），将会在项目启动时自动执行其代码逻辑。而这时候我们就可以根据运行机器的类型启动其默认浏览器，并打开前端页面。

import org.springframework.boot.CommandLineRunner;
import org.springframework.core.annotation.Order;
import org.springframework.stereotype.Component;

@Component
public class CommandRunner implements CommandLineRunner {
    @Override
    public void run(String... args) throws Exception {
        String os = System.getProperties().getProperty("os.name");
        switch (os){
            case "Mac OS X":
                Runtime.getRuntime().exec("open http://（项目url）:（项目端口）/index.html");
                break;
            default:
                Runtime.getRuntime().exec("cmd /c start http://（项目url）:（项目端口）/index.html");
                break;
         }

    }
}
复制代码

思路是，通过获取jvm的运行属性判断其操作系统，然后根据不同操作系统，执行其对应启动命令。因为本人的需求只有在Mac和 Windows电脑上启动项目，所以就只做了这两种处理^_^。 这样，页面就会在项目启动完成后，自动打开了。