想学前端自动化?比 Jenkins 更好上手的工具!

前言

前段时间写如何用 Jenkins 实现前端项目自动化打包部署,评论区有很多小伙伴分享了自己使用的 CI/CD 工具,笔者也是刚刚接触自动化,因此每个都了解了一下,于是就发现了这个 ------ 阿里云效,而对于笔者的项目,Jenkins 就有一种杀鸡用牛刀的感觉,因此本文就用阿里云效重建流水线!(绝非广告哈)

特点

询问了一下Kimi:点击链接查看和 Kimi 智能助手的对话

总结来说,Jenkins 以其强大的插件生态和灵活性在前端自动化方面表现出色,适合对自动化流程有特殊要求或者希望在本地环境中进行 CI/CD 的场景。而阿里云效 Flow 则以其简单易用和与阿里云服务的紧密集成,在云环境中进行 CI/CD 的场景下提供了便捷的解决方案。用户可以根据自己的具体需求和使用场景来选择最合适的工具。

站在一个前端角度,针对笔者的需求,我会更推荐前端新手选择阿里云效,原因是成本低。这里的成本即是心智成本,也是经济成本。Jenkins 需要熟悉 Linux 操作,并有能力排查及解决安装及配置过程产生的问题,还需要一台服务器安装,而阿里云效开箱即用,不需要安装,简单配置即可,个人使用免费版就绰绰有余(免费版限制了流水线数量)。

当然了,阿里云效应该是不能连接内网的,如果你需要部署的服务区在内网中,可能阿里云效就不适合你了。

配置 Flow

创建流水线

打开云效 Flow 网站,登录账号(没有阿里云账号的话需要注册),废话少说,直接新建流水线! (小小吐槽一下,一个页面两个按钮是同样的功能,一个叫"新建流水线",一个叫"创建流水线",强迫症看着难受)

选择模板

这里还是以笔者上一篇文章中的 Node 项目为例(Vue3+Vite),由于给出的模板中都有测试阶段,因此笔者这里选择空模板

点击创建后,进入流水线的编辑页面:

添加流水线源

点击添加流水线源

以 Github 为例,选择添加服务连接

第一次进入的话需要点击新建,会自动跳转到 Github 认证页面,点击绿色的授权按钮,然后输入 Github 密码确认就可以了。

如果认证完成了之后,返回 云效 页面还是没有显示,就关闭这个对话框,重新打开,就能选取了:

点击创建

记得要选择刚刚创建的服务连接,笔者在尝试的时候并没有自动选中。

选择对应的仓库及分支,其余选项按需选择,这里笔者都保持默认:

点击添加

打包阶段配置

点击空任务

这里构建集群有北京和香港两个,由于众所周知的原因,Github 项目最好选择香港集群,但是笔者实测北京集群也可以,偶尔会失败,因此笔者这里和其他选项一起保持默认。

点击添加步骤

构建 -> Node.js 构建

这里的版本选择方式笔者选择了输入指定版本,因为预置版本最高只有 Node 18,而笔者项目使用的是 Node 20,因此手动填写。这里云效使用的是nvm来安装 Node,所以要确保你输入的版本号是可以被nvm install识别的。

笔者通过流水线构建日志发现云效会自动设置 npm 镜像源,因此不需要手动设置。

到这里可以理解为已经将仓库拉取到了本地,并安装好了 Node 环境,接下来就是安装依赖和执行打包命令:

bash 复制代码
cnpm install

npm run build

注意这里的cnpm是云效打包环境中自带的,同时也会有缓存。

如果说,要用pnpm怎么办呢?只需要添加下面的命令即可:

bash 复制代码
cnpm install pnpm -g

通过变量与缓存可以看到,云效会保存npmyarn的缓存,因此如果使用pnpm的话,也可以将pnpmstore地址添加进去,来加快构建的速度:

pnpm默认的存储地址是/root/workspace/.pnpm-store/v3但是缓存是不允许添加/root/workspace这样的目录的,因此需要通过命令更改一下,并将目录添加到云效缓存中:

bash 复制代码
pnpm config set store-dir /root/pnpm-store

所以完整的命令是:

bash 复制代码
cnpm install pnpm -g

pnpm config set store-dir /root/pnpm-store

pnpm install

pnpm build

⚠️ 注意,这里打包好之后,还需要添加构建物上传步骤,因为流水线中的下一个流程是无法获取之前的流程中的任何文件的!构建物上传相当于将文件存到了一个共享空间中,下一个流程就能获取到了。

这里也可以发散思维,也可以上传打包产物之外的文件,比如配置文件等等,供下面的流程使用。

选择添加步骤 -> 上传 -> 构建物上传

这里的打包路径是相当于项目路径,./就是项目根目录。这里是将这个文件夹打包成一个压缩文件,如果勾选了制品中包含打包路径的目录,那压缩包中就会有一个dist文件夹,这里不需要勾选。

部署阶段配置

点击新的任务

选择 部署 -> 主机部署:

这里如果读者服务器是阿里云ECS服务器,可以直接选择 ECS应用部署

制品选择上一步的制品:

如果之前没有配置过主机组,这里点击新建主机组

跳转到主机组管理,选择新建主机组,新建完成后进入这个主机组,选择添加新主机

如果需要部署的服务器不是阿里云ECS云服务器,需要手动复制下面的代码,到目标服务器上执行,这里笔者使用的是阿里云ECS云服务器,因此添加方式直接选择第二项阿里云ECS

如果之前没有授权过,那么这里点击添加服务连接,然后在新的对话框中选择新建

然后会跳转阿里云 RAM 控制访问中心授权,同意授权即可。

选择刚刚添加的服务连接,选择服务区所在地域,就能找到自己的服务器了。

点击保存就能将服务器添加到主机组中。

非阿里云ECS

将红框代码复制到服务区终端中执行:

出现上图中的status running就说明安装成功了,点击页面的刷新按钮,就可以看到服务器成功添加了:

笔者这里使用的是阿里云轻量服务器,其他服务商的服务器需要读者自行尝试了。


主机组配置好后返回流水线配置页面,选择刚刚配置好的主机组:

这里的下载路径就是上面的制品下载到服务器上的保存路径。

⚠️ 确保服务器上这个路径是存在的,不然可能会报错!

这里笔者将制品下载到/www/test目录下:

部署脚本则是制品下载后执行的操作,一般就是解压,然后复制到目标地址,然后重启nginx之类的:

bash 复制代码
# 删除之前的所有文件
rm -rf /www/test/*

# 解压文件,这里 -C 后面的路径一定要是已经存在的路径
tar zxvf /www/packages/package.tgz -C /www/test

# 删除下载下来的制品
rm /www/packages/package.tgz

部署策略选择不暂停

钉钉通知

这一步可以选择开启钉钉机器人通知,配置方法和上一篇 Jenkins 类似:

如何获取 webhook 地址加签密钥可以看笔者之前的 Jenkins 文章

至此流水线配置完成了。

测试 Flow

点击右上角保存并运行

显示部署成功,登录服务器查看文件:

打开网页试一下:

网页也正常显示了。

Git 提交触发流水线

现在还没有实现 Git 提交触发流水线,编辑流水线,选择流水线源开启代码源触发,取消勾选开启分支或标签过滤

复制下面的Webhook链接,然后在 Github 仓库设置里添加这个 Webhook ,注意这里的Content--type要选择application/json,否则接口会报错:

随便改动代码并提交,可以看到已经自动触发构建了:

笔者这里失败了,原因是 Github 连接失败:

所以 Github 项目还是推荐香港集群,如果必须用北京集群的话,可以多试几次,一般就能成功。

刷新网页,可以看到更新内容也成功显示了:

总结

本文使用了阿里云效作为流水线工具,笔者认为对于个人项目使用阿里云效更为便捷,配置也更为简单。但如果你的项目部署在内网,或者有非常复杂的配置需要插件支持,那么 Jenkins 可能才是更好的选择。笔者也是刚接触自动化,文中如有错误或不足之处,欢迎批评指正。

前篇回顾:

我早就看现在的工作流不爽了!- 前端使用 Jenkins - 掘金 (juejin.cn)

相关推荐
GIS程序媛—椰子13 分钟前
【Vue 全家桶】7、Vue UI组件库(更新中)
前端·vue.js
DogEgg_00120 分钟前
前端八股文(一)HTML 持续更新中。。。
前端·html
ZL不懂前端22 分钟前
Content Security Policy (CSP)
前端·javascript·面试
木舟100926 分钟前
ffmpeg重复回听音频流,时长叠加问题
前端
王大锤439137 分钟前
golang通用后台管理系统07(后台与若依前端对接)
开发语言·前端·golang
我血条子呢1 小时前
[Vue]防止路由重复跳转
前端·javascript·vue.js
黎金安1 小时前
前端第二次作业
前端·css·css3
啦啦右一1 小时前
前端 | MYTED单篇TED词汇学习功能优化
前端·学习
半开半落1 小时前
nuxt3安装pinia报错500[vite-node] [ERR_LOAD_URL]问题解决
前端·javascript·vue.js·nuxt