前言

每当我们调整项目时，就要重新把项目打包部署到服务器，这样烦锁的事情有没有让它自己完成呢？

答案是：有的。

我将基于“ 阿里云效”来构建我们的前端工程化，而阿里云效开箱即用，不需要安装，简单配置即可。接下来跟着文章走，我将博客后台管理系统部署到“阿里云效”来实现项目自动部署。

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

配置 Flow

创建流水线

打开“阿里云效”网站，登录账号（没有阿里云账号的话需要注册）。

接下来就点击 【新建流水线】按钮

选择模版

由于博客后台是基于 React + vite ，我们就选择 【空模板】

点击 【创建】 后，进入流水线的编辑页面

添加流水线

点击 [添加流水线源] 以 Github 为例，选择 [添加服务连接]

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

接下面就提选中刚刚创建服务连接，并选择对应的仓库及分支，其它都保持默认

项目打包配置

点击 【空任务】

在构建集群中，由于我是GitHub项目，所以选择 【云效中国香港构建集群】比较好，接下来就是点击 【添加步骤】来添加我的 【Node.js 构建】

这时需要根据自己当前项目 node.js版本，来为项目打包，由于我项目使用的是 v20.18.0，所以选择输入指定版本后，自行输入 20.18 版本。 

继续选择 【添加步骤】-> 【上传】->【构建物上传】

部署阶段配置

点击 【新的任务】

选择 【部署】 -> 【主机部署】

接下来就是主机部署

如果是第一次创建时，主机组应该为空，所以我们要去 【新建主机组】

点击 【确定】后，就接入新主机，由于我是使用 "阿里云ECS" 所以我直接切换到 【阿里云ECS】

根据要求，绑定我们的ECS服务器就可以了，然后返回列表在 【主机组管理】列表中可以查看到

当主机配置好后，回到我们流水线，现在要设置"下载路径"，这个下载路径需要在我们服务器文件中，创建一个文件夹来保存 "package.tgz"文件，这里的“下载路径”就是上面的“制品”下载到服务器上的保存路径。

/www/wwwroot/blog_package/package.tgz

接下面就是部署脚本，且暂停方式选择【不暂停】，分批数量 【2】

rm -rf /www/wwwroot/admin/*

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

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

 

测试 Flow

在配置完成后，我点击【运行】时，总是报错，可能通过部署日志里面可以查看到是哪里出现问题，针对这些问题去解决，这样整个流程部署就已经完成了。

Git提交触发流水线

由于上面操作都是我手动去执行 【 运行】去跑整个项目的部署，但是我们平时就是想通过当项目提交到 github 时自动帮我去触发 【运行】来部署整个项目。

首先，我们先回到流水线，点击【流水线源】，去【开启代码源触发】

复制 "Webhook" 到我们 github 项目仓库设置里添加这个 Webhook ，注意这里的 “Content type ”  选择 "application/json" , 最后点击 【Add webhook】

我们就可以通过把项目提交到 github 来触发这个服务器部署了

此时我们通过提交项目到 github 已经触发了我们的服务器部署了。