SpringBoot + Vue 项目超简单的合并部署方案

---

前言

最近在捣鼓 SpringBoot 与 Vue 整合的项目，看了网上很多套的方案，自己总结了一套为轻量级个人开发提供的项目部署方案，简单有效！通过 maven 的打包在服务器上仅需要运行一个 Jar 包即可运行包括前端的整个项目。（全文无图！别问问就是太懒惹，下次有机会再补上。。）

个人博客内有更多详细内容： https://www.seny.xyz/archives/deployment

项目环境：

• 前端框架：Vue.js + axios

• 后端框架：SpringBoot + Mybatis

• 项目管理：maven

一、Vue 项目

Vue 使用 npm install 安装依赖后，使用 npm run build 构建项目

构建完成后会在 src 同级目录下生成 dist 文件夹，该文件夹内的文件就是所生成的静态文件，先放着一会构建 SpringBoot 的后端项目时要用

注意：在构建项目时注意将项目内的 api 请求路径对应好要部署的服务器 ip 端口映射，还需要在 vue 项目配置文件 vue.js.config 中 将 publicPath 设置为 ‘./’ 即可进行前端项目构建

二、SpringBoot 项目

后端这边默认使用 maven 管理项目，将 Vue 项目构建生成的 dist 文件夹内的所有静态文件放置于 SpringBoot 项目的 main/resource/static 目录下（该目录为 springboot 的静态文件目录）

在 maven 工具栏选择生命周期（lifecircle）中的 install 项生成 jar 包，jar 包默认生成在 target 目录下

三、服务器上的部署

将 SpringBoot 生成的 Jar 包上传至服务器，在服务器中输入以下指令即可运行该项目。

 java -jar xxx.jar 

在前后端分离的项目中，用户的入口是前端端口路径，前端进行用户交互后通过后端提供的 api 接口（url）进行前端与后端的数据交互，所以只需要访问前端的端口即可访问部署的项目。

直接输入 java -jar xxx.jar 将在前台运行项目，关闭 shell 进程就结束了，所以一般使用 nohup 将该项目运行于后台运行：

nohup java -jar xxx.jar &

上述命令会将日志默认输出在同级文件夹的 nohup.log 中，如果需要指定日志路径或直接不输出日志可以参考以下指令（ xxx 替换为实际名字或路径 ）

nohup java -jar xxx.jar > xxx.log  2>&1 & 

为该进程配置守护进程也可以达到同样的效果，但是我懒，这边一切从俭，有需要的小伙伴自行查找相关教程。

四、端口映射

用户只能通过访问 域名:端口 的形式访问该项目，如果要将前端项目端口映射到 80 端口（80 端口在地址栏中可以省略，即直接通过域名访问）可以使用 nginx 进行端口映射

nginx 的安装不多赘述，直接使用安装指令（ centOS: yum install nginx / ubuntu: apt-get install nginx）即可安装，如果跟我一样懒就不必大费周章通过源码安装，安装成功后测试运行

nginx 的配置在本文也不是重点，类似的教程很多，有需要的可以自行去寻找，这里提供一个最简单的映射配置：

• 在 /etc/nginx/conf.d 文件夹中创建 xxx.conf （xxx 为你的项目名称）

• 进入编辑该配置如下，写好后保存重启 nginx 即可生效

  server{
  	listen 80;
  	server_name xxx.xxx.com; # 你要映射的域名
  	
      proxy_pass http://IP:PORT; # 你的源IP与端口号
      proxy_set_header Host $host;
      proxy_set_header X-Real-IP $remote_addr;
      proxy_set_header REMOTE-HOST $remote_addr;
      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
  }
  

本文的端口映射仅提供最基础的配置，简单有效，有小伙伴需要进阶配置请自行搜索嘿嘿

五、请求跨域

当前后端项目的端口不一致时会产生请求跨域的问题，类似的处理方式网上有很多，有通过前端处理有通过后端处理，这边使用一个较为简单的后端处理方法：在 SpringBoot 项目中单独编写一个跨域请求的配置类，新建一个类将下方代码全选复制粘贴即可

@Configuration
public class CrossConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("*")
                .allowedMethods("GET", "HEAD", "POST", "DELETE", "OPTIONS", "PUT")
                .allowCredentials(true)
                .maxAge(3600)
                .allowedHeaders("*");
    }
}

本文到这也就结束了，拜拜啦各位，如果对你有帮助的话记得给我点个赞喔，蟹蟹