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

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

背景

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

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

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

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

具体怎么解决请看配置流水线的 [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 [email protected] -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 [email protected] -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删除目录操作,注意看前面的文件路径参数有没有写错,记得做好备份

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

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

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

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

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

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

总结

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

相关推荐
爱泡脚的鸡腿3 分钟前
HTML CSS 第二次笔记
前端·css
灯火不休ᝰ18 分钟前
前端处理pdf文件流,展示pdf
前端·pdf
智践行20 分钟前
Trae开发实战之转盘小程序
前端·trae
最新资讯动态26 分钟前
DialogHub上线OpenHarmony开源社区,高效开发鸿蒙应用弹窗
前端
lvbb6636 分钟前
框架修改思路
前端·javascript·vue.js
树上有只程序猿38 分钟前
Java程序员需要掌握的技术
前端
从零开始学安卓41 分钟前
Kotlin(三) 协程
前端
阿镇吃橙子44 分钟前
一些手写及业务场景处理问题汇总
前端·算法·面试
庸俗今天不摸鱼1 小时前
【万字总结】前端全方位性能优化指南(九)——FSP(First Screen Paint)像素级分析、RUM+合成监控、Lighthouse CI
前端·性能优化