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

news2025/1/4 19:21:13

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

- 背景
- 新建流水线
- 配置流水线
- 运行流水线
- 总结

背景

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

在这里插入图片描述
而且宝塔会经常要求重新登录，麻烦的很

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

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

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

具体怎么解决请看配置流水线的 Node.js 构建或者前往阿里云开发者社区查看我的回答

新建流水线

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

在这里插入图片描述

配置流水线

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

第一步，修改基本信息。

在这里插入图片描述
本项目要部署的是测试环境，所以选了日常环境

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

在这里插入图片描述

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

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

第三步，Node.js 构建

重要步骤

先看整体的构建步骤

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

Node.js 构建
在这里插入图片描述
node的版本根据实际需要去选，vscode终端输入node --version查看项目依赖的node版本，但其实云效给出的版本也够用了。

构建命令（npm版本）

cnpm install
npm run build:test

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

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

#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版本-不配置代理）

#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）

构建物上传

在这里插入图片描述
构建物上传很简单，只要设置一下为打包路径

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

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

第四步，主机部署

重要步骤

先看主机部署整体配置

在这里插入图片描述

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

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

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

在这里插入图片描述
下载路径

/www/wwwroot/packages/web.tgz

执行用户

root

部署脚本

# 删除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 配置
在这里插入图片描述
字符变量名称

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

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