云效流水线使用Node构建部署前端web项目

云效流水线实现自动化部署

背景

先来看看没有配置云效流水线之前的部署流程：

而且宝塔会经常要求重新登录，麻烦的很

网上博客分享了不少的配置流程，这一篇博客的亮点就是不仅给出了npm命令构建，还给出了yarn命令构建，自测都成功部署了。

使用yarn构建过程中，遇到很多报错。

yarn install ETIMEDOUT
certificate has expired
getaddrinfo ENOTFOUND registry.nlark.com

具体怎么解决请看配置流水线的 [Node.js 构建](#Node.js 构建)

新建流水线

进入到云效后台，按照下图步骤新建流水线，选择"部署到阿里云主机"

配置流水线

前面已经选好流水线模板了，接下来就是配置

第一步，修改基本信息。

本项目要部署的是测试环境，所以选了日常环境

第二步，添加流水线源。这是最基础的配置，涉及了：关联代码仓库、配置触发条件

把代码检查跟单元测试删除了，暂不需要。

此步骤的意思是，当你把最新的代码push到xx分支上就会触发流水线

第三步，Node.js 构建

重要步骤

先看整体的构建步骤

上图有个构建步骤叫下载流水线源，其实就是跑了一下git clone，实际构建还需要打包dist产物，也就是Node.js 构建、构建物上传这两个构建步骤

Node.js 构建

node的版本根据实际需要去选，vscode终端输入node --version查看项目依赖的node版本，但其实云效给出的版本也够用了。

构建命令（npm版本）

bash 复制代码

cnpm install
npm run build:test

为了避免项目中途增加依赖导致打包报错，建议先install再打包，云效推荐使用cnpm安装依赖，内部配置了最新的国内镜像源（淘宝镜像源）

构建命令（yarn版本-配置代理）

bash 复制代码

#yarn版本与本地版本保持一致（非必要步骤）
#npm install yarn@1.22.19 -g
#yarn --version
yarn config set registry https://registry.npmmirror.com/
yarn config set strict-ssl false
npm config set registry https://registry.npmmirror.com/
npm config set strict-ssl false
yarn config list
yarn install
yarn run build:test

registry 地址是最新的国内镜像源，保持与本地配置一样（vscode的配置）

构建命令（yarn版本-不配置代理）

bash 复制代码

#yarn版本与本地版本保持一致（非必要步骤）
#npm install yarn@1.22.19 -g
#yarn --version
yarn config set registry https://registry.yarnpkg.com
yarn config set strict-ssl false
npm config set registry https://registry.npmjs.org
npm config set strict-ssl false
yarn config list
yarn install
yarn run build:test

如果不配置代理那就要科学上网了，构建集群需要重新选择为"云效中国香港服务集群"，并且 registry 要设置回官方源

记录Node.js 构建使用yarn命令过程遇到一系列报错问题：

问题一：error An unexpected error occurred: "https://registry.npmjs.org/d3-hexjson/-/d3-hexjson-1.1.0.tgz: ETIMEDOUT"

解决方案：配置国内镜像源或者使用云效中国香港服务集群

问题二：项目某个包报错certificate has expired

解决方案：构建脚本多加多一句yarn config set strict-ssl false、npm config set strict-ssl false

问题三：项目某个包报错getaddrinfo ENOTFOUND registry.nlark.com

解决方案：删除项目的yarn.lock、node_modules目录，重新执行yarn install，再提交变更的yarn.lock文件（参考博客：本地或jenkins打包报错：getaddrinfo ENOTFOUND registry.nlark.com）

构建物上传

构建物上传很简单，只要设置一下为打包路径

bash 复制代码

#具体要看 webpack 配置的 `output.path` ，不一定都叫dist
dist/

这代表只会上传dist目录下所有文件。到了主机部署，云效会把这个构建物压缩，传输到你自己的阿里云服务器

第四步，主机部署

重要步骤

先看主机部署整体配置

新建主机组暂时没有教程，可以参考以下教程：

下载路径，需要去宝塔新建一个目录，专门放流水线下载的压缩包。

下载路径

bash 复制代码

/www/wwwroot/packages/web.tgz

执行用户

bash 复制代码

root

部署脚本

bash 复制代码

# 删除dist下的所有文件
rm -rf /www/wwwroot/${APP_PATH}/dist/*
# 把构建物解压到dist目录下
tar zxvf /www/wwwroot/packages/web.tgz -C /www/wwwroot/${APP_PATH}/dist
# 删除压缩包（非必要步骤，反正每次部署都会覆盖前一次的压缩包）
#rm -rf /www/wwwroot/packages/web.tgz

这里根据项目实际情况而定，本项目还多一层dist目录（宝塔站点网站目录配置：设置dist目录为运行目录），具体目录结构前面的背景也有截图出来。

脚本变量 APP_PATH 配置

字符变量名称

bash 复制代码

APP_PATH|APP_NAME|WEB_PATH|WEB_NAME|PROJECT_PATH|PROJECT_NAME

记录主机部署配置过程中的报错问题

构建日志报错信息

/root/logger.sh: line 16: date: command not found

[] [INFO] 执行步骤

/root/exec.sh: line 4: tee: command not found

/root/logger.sh: line 4: date: command not found

[] [ERROR] BUILD ERROR

/root/logger.sh: line 4: date: command not found

[] [ERROR] 282504095

/root/logger.sh: line 4: date: command not found

[] [ERROR] 步骤运行失败，返回码： 141

/root/entry.sh: line 180: which: command not found

解决方案：字符变量起名带一个前缀

运行流水线

流水线已全部配置完毕，还需要测试一下脚本执行的有没有问题。

因为脚本里面有rm删除目录操作，注意看前面的文件路径参数有没有写错，记得做好备份

运行备注随便写，比如：测试自动化部署

点击运行后，会跳转到云效流水线的运行界面

流水线运行成功后，登进宝塔看看文件的最新修改时间，检查有没有成功部署

确定部署成功之后就可以提交代码去触发流水线

如果触发成功，你可以在流水线的运行历史看到

至此自动化部署的流水线全部配置完毕，希望能帮助大家

总结

云效流水线可视化做得真好，我们后端也是用的云效流水线。上一篇：云效流水线自动化部署前端纯静态网站