阿里云云效自动化部署vue项目 ​

现在有些公司要员工需要会自动化部署的技能，以前我也做过一个GitHub的自动化部署，但是我发现有些代码仓库的自动化部署是通过流水线的方式做的，好了废话就不多说了，用哪个代码仓库就自己甄别吧，有好有坏的，这次我用的代码仓库是阿里云的云效。

有些是用yaml来做的，也有些是用可视化来做的，（看自己喜欢吧，都一样的）

我会一步步来实现的，有些步骤需要提前配置的。这里我用到的是阿里云的服务器，因为项目是部署到线上的，就是我本地通过提交代码，然后经过代码仓库的流水线配置，持续部署（CI/CD）到线上更新

第一步：新建流水线 ​

第二步：选择有服务器主机的 ​

第三步：有好几个步骤（流水线源、测试、构建、部署等） ​

第四步：删除测试模块（代码扫描和单元测试都要删除）。 ​

测试步骤我就省略了（反正我不需要，你们自己决定），你自己的代码写的什么样自己清楚，现在要的是部署项目，不是测试代码

第五步：我分点来说明 ​

1. 第1步：需要添加流水线源
2. 第2步：我的代码仓库是在codeup的
3. 第3步：因为我这里已经添加过服务器的链接了，就不去说明了，就是需要你去你的服务器点击一下授权，我这个是阿里云的服务器，听说其他的服务器不太兼容，我也不清楚
4. 第4步：就是我的代码仓库了，选择你需要代码仓库就行了
5. 第5步：需要开启。就是自动触发，我通过代码提交时就自动触发自动化部署，要么不选，就要手动点击运行

第3步的图，需要你根据步骤去阿里云那边点击授权

第5步的图，图上的标签栏有一个触发设置的选项，这个已经开启了代码源触发就不用那边的了

第六步：构建。有3个需要配置，其他可以默认 ​

1. 第1步：安装node环境。可以根据我的来，但是最好按照你自己的，毕竟你的node版本跟我的可能不一样

2. 第2步：执行命令。这个是vue项目，主要就这两行命令

   bash

   pnpm install
   pnpm build

   pnpm install
   pnpm build

   1
   2
   

   

3. 第3步：构建物上传。服务连接上面已经添加过了；打包路径，默认是dist/

   

第七步：主机部署 ​

1. 第1步：主机组。这个需要配置好，就是你的服务器

2. 第2步：下载路径。这个路径就是你项目的目录，我这个是用宝塔的，域名也是一个二级域名，至于package.tgz这个压缩包，是构建时执行的打包命令后，变成了压缩包，直接放到线上解压就行了

3. 第3步：部署脚本。他有几种部署的脚本的，只是注释了，哪几种都可以，但需要对应你的配置

   sh

   #解压构建的dist压缩包到指定目录
   tar zxvf /www/wwwroot/docs.suntemple.cn/dist/package.tgz -C /www/wwwroot/docs.suntemple.cn/dist
   #删除dist压缩包
   rm -rf /www/wwwroot/docs.suntemple.cn/dist/package.tgz

   #解压构建的dist压缩包到指定目录
   tar zxvf /www/wwwroot/docs.suntemple.cn/dist/package.tgz -C /www/wwwroot/docs.suntemple.cn/dist
   #删除dist压缩包
   rm -rf /www/wwwroot/docs.suntemple.cn/dist/package.tgz

   1
   2
   3
   4
   

   （部署脚本中也可以使用变量进行编码，上面的变量和缓存是定义变量的，我觉得没必要，这个定义的变量一般都是作用到域名，但是基本是一对一关系，没必要用变量）

这个新建主机也说明一下吧

只要一个主机组就行了，然后在里面添加主机，需要你去阿里云服务器授权，选择你的服务器就行了。（授权服务连接；地域就是你的服务器地区：北京、上海等；最后主机会自动识别出来的）

补充：可以使用插件通知是否成功，最好放在主机部署

结果成功的样子 ​

注意：图片右上角可以编辑流水线；可以回滚代码；可以手动运行流水线