前言:最近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详细教程(图文讲解)
扫描二维码关注公众号,回复: 16434158 查看本文章10、宝塔面板部署前后端分离项目:手把手教学使用宝塔面板部署前后端分离项目(全面详细)
目录
一、环境配置
在使用Jenkins部署前后端分离项目,务必需要先准备好这6个环节!
1.1、安装JDK
安装的版本是JDK11,直接使用yum一键安装
yum install java-11-openjdk-devel
1.2、安装Git
直接执行如下命令一键安装
yum install git
1.3、配置Maven环境
没有安装的话请移步这篇博客:
1.4、配置Node.js环境
没有安装的话请移步这篇博客:
1.5、部署Nginx
没有安装的话请移步这篇博客:
1.6、部署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用户有足够权限写入部署目录 |
8、点击保存
9、点击立即构建,接着左下角就会有个加载动画
10、点进去以后,点击控制台输出
11、看到success就是部署成功了!
12、再次访问我们刚才部署好的Nginx网站(不需要重启Nginx,热部署的)
到这一步,我们的前后端项目就算都部署完成啦!
八、项目Gitee源码
这边我把本篇博客用到的项目源码分享给大家,可以自己尝试一下:
前端:Docker部署Vue项目: 使用Docker部署一个简单的Vue项目源代码分享
后端:Docker部署SpringBoot项目: 使用Docker部署一个简单的SpringBoot项目源代码分享
九、总结
以上就是我使用Jenkins部署自己的前后端分离的一些技术分享,如有问题欢迎评论区提出!