window服务器使用gitee和jenkins构建vue单页面项目实践

140 阅读3分钟

假如有一天你被裁了,不得不入职一家小公司,这家小公司开发基础设施不完善,甚至于没有,你该怎么办?

jenkins作为cicd的基础工具,很重要。

这也是我学习jenkins的初衷。

安装jenkins

为了更加符合实际开发情况,我在腾讯申请了一台免费的云服务器,window系统,试用一个月。

image.png

然后在这台服务器安装jenkins,当然jenkins依赖jdk,所以同时安装的还有jdk11。

安装jdk可以说是比较经常性的操作,这里就不做介绍了。直接安装jenkins。安装jenkins有两种方式,一种是直接下载war包,然后使用java命令运行;另一种是下载window镜像服务,我采用的是前者下载war包的方式。

image.png

下载之后,打开命令行工具,找到war包目录,之后使用


java -jar jenkins.war

运行jenkins.war即可,还可以通过httpPort指定运行的端口号,我的默认为80端口,用80端口是为了可以直接用公网地址访问


java -jar jenkins.war –httpPort=80

到这里,jenkins就安装完毕了。可以直接在浏览器打开,然后安装各种插件,安装之后进入jenkins首页。

安装vue开发环境

这个教程是面向前端的,前端对vue开发环境的安装就比较熟悉了,包括安装nodejs,安装vscode,以及git bash。

git要测试一下能够从远程拉取代码。

安装好这些之后,在gitee上面创建vue单页面工程的代码库。

关联gitee和jenkins

关联gitee代码库

首先构建一个item,输入任务名字,选择自由工程

image.png

之后配置gitee代码库地址、gitee账号和密码

image.png

注意这里的Credentials必须是邮箱和密码,不能是手机号和密码,反正我手机号没有通过。

输入完这之后就可以构建了,构建之后之后工作空间就可以看到代码了

image.png

执行node -v

为了显示构建成功,在构建任务的配置里面添加一个构建命令node -v

image.png

为了让node -v执行成功,需要安装nodejs插件

image.png

安装完插件之后到Manage Jenkins的tool里面安装Nodejs

ad9830a24635f8ba8f9f1d88d13ea4c.png

34a9b4b3c7cddc40eb633717919ddac.png

完成上面的步骤,再回到构建任务的构建环境,选择添加Node安装路径,选择下拉的NodeJS,然后应用保存即可

image.png

使用webhoook触发回调执行jenkins构建

本文使用Generic Webhook Trigger生成gitee的webhoook地址。在Jenkins中,Generic Webhook Trigger是一个插件,它允许Jenkins通过Webhook来触发构建。

回到Manage Jenkins,在插件里面添加Generic Webhook Trigger

image.png

之后回到构建任务的配置页面,构建触发器会出现Generic Webhook Trigger选项

17c617b8dd18f3fa0753754f8d53e65.png

图中地址就是webhook触发地址。这个接口有一个可选参数token,继续回到Manage Jenkins,打开Users

d965a754de345ad03cbe608d4923caa.png

生成Api Token,点击下面中的生成按钮之后,复制生成后的token

572c63ff0885960b9ce89e584675c2c.png

将复制后的token粘贴到构建任务配置里面Generic Webhook Trigger里的token里面

9260f986c8d84e92090f9b78fe30262.png

这之后就可以到gitee代码库配置webhook了。

1717239028931.png

可以直接点击gitee的测试按钮进行测试,返回200即表示成功了。

总结

一般的服务器是linux系统的,本文算是抛砖引玉给出一个基本的思路。

我的体会jenkins就是一个跨程序的命令管理工具。上面演示的是其将本地的程序比如nodejs、git bash,与gitee和window的命令行命令关联起来。

正因为jenkins是跨程序的,所以不限于前端开发持续构建,也可以是后端的。