jenkins+gitee+linux宝塔面板自动化部署vue-cli项目

MarJet
390 阅读5分钟

前言

    Jenkins是一个开源软件项目，起源于Hudson（Hudson是商用的），是基于Java开发的一种持续集成工具，用于监控持续重复的工作，旨在提供一个开放易用的软件平台，使软件项目可以进行持续集成。

    手动部署项目的过程是痛苦且乏味的, 而一个持续集成和部署的工具能够帮助你解放双手, 投入更多的精力到其它的事情上, 然而Jenkins可能正好。

宝塔面板安装jenkins

这里就不介绍相关宝塔面板的安装教程了，自备服务器宝塔面板。直接开始安装相关jenkins软件。

在软件商店搜到 java项目管理器 并且安装

image.png

安装完成后我们点开版本管理并且在里面安装tomcat8

image.png

宝塔里对应的tomcat7 8 9端口分别对应 8081 8082 8083

然后我们选择面板的文件根目录下找到我们的tomcat8目录的webapps中： www-> server-> -> tomcat8 -> webapps

这里我们通过宝塔面板中的远程下载模式进行一个安装形式 github.com/jenkinsci/j…

image.png

这样我们下载速度快，省去了上传服务器的操作，下载后它自动还会解压出来。

image.png

现在我们这个服务上的jenkins就已经安装好了，然后我们通过自己的服务ip加上8082端口加jenkins就能打开(你的ip或域名):8082/jenkins/)jenkins界面进行下一步的安装。

打开浏览器我们进入这个页面提示需要解锁Jenkins，这里提示了存到了我们服务器下/home/www/.jenkins/secrets/initialAdminPassword目录下的这个文件中，我们只需要根据整个路径去找打这个文件打开里面就有我们的密码然后复制出来粘贴就可以了。

image.png

我们输入密码后一会就会跳到如下界面

image.png

这里我选了第一个就是推荐的参加，您也可以选择第二个选择插件来安装，感觉推荐的是方便的等它安装完我们再安装我们需要的插件。

等我们安装完插件后就会跳到如下界面 创建一个登录账号

image.png

进行登录 image.png

登录后进入首页然后选择进入管理Jenkins（Manage Jenkins）然后选择进入Manage Plugins管理我们的插件

image.png

image.png 进入对应的插件管理先安装个中文插件。😄

这里还需要安装对应local插件安装完成好在系统设置里设置默认语言为zh_CN

image.png

这里因为我使用了gitee所以安装了相关gitee的插件

image.png

安装插件后然后去系统配置中配置相关gitee的连接使用了gitee的api令牌进行一个验证，当点击测试连接显示成功就可以了。

image.png

到这里为止我们安装步骤就结束了已经，然后就可以创建我们的自动化任务了

创建自动化任务

这点击新建任务 (New Item)进入页面后填写相关的名称以及选择自由格式的项目创建

image.png 在此输入一个任务的名称

image.png 创建任务成功后，页面会跳到当前任务的配置页。

在这里配置我们的git仓库地址，以及验证git仓库的用户信息。

image.png

然后此步骤添加我们的git触发条件 我这里设置的push提交构建一次

image.png 然后这里配置一些git的信息webhook是的密码生成配置到gitee项目仓库的hook中。

image.png

这里配置一些对应的命令操作。

image.png


cd /home/www/.jenkins/workspace/vue-project // 找到对应的项目目录地址

# npm run install  // 安装依赖

npm run build // build一下

cd dist // 

cd  /www/wwwroot/vue-project


rm -fr /www/wwwroot/vue-project // 删除文件

cp -r /home/www/.jenkins/workspace/vue-project/dist /www/wwwroot/vue-project // 复制文件到对应目录

这里是对应的nginx配置信息 主要是配置我们vue项目的dist文件夹下部署。

image.png

因为没有挂域名，所以直接通过ip加端口进行一个打开， 正常都能呈现说明就成功了。

image.png

这里我们通过本地的vscode打开vue的项目然后进行一次修改并且推送到远程。

image.png

修改推送后立即打开我们的jenkins管理页面就能看到有有一个构建任务在执行了，说明我们就成功了，等待它的执行完毕就好了。

image.png

等待执行完毕我们在打开对应的网站就能看到我们新修改的页面了。 到此就说明我们大功告成了，可以解放去手动部署的繁琐了。

image.png

总结

     这里我只是使用了gitee的仓库简单的进行了一个测试搭建，其实别的git平台也都是类似原理。jenkins的功能还是很强大的，我这里只是简单的搭建了部署，更多的功能还是得去探索。使用到自动化化，主要还是提升我们的一些效率问题，以及节约运维一些时间。

总结几个使用jenkins的点：

  • 降低风险，由于持续集成不断去构建，编译和测试，可以很早发现问题。
  • 减少重复性的工作。
  • 持续部署，提供可部署单元包。
  • 持续交付可供使用的版本。
avatar
文章
阅读
粉丝