前言
前段时间写如何用 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
通过变量与缓存
可以看到,云效会保存npm
和yarn
的缓存,因此如果使用pnpm
的话,也可以将pnpm
的store
地址添加进去,来加快构建的速度:
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 可能才是更好的选择。笔者也是刚接触自动化,文中如有错误或不足之处,欢迎批评指正。
前篇回顾: