当前位置：首页 > news >正文

云效流水线自动化部署前端纯静态web网站

news 2025/2/5 18:42:54

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

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

背景

配置流水线以前，每次更新导航网站都要登进去宝塔后台，删掉旧的目录和文件，再上传最新的文件，太麻烦啦

网上的博客基本都是分享vue项目，这一篇是分享的是部署纯静态网站

需要部署的文件是整个代码仓库的文件，文件如下：

云效仓库
因为是公司内部用的导航网站，所以并没有做css文件压缩、js文件压缩处理

新建流水线

进入到云效后台，选择新建流水线
在这里插入图片描述
根据上图选好模板后，可以点击创建，下一步配置流水线

配置流水线

第一步，添加流水线源。主要配置代码仓库、触发条件

在这里插入图片描述
其它没截图的都是按照默认去配置

第二步，修改基本信息。

在这里插入图片描述
这个很简单

第三步，删除测试步骤。项目不需要做测试和代码检查，就是普通的web项目

在这里插入图片描述

第四步，Web 构建。

这个很重要

按理说静态网站是不需要跑什么npm run build命令去构建的。云效直接压缩，部署的时候再解压。但是构建产物的时候执行得是克隆命令，克隆仓库会带上一个.git目录，这个目录是不需要上传到宝塔的

Web 构建整体配置如下

在这里插入图片描述
执行命令配置效果

在这里插入图片描述
执行命令的命令脚本

echo cissy remove start
#前面下载流水线源应该是纯克隆，导致宝塔多了一个.git目录
rm -r .git
echo cissy remove end

构建物上传配置效果

在这里插入图片描述

为什么这样配置？

删除“Node.js 构建”这个默认步骤是因为项目不需要npm run build
新增"执行命令"这个步骤是为了要用脚本去删除那个没有用的.git目录

Web 构建已配置完成，其它没截图的都是按照默认去配置

第五步，主机部署。

这个也很重要，也是最后一步

主机部署整体配置如下

在这里插入图片描述
制品直接选择默认制品

配置主机组暂时没有教程

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

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

/www/wwwroot/packages/nav.tgz

配置部署脚本，这个步骤非常非常重要

部署脚本（纯享版）

rm -rf /www/wwwroot/abc.xxxx.com.cn/*
tar zxvf /www/wwwroot/packages/nav.tgz -C /www/wwwroot/abc.xxxx.com.cn

部署脚本（注释版）

# 1.配置主机组（问后端）
# 2.设置下载路径，宝塔新增了目录专门放压缩包，比如/www/wwwroot/packages/nav.tgz
# 3.设置执行用户，应该都是root吧
# 4.删除/www/wwwroot/abc.xxxx.com.cn/下的所有文件
rm -rf /www/wwwroot/abc.xxxx.com.cn/*
# 5.把构建物解压到/www/wwwroot/abc.xxxx.com.cn/目录下
tar zxvf /www/wwwroot/packages/nav.tgz -C /www/wwwroot/abc.xxxx.com.cn
# 6.浏览器输入http://abc.xxxx.com.cn就可以访问最新效果了

部署脚本配置效果

在这里插入图片描述