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

云效流水线部署静态网站

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

背景

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

网上的博客基本都是分享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就可以访问最新效果了

部署脚本配置效果

在这里插入图片描述

主机部署这里也可以配置一个企业微信机器人通知,不过这个项目暂时没这个需求

目前基本信息、流程配置已经配置完了,还剩触发设置、变量和缓存,这个非必要,可以不用管。

至此流水线已全部配置完毕,下一步就是测试


运行流水线

需要测试一下脚本执行的有没有问题。

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

在这里插入图片描述
运行备注随便写,比如:测试自动化部署

到了云效流水线的运行界面,点进去查看日志

在这里插入图片描述
点击Web构建日志,看看“执行命令”这个构建步骤有没有删除.git目录

在这里插入图片描述
脚本执行成功了,去宝塔去看看有没有部署成功

在这里插入图片描述
宝塔也部署成功了,那就没有问题了!

尝试提交代码去触发流水线。如果触发成功,你可以在流水线的运行历史看到

在这里插入图片描述

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

总结

云效流水线做得真的很好,下一篇博客会分享node构建

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/65370.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Android MQTT关于断开连接disconnect报错原因

最近项目遇到一个需求,就是在登录状态的时候。才能接收到消息。所有我在上线,下线状态的时候。做了MQTT断开和连接的动作。然后就是发生了。我们标题的这关键点了。直接报错了。报错的内容如下: MqttAndroidClient unregisterRecevicer afte…

gitlab克隆仓库报错fatal: unable to access ‘仓库地址xxxxxxxx‘

首次克隆仓库,失效了,上网查方法,都说是网络代理的问题,各种清理网络代理后都无效,去问同事: 先前都是直接复制的网页url当做远端url,或者点击按钮‘使用http克隆’ 这次对于我来说有效的远端u…

我的秋招总结

我的秋招总结 个人背景 双非本,985硕,科班 准备情况 以求职为目的学习Java的时间大概一年。 八股,一开始主要是看B站黑马的八股文课程,背JavaGuide和小林coding还有面试鸭。 算法,250,刷了3遍左右 项目&…

VB.NET在 Excel 二次开发中的全面应用

摘要: 本文详细阐述了如何运用VB.NET进行 Excel 的二次开发。首先介绍了开发环境的搭建,包括安装 Visual Studio 及引用 Excel 对象库。接着深入探讨了各种基础操作,如创建 Excel 应用程序对象、打开与操作工作簿、处理工作表与单元格数据等。…

单例模式的写法

单例模式(Singleton Pattern)是一种设计模式,确保一个类只有一个实例,并提供一个全局访问点。常用于管理共享资源(如数据库连接、配置文件、线程池等)。在实际编码中,有多种实现单例模式的方法&…

webpack介绍使用

介绍 因为不确定打出的前端包所访问的后端IP,需要对项目中IP配置文件单独拿出来,方便运维部署的时候对IP做修改。 因此,需要用webpack单独打包指定文件。 CommonsChunkPlugin module.exports {entry: {app: APP_FILE // 入口文件},outpu…

【ES6复习笔记】Class类(15)

介绍 ES6 提供了更接近传统语言的写法,引入了 Class(类)这个概念,作为对象的模板。通过 class 关键字,可以定义类。基本上,ES6 的 class 可以看作只是一个语法糖,它的绝大部分功能,…

找到一个linux静态库动态库的好资料.2

# 正文 继续整理从这个页面学到的东西:https://tldp.org/HOWTO/Program-Library-HOWTO 这一篇主要参考这俩: https://tldp.org/HOWTO/Program-Library-HOWTO/introduction.html https://tldp.org/HOWTO/Program-Library-HOWTO/static-libraries.html 这…

uniapp实现为微信小程序扫一扫的功能

引言 随着微信小程序的快速发展,越来越多的开发者开始关注和学习微信小程序的开发。其中,微信小程序的扫一扫功能是非常常用且实用的功能之一。通过扫描二维码,用户可以获取到相关的信息或者实现特定的功能。 正文 在过去,开发者需要使用微信开发者工具以及相关的开发文档…

中科岩创边坡自动化监测解决方案

行业现状 由于边坡不稳定性因素,可能会造成斜坡上的岩土体沿着某个面不均匀向下向外滑动,形成滑坡;陡峭山坡上岩土体在重力作用下,发生陡然倾落运动,造成崩塌;在沟谷或山坡上产生的夹带大量泥沙、石块等固体…

uniapp使用live-pusher实现模拟人脸识别效果

需求: 1、前端实现模拟用户人脸识别,识别成功后抓取视频流或认证的一张静态图给服务端。 2、服务端调用第三方活体认证接口,验证前端传递的人脸是否存在,把认证结果反馈给前端。 3、前端根据服务端返回的状态,显示在…

Docker【初识Docker】

目录 为什么会出现Docker这门技术喃? 应用开发和部署的困境 容器技术的先兆 Docker 的出现:简化容器化 Docker 技术的关键创新: Docker 的广泛应用和变革 什么是 Docker? Docker的历史 早期背景:容器化和虚拟化…

探寻 OneCode 核心优势:MVVM 进阶与前后端协同之魅

在当今的软件开发领域,高效、可维护且功能强大的架构是开发者们不懈追求的目标。OneCode 凭借其独特的增强版 MVVM 架构、前后端一体化特性,以及创新的技术如 OneCode DSM(Domain-Specific Modeling,领域特定建模)、视…

FFmpeg来从HTTP拉取流并实时推流到RTMP服务器

当使用FFmpeg来从HTTP拉取流并实时推流到RTMP服务器时,你可以使用以下命令: ffmpeg -i http://输入流地址 -c:v copy -c:a copy -f flv rtmp://RTMP服务器地址/应用名称/流名称 这是一个基本的命令示例,其中: - -i http://输入流地…

骑砍2霸主MOD开发(26)-Mono脚本系统

一.游戏启动流程 <1.启动器Launcher 运行TaleWorlds.MountAndBlade.Launcher.exe启动C#程序Program,完成MOD列表页面的加载. public class Program {public static void Main(string[] args){#加载启动器GUI界面ResourceDepot resourceDepot = new ResourceDepot();resourc…

网络安全检测

实验目的与要求 (1) 帮助学生掌握木马和入侵的防护和检测方法、提高学习能力、应用能力和解决实际问题的能力。 (2) 要求学生掌握方法, 学会应用软件的安装和使用方法, 并能将应用结果展示出来。 实验原理与内容 入侵检测是通过对计算机网络或计算机系统中若干关键点收集信…

24.12.27 SpringMVCDay02

enctype必须是 multipart/form-data <form action"/mvc/book/doUpload1" method"post" enctype"multipart/form-data"><p><input type"file" name"img_url"></p><p><input type"subm…

Maven核心概念总结

Maven 介绍 Maven 官方文档是这样介绍的 Maven 的&#xff1a; Apache Maven is a software project management and comprehension tool. Based on the concept of a project object model (POM), Maven can manage a projects build, reporting and documentation from a ce…

Unity 读Excel,读取xlsx文件解决方案

Unity读取表格数据 效果&#xff1a; 思路&#xff1a; Unity可以解析Json&#xff0c;但是读取Excel需要插件的帮助&#xff0c;那就把这个功能分离开&#xff0c;读表插件就只管读表转Json&#xff0c;Unity就只管Json解析&#xff0c;中间需要一个存储空间&#xff0c;使用…

PyQt + OpenCV综合训练

一、PyQt OpenCV 图像处理应用设计 创建一个 PyQt 应用程序&#xff0c;该应用程序能够&#xff1a; ①使用 OpenCV 加载一张图像。 ②在 PyQt 的窗口中显示这张图像。 ③提供四个按钮&#xff08;QPushButton&#xff09;&#xff1a; - 一个用于将图像转换为灰度图 - …