云效实现前端自动化打包部署

实现流程

1. 新建流水线

1.1 打开云效，找到流水线

立即新建：

选择模版或者创建空流水线

2.配置代码地址

1. 选择代码源，阿里云的话就选择codeup即可
2. 服务连接，主要是你自己的云效服务codeup
3. 代码路径，根据你的云效路径默认生成的下拉选择你要配置的即可
4. 选择要打包部署的分支名，例如：dev分支

3.Node.js 构建

vue项目一般在node.js环境下，webpack进行构建，构建命令一般为：npm run build，打包后生成的文件夹一般为list

• 任务名称任意即可
• 集群：一般默认都是云效北京构建集群
• node.js构建：
  node版本如果没有特殊要求，就选最高的即可
  命令行：

npm install
npm run build

之所以先install一下防止，新增了插件项目构建失败的问题

配置打包路径：

4.主机部署

其中主要是需要配置服务器，接入新主机，将图中命令数据复制，登录所要构建的服务器后，直接粘贴回车执行即可。

配置主机后，部署配置下载路径，下载路径就是你的上一步dist文件夹要放的位置路径，在此路径下添加：/package.tgz即可，
后端部署脚本，其中APP_NAME为路径变量

tar zxvf /home/${APP_NAME}/package.tgz -C /home/${APP_NAME}/
rm -f /home/${APP_NAME}/package.tgz

5.配置完成、使用

点击此处即可实现一键部署