想学前端自动化？比 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

通过变量与缓存可以看到，云效会保存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