前言：最近Jenkins部署的热度比较高，于是就想出一篇关于我是如何使用Jenkins部署前后端分离项目的，本篇记录了我是如何一步一步去配置、搭建和部署的完整流程，每一行代码都进行了实测和讲解，通过图文的教学写成博客分享给大家！

博主的其他部署教程：

1、Docker部署前后端分离项目：手把手通过Docker部署前后端分离项目（亲测可用）

2、Linux系统部署Tomcat：Linux系统部署Tomcat详细教程（图文讲解）

3、Linux系统部署Nginx：Linux系统部署Nginx详细教程（图文讲解）

4、Linux系统配置Maven：Linux系统配置Maven环境详细教程（图文讲解）

5、Linux系统配置Node.js：Linux系统配置Node.js环境详细教程（图文讲解）

6、Linux系统安装部署MySQL：Linux系统安装部署MySQL完整教程（图文详解）

7、Linux系统安装部署Redis：Linux系统安装部署Redis完整教程（图文详解）

8、Linux系统安装部署MongoDB：Linux系统安装部署MongoDB完整教程（图文详解）

9、Linux系统安装部署Jenkins：Linux系统安装部署Jenkins详细教程（图文讲解）

10、宝塔面板部署前后端分离项目：手把手教学使用宝塔面板部署前后端分离项目（全面详细）

一、环境配置

1.1、安装JDK

1.2、安装Git

一、环境配置

在使用Jenkins部署前后端分离项目，务必需要先准备好这6个环节！

1.1、安装JDK

安装的版本是JDK11，直接使用yum一键安装

yum install java-11-openjdk-devel

1.2、安装Git

直接执行如下命令一键安装

yum install git

1.3、配置Maven环境

没有安装的话请移步这篇博客：

Linux系统配置Maven环境详细教程（图文讲解）

1.4、配置Node.js环境

没有安装的话请移步这篇博客：

Linux系统配置Node.js环境详细教程（图文讲解）

1.5、部署Nginx

没有安装的话请移步这篇博客：

Linux系统部署Nginx详细教程（图文讲解）

1.6、部署Tomcat

没有安装的话请移步这篇博客：

Linux系统部署Tomcat详细教程（图文讲解）

二、准备Jenkins安装包

官方下载网址：Jenkins download and deployment

点击左边的稳定版进行下载即可

三、部署Jenkins

1、找到Tomcat的webapps目录，把刚才下载好的war包上传上去（Xftp）

2、进入Tomcat的bin目录，执行如下命令重启Tomcat

停止

sh shutdown.sh

启动

sh startup.sh

重启完以后就会发现多个了jenkins的文件夹，接下来就是通过Tomcat来进行访问Jenkins了

3、浏览器访问：http://ip地址:8080/jenkins

注：安全组需要放行8080端口号

这样我们的jenkins就部署完成了

四、初始化Jenkins

1、根据提示执行如下命令获取管理员密码

cat /root/.jenkins/secrets/initialAdminPassword

2、选择左边的一键安装

注：第一次启动可能会白屏，解决办法是在url后面加个restart，例如：http://ip地址:8080/jenkins/restart，然后敲回车，这个问题我碰到过，特此记录！

3、安静等待安装完毕即可

4、填写完基本信息后，这边选择的是使用admin账户继续，下次登录的话用户名默认是：admin，密码是上面获取的管理员密码，如果你选择保存并完成，那么下次登录的用户名和密码就按你本次创建的信息进行登录

5、点击保存并完成

6、点击开始使用Jenkins

7、这样我们自己的Jenkins就初始化好了！

五、配置Jenkins

在部署Vue和SpringBoot项目之前务必配置一下Jenkins

4.1、安装Maven插件

1、点击左边的Manage Jenkins

2、点击Plugins

3、搜索Maven并安装，记得勾选

4、静静等待安装完毕，然后点击返回首页

4.2、安装Node.js插件

1、重复之前的步骤，这次搜索NodeJs进行安装，记得勾选

2、勾选并重启Jenkins完成之前Maven和本次Node.js的安装

3、重启以后输入账号和密码重新登录进来，选择左边的系统管理，接下来进行全局工具配置

4.3、配置JDK

我们需要找到yum安装的JDK源目录，按顺序执行如下命令

1、查java位置

which java

2、查软连

ls -l /usr/bin/java

3、查JDK源目录

ls -l /etc/alternatives/java

找到的源目录如下

/usr/lib/jvm/java-11-openjdk-11.0.19.0.7-1.el7_9.x86_64

4、点击新增JDK并取消自动安装，最后将源目录粘贴到Jenkins配置中

这样JDK就配置完成了！

4.4、配置Maven

1、输入如下命令找到我们Maven仓库

mvn -v

找到的源目录如下

/maven/apache-maven-3.8.8

2、点击新增Maven并取消自动安装，最后将源目录粘贴到Jenkins配置中

这样Maven就配置完成了！

4.5、配置Node.js

1、找到安装Node.js的源目录

源目录如下：

/nodejs/node-v15.0.0-linux-x64

2、点击新增NodeJs并取消自动安装，最后将源目录粘贴到Jenkins配置中

这样Node.js也配置完成了！

以上三个都配置完成以后，翻到最下面点击保存！

六、部署SpringBoot项目

1、新建SpringBoot项目打包的Jar包的存放地址，这边我的绝对路径是

/project/springboot

2、回到首页，点击新建任务

3、输入项目名称，选择构建一个maven项目，最后点击确定

4、选择源码管理，输入git仓库地址，如果你这个仓库是私有的，需要手动添加一下凭据，就是你git的账号和密码，因为我这个项目是开源的，所以不需要进行添加，分支默认选择主分支

5、选择在Build，在Goals and options中添加如下命令

clean install -Dmaven.test.skip=true

命令详解

参数	解释
clean	清理项目，会删除目标目录target里面的文件
install	安装项目到本地仓库，会先执行compile，test等目标，然后把打包的jar上传到本地仓库
-Dmaven.test.skip=true	该参数表示跳过测试代码的编译和执行

6、选择Post Steps，选择执行shell

添加如下命令

mv /root/.jenkins/workspace/springboot-jenkins/target/springboot-docker-0.0.1-SNAPSHOT.jar /project/springboot/springboot-docker-0.0.1-SNAPSHOT.jar
cd /project/springboot/
BUILD_ID=dontKillMe nohup java -Xms512m -Xmx512m -jar springboot-docker-0.0.1-SNAPSHOT.jar &

注：

1、/root/.jenkins/workspace/springboot-jenkins中的springboot-jenkins是这次构建的项目名

2、需要自己先提前新建好/project/springboot目录

3、springboot-docker-0.0.1-SNAPSHOT.jar是maven打包后默认的文件名，不知道的先提前打包看一下包名，防止写错

命令详解

参数	解释
mv /root/.jenkins/workspace/springboot-jenkins/target/springboot-docker-0.0.1-SNAPSHOT.jar /project/springboot/springboot-docker-0.0.1-SNAPSHOT.jar	这行将Jenkins工作空间里构建好的Spring Boot项目的jar文件，移动到/project/springboot目录下，以便运行。
cd /project/springboot/	切换目录到上一步移动jar包的目录
BUILD_ID=dontKillMe nohup java -Xms512m -Xmx512m -jar springboot-docker-0.0.1-SNAPSHOT.jar &	BUILD_ID=dontKillMe 是为了阻止Jenkins在任务完成后杀掉启动的进程，使用nohup在后台运行该jar文件，启动Spring Boot应用

7、点击保存

8、点击立即构建，接着左下角就会有个加载动画

9、点进去以后，点击控制台输出

10、第一次部署会比较慢，因为我的Maven仓库是空的，所以因为大部分的时间都是Maven在从阿里云镜像下载Jar包，多多等待一会

这样就部署成功了！

注：放行9090端口号

10、使用postman测试接口

OK，大功告成！

七、部署Vue项目

1、新建Vue项目的存放地址，这边我的绝对路径是

/project/vue/dist

这个是我配置好Nginx服务器读取的网站目录

2、配置好nginx.conf文件，只要有3个地方，分别是：端口号、读取路径和反向代理

location /api/ {

    proxy_pass http://ip:端口/;

}

如图所示

不知道怎么配置的可以看上面的1.5节的部署Nginx

注：安全组需要放行88端口号

3、启动我们的Nginx然后进行访问

因为我们的dist文件夹什么都没有，所以403很正常

4、重复之前的步骤，输入项目名，选择自由风格的软件项目，最后点击确定

5、点击源码管理，粘贴你的项目地址并指定分支，我这边提供的是开源的Demo，所以不需要添加凭据

6、点击Build Steps，选择执行shell

7、执行如下命令

npm install
rm -rf ./dist/*
npm run build
rm -rf /project/vue/dist/*
cp -rf ./dist/* /project/vue/dist
chmod -R 777 /project/vue/dist

命令详解：

参数	解释
npm install	运行npm install安装所需的node模块依赖
rm -rf ./dist/*	清空本地dist目录，删除之前的构建结果
npm run build	运行npm run build命令进行项目打包构建，生成最新的dist文件夹
rm -rf /project/vue/dist/*	删除服务器部署目录下的旧的dist，做部署前的清理工作
cp -rf ./dist/* /project/vue/dist	将最新构建的本地dist目录拷贝到服务器部署目录下，完成部署
chmod -R 777 /project/vue/dist	修改部署目录的权限为777，确保jenkins用户有足够权限写入部署目录