云效流水线使用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删除目录操作,注意看前面的文件路径参数有没有写错,记得做好备份

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

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

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

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

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

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

总结

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

相关推荐
程序员拂雨15 分钟前
Angular 知识框架
前端·javascript·angular.js
GoodStudyAndDayDayUp1 小时前
gitlab+portainer 实现Ruoyi Vue前端CI/CD
前端·vue.js·gitlab
程序员阿明1 小时前
vite运行只能访问localhost解决办法
前端·vue
前端 贾公子1 小时前
uniapp -- 验证码倒计时按钮组件
前端·vue.js·uni-app
淡笑沐白1 小时前
AJAX技术全解析:从基础到最佳实践
前端·ajax
Hi202402171 小时前
如何通过partclone克隆Ubuntu 22系统
运维·服务器·ubuntu
龙正哲1 小时前
如何在Firefox火狐浏览器里-安装梦精灵AI提示词管理工具
前端·firefox
徐徐同学2 小时前
轻量级Web画板Paint Board如何本地部署与随时随地在线绘画分享
前端
LuckyLay2 小时前
Vue百日学习计划Day4-8——Gemini版
前端·vue.js·学习
八戒社2 小时前
WooCommerce短代码Shortcodes使用方法
前端·wordpress·woocommerce