Jenkins自动化部署前后端分离项目 (svn + Springboot + Vue + maven)有图详解

1. 准备工作

本文的前后端分离项目，技术框架是：
Springboot + Vue + Maven + SVN + Redis + Mysql + Nginx + JDK
所以首先需要安装以下：

在腾讯云服务器OpenCLoudOS系统中安装jdk（有图详解）

在腾讯云服务器OpenCLoudOS系统中安装mysql（有图详解）

在腾讯云服务器OpenCLoudOS系统中安装nginx（有图详解）

在腾讯云服务器OpenCLoudOS系统中安装redis（有图详解）

在腾讯云服务器OpenCLoudOS系统中安装svn（有图详解)

在腾讯云服务器OpenCLoudOS系统中安装maven（有图详解)

在腾讯云服务器OpenCLoudOS系统中安装Jenkins(有图详解)

用svn上传前后端代码参考：

用svn上传idea和webstorm代码（有图详解)

2. 全局工具配置

登录Jenkins，在上篇文章中讲过

在腾讯云服务器OpenCLoudOS系统中安装Jenkins(有图详解)

自己服务器的IP+端口

maven配置如下：

文中画框的地方，就是上篇文章中的maven安装地址

在腾讯云服务器OpenCLoudOS系统中安装maven（有图详解)

JDK配置如下：

上文中的路径，就是服务器中jdk的安装路径，文章在腾讯云服务器OpenCLoudOS系统中安装jdk（有图详解）中有讲过

也可以 echo $JAVA_HOME找出

maven地址配置：

3. 插件安装

安装Publish over SSH

Publish over SSH: jenkins远程服务器发送文件,此插件作用是将svn上的代码自动打包部署到其他服务器上去

配置Publish Over SSH

拉到最底下，新增

备注：
这里的Remote Directory是所有部署文件的根目录配置，它会和后面项目中的上传路径进行叠加
例如本文中这里配置 /usr/local/nginx
后端项目上传地址中配置 /fabricate
所以后端项目自动化部署的jar文件实际上传地址是两个地址的叠加： /usr/local/nginx/fabricate

配置目标主机密码并测试连接：

点击运用、保存

安装SVN：

每次安装完插件，可能不会生效，所以需要重启Jenkins

具体重启方法和重启路径请看这篇文章：
在腾讯云服务器OpenCLoudOS系统中安装Jenkins(有图详解)

cd /etc/init.d

./jenkins stop

./jenkins start
1
2
3
4
5

4. 部署SpringBoot后端项目

选择你刚刚添加的svn用户：

增加构建步骤：

增加构建后操作步骤：

Source files：源文件。就是maven打包后生成的哪个文件要打包到目标服务器

Remove prefix：移除前缀。因为maven打包后，会有几层文件夹，我们只需要把要部署的jar之前的文件夹都删除即可

Remote directory：远程文件夹。maven打包后形成的jar要部署到哪个路径下

Exec command：部署包jar文件到了目标路径下后，需要启动的shell脚本

参考：
对于maven有多个子工程的，本地maven打包后，形成的jar文件是这个：

fabricate-admin.jar
这个jar就是我们要部署到目标服务器并要启动文件fabricate.sh启动的jar

把jar启动文件上传至该路径下：

给文件夹赋权：

chmod -R 777 /usr/local/nginx/fabricate/
1

这里赋权两个作用：

1. 给文件夹赋权，自动化部署时，生成的jar文件可以通过SSH传输到这边，不赋权读写权限的话，到时候写不进来
2. 给fabricate.sh赋予启动权限，jar文件传输过来，可以启动这shell脚本
   

启动文件如下：

export JAVA_HOME PATH CLASSPATH
JAVA_HOME=/app/soft/jdk/jdk1.8.0_341 #你自己的jdk路径
PATH=$JAVA_HOME/bin:$JAVA_HOME/jre/bin:$PATH
CLASSPATH=.:$JAVA_HOME/lib:$JAVA_HOME/jre/lib:$CLASSPATH
APP_HOME=`pwd`
AppName=fabricate-admin.jar  #你自己的部署包jar的名字
echo "  =====关闭Java应用======"
PROCESS=`ps -ef |grep java |grep -v grep|grep $APP_HOME/$AppName|awk '{print $2}'`
for i in $PROCESS
do
  echo "Kill the $1 process [ $i ]"
  kill -9 $i
done
echo "  =====启动Java应用======"
nohup JAVA_HOME/bin/java -jar $APP_HOME/$AppName  > $APP_HOME/$AppName.log 2>&1 & 
echo $! > savePid.txt
cat savePid.txt
rm  savePid.txt
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

保存：

点击构建：

可看控制台日志：

如果构建失败，可以从控制台日志看错误信息，以下三个步骤也可排查：

自动化部署有三步：

1. svn下载代码到workspace，并用maven打包形成target文件夹，底下有项目部署包jar

一般默认的工作空是**/var/lib/jenkins/workspace**

在这个路径下看自己的代码是否通过svn下载到了工作空间

代码路径下是否经过了maven打包形成target文件夹，产生部署包jar

2. 推送jar到目标路径

可观察上一步产生的jar，有没有推过来

这个就是你配置的推送SSH的jar部署路径

3. 启动shell脚本

只需观察上文启动脚本中的输出日志文件是否实时生成：

out.log日志文件生成

5. 部署vue前端项目

5.1 下载安装nodejs

http://nodejs.cn/download/

找到适合自己项目的nodejs版本，如果本地代码调试通的，cmd中node -v 看自己前端项目适合的版本

我这个项目适合的版本是v14.9.0

创建nodejs目录，并把安装包传到目录下

 mkdir -p /app/soft/nodejs
1

解压安装包：

tar -zxvf node-v14.9.0-linux-x64.tar.gz
1

所以nodejs的安装目录是：

添加环境变量：

vi /etc/profile
1

在最后一行添加以下三行，其中NODE_HOME是刚刚nodejs的安装解压目录：

保存退出后，

source /etc/profile
1

查看nodejs是否安装成功：

node -v

npm -v
1
2
3

安装成功后，去Jenkins中进行配置nodejs

安装nodejs插件：

搜索、勾选、安装

重启Jenkins，使之生效：

cd /etc/init.d/

./jenkins stop

./jenkins start
1
2
3
4
5

升级适合忘记截图了，下面的框框地方有个【升级】

安装nodejs缺少的依赖：

安装成功后重启Jenkins

重启Jenkins，使之生效：

cd /etc/init.d/

./jenkins stop

./jenkins start
1
2
3
4
5

再去配置nodejs的安装目录

配置并保存

由于是前后端分离项目，用nginx进行前后端连接，详情可以参考这篇文章：

nginx连接前后端分离项目

Jenkins自动化部署时，前端的代码打包在nginx安装目录的html目录下，所以先对该目录进行读写赋权

chmod -R 777 /usr/local/nginx/html/
1

新建前端项目：

配置svn: