《小团队web技术搭建》(七)自动化部署方式(CI/CD)(二)

简介: 《小团队web技术搭建》(七)自动化部署方式(CI/CD)(二)
欢迎关注系列专栏《小团队web技术搭建》


《小团队web技术搭建》(一)环境和工具的准备-第一部分

《小团队web技术搭建》(二)环境和工具的准备-第二部分

《小团队web技术搭建》(三)环境和工具的准备-第三部分

《小团队web技术搭建》(四)虚拟机的安装使用

《小团队web技术搭建》(五)项目的简单部署方式

《小团队web技术搭建》(六)自动化部署方式(CI/CD)(一)

《小团队web技术搭建》(七)自动化部署方式(CI/CD)(二)

持续更新中...

上一篇文章我们讨论和试验了CI/CD流程,相信各位已对它有一个大体的了解,但其安装和配置都比较繁琐,市面上有一类平台提供傻瓜式的CI/CD服务,通过简单、人性化的操作界面,就能新建并运行起一个流水线,比如Github ActionGitee CICD流水线Teambition Flow(飞流)等等,所以自动化部署你可以考虑使用这一类平台。

使用这类平台还有一个好处,你的构建任务所消耗的服务器资源是“白嫖”的。

平台局限性

值得注意的是,这类平台存在一定局限性,会优先支持或者只支持自家产品线上的代码源或者服务器,比如说gitee流水线的代码源只支持gitee库,飞流只支持绑定阿里云主机或者自有主机(teambition属于阿里旗下);并且构建环境版本可能不够全,比如飞流的Node版本目前(截至交稿时间)最高12.2。

image.png

也就是说如果你要选择这类服务,你最好在特定平台下的代码源或服务器要选择该厂商下的CI/CD平台,并且是否能接受构建工具/语言的版本限制(当然,版本不够用的情况,你也可选择直接在服务器构建来绕开这个局限性)。

下面我们以Flow飞流为例(部署目标服务器需是阿里云提供),实验一下它的大体配置运行流程。

新建流水线

飞流是teambition产品生态下的其中一员,所以如果你的团队用的协作工具、git托管用的是它的产品,那用飞流是比较合适的。

这里我们还是用之前写的托管在github上一个简单前端demo进行测试,它的运行结果是一个Hello world网页,当然因为网络问题(有时候会遇到),我不建议你使用github进行此次试验,你可以使用gitee里的仓库进行试验。

image.png

现在我们开始,点击飞流首页中的新建流水线

image.png

根据部署项目的类型,按实际情况选择模板(不用担心,选错了可以删除重来,或者新建流水线后手动调整,你甚至可以选择一个空模板),这里我们以部署一个Nodejs项目为例,所以选了这个模板,然后点击创建:
image.png

配置流水线

绑定代码源

填写一个你流水线名称(一般是填写项目名称),然后绑定一个代码源,这里我们绑定刚才说的前端demo仓库,首次绑定仓库你可以需要账号授权(如github账号授权):

image.png

测试流程

这里配置你的测试流程,如果没有的话,你甚至可以把整个测试流程删掉,但是不建议去掉单元测试、代码风格等校验。

image.png

构建

然后来到构建这一栏,点击Node.js构建,我们按此项目的实际构建情况,配置构建脚本:

image.png
我们来解释下这段脚本:

# 进入要部署的项目目录,因为此仓库我们要部署的项目在`demo/cicd-demo`
cd demo/cicd-demo

# 安装Node.js依赖 当然这个demo不需要任何依赖,所以你可以省略
# npm install

# 构建
npm run build

在打包路径这里,按照本项目的情况填写:

./demo/cicd-demo/dist

image.png

部署

来到部署一栏,我们需要把飞流的构建产物放到我们的部署服务器,也就是真正运行这个项目的服务器。

如果你在主机组还没有服务器,你可以新建绑定一个,前提是它要是一个阿里云服务器或自有服务器:
image.png

绑定一个阿里云服务器,按进行授权:

image.png
这里必须要勾选阿里云颁发的唯一用户标志符,否则授权无效:
image.png

image.png

在阿里云控制台的服务器信息确认主机地区,名称等:
image.png

确认授权完成后回到刚才绑定主机的地方,按地区筛选出主机,然后绑定:

image.png

image.png

配置部署脚本,在上一篇文章我们已经为这个项目配置了nginx,并且解析到/www/projects/demo/demo2目录,所以这里的下载路径我们填写/www/projects/demo/demo2/package.tgz,也就是打包到服务器的构建物目录和包名:

image.png
构建脚本就是做了该文件解压到部署目录:

tar zxvf /www/projects/demo/demo2/package.tgz -C /www/projects/demo/demo2/

运行流水线

点击保存并运行,或者保存后退出流水线再运行,等待运行成功。

image.png

image.png

在这过程中如果报错了,你可以查看日志再次编辑流水线进行调整,或者你想了解它的工作过程也可以点击日志查看:

image.png

运行成功后,我们到服务器查看文件已经上传并解压完毕:

image.png

接下来我们查看部署地址http://47.96.177.197:8990/:

image.png

部署已完成,下次有代码更新时点击下运行项目对应的流水线即可,你可以按提示配置代码提交触发流水线,这种一般在测试环境可以用,生产环境慎用。

感谢阅读!欢迎关注系列专栏《小团队web技术搭建》
相关文章
|
2月前
|
Web App开发 IDE JavaScript
Selenium IDE:Web自动化测试的得力助手
Selenium IDE:Web自动化测试的利器。作为开源工具,Selenium IDE支持录制与回放用户操作,适用于Chrome、Firefox等多浏览器,简化了测试流程,提升了效率,降低了自动化测试的门槛。它还支持导出多种编程语言的脚本,便于测试集成与复用。
148 31
Selenium IDE:Web自动化测试的得力助手
|
1月前
|
Kubernetes Java 持续交付
小团队 CI/CD 实践:无需运维,Java Web应用的自动化部署
本文介绍如何使用GitHub Actions和阿里云Kubernetes(ACK)实现Java Web应用的自动化部署。通过CI/CD流程,开发人员无需手动处理复杂的运维任务,从而提高效率并减少错误。文中详细讲解了Docker与Kubernetes的概念,并演示了从创建Kubernetes集群、配置容器镜像服务到设置GitHub仓库Secrets及编写GitHub Actions工作流的具体步骤。最终实现了代码提交后自动构建、推送镜像并部署到Kubernetes集群的功能。整个过程不仅简化了部署流程,还确保了应用在不同环境中的稳定运行。
75 9
|
2月前
|
Web App开发 IDE 测试技术
Selenium:强大的 Web 自动化测试工具
Selenium 是一款强大的 Web 自动化测试工具,包括 Selenium IDE、WebDriver 和 Grid 三大组件,支持多种编程语言和跨平台操作。它能有效提高测试效率,解决跨浏览器兼容性问题,进行性能测试和数据驱动测试,尽管存在学习曲线较陡、不稳定等缺点,但其优势明显,是自动化测试领域的首选工具。
266 17
Selenium:强大的 Web 自动化测试工具
|
3月前
|
人工智能 安全 物联网
区块链技术的未来展望:去中心化金融(DeFi)与Web 3.0的融合
区块链技术的未来展望:去中心化金融(DeFi)与Web 3.0的融合
|
3月前
|
前端开发 JavaScript 搜索推荐
HTML与CSS在Web组件化中的核心作用及前端技术趋势
本文探讨了HTML与CSS在Web组件化中的核心作用及前端技术趋势。从结构定义、语义化到样式封装与布局控制,两者不仅提升了代码复用率和可维护性,还通过响应式设计、动态样式等技术增强了用户体验。面对兼容性、代码复杂度等挑战,文章提出了相应的解决策略,强调了持续创新的重要性,旨在构建高效、灵活的Web应用。
68 6
|
3月前
|
XML 前端开发 JavaScript
PHP与Ajax在Web开发中的交互技术。PHP作为服务器端脚本语言,处理数据和业务逻辑
本文深入探讨了PHP与Ajax在Web开发中的交互技术。PHP作为服务器端脚本语言,处理数据和业务逻辑;Ajax则通过异步请求实现页面无刷新更新。文中详细介绍了两者的工作原理、数据传输格式选择、具体实现方法及实际应用案例,如实时数据更新、表单验证与提交、动态加载内容等。同时,针对跨域问题、数据安全与性能优化提出了建议。总结指出,PHP与Ajax的结合能显著提升Web应用的效率和用户体验。
84 3
|
3月前
|
SQL 负载均衡 安全
安全至上:Web应用防火墙技术深度剖析与实战
【10月更文挑战第29天】在数字化时代,Web应用防火墙(WAF)成为保护Web应用免受攻击的关键技术。本文深入解析WAF的工作原理和核心组件,如Envoy和Coraza,并提供实战指南,涵盖动态加载规则、集成威胁情报、高可用性配置等内容,帮助开发者和安全专家构建更安全的Web环境。
113 1
|
3月前
|
缓存 安全 前端开发
构建高效Web应用的五大关键技术
【10月更文挑战第42天】在数字化浪潮中,Web应用已成为企业与用户互动的重要桥梁。本文将深入探讨提升Web应用性能和用户体验的五项核心技术,包括前端优化、后端架构设计、数据库管理、安全性增强以及API开发的最佳实践。通过这些技术的应用,开发者可以构建出更快、更稳定且更安全的Web应用,满足现代网络环境的需求。
|
3月前
|
Web App开发 测试技术 数据安全/隐私保护
自动化测试的魔法:使用Python进行Web应用测试
【10月更文挑战第32天】本文将带你走进自动化测试的世界,通过Python和Selenium库的力量,展示如何轻松对Web应用进行自动化测试。我们将一起探索编写简单而强大的测试脚本的秘诀,并理解如何利用这些脚本来确保我们的软件质量。无论你是测试新手还是希望提升自动化测试技能的开发者,这篇文章都将为你打开一扇门,让你看到自动化测试不仅可行,而且充满乐趣。
|
4月前
|
XML JSON API
ServiceStack:不仅仅是一个高性能Web API和微服务框架,更是一站式解决方案——深入解析其多协议支持及简便开发流程,带您体验前所未有的.NET开发效率革命
【10月更文挑战第9天】ServiceStack 是一个高性能的 Web API 和微服务框架,支持 JSON、XML、CSV 等多种数据格式。它简化了 .NET 应用的开发流程,提供了直观的 RESTful 服务构建方式。ServiceStack 支持高并发请求和复杂业务逻辑,安装简单,通过 NuGet 包管理器即可快速集成。示例代码展示了如何创建一个返回当前日期的简单服务,包括定义请求和响应 DTO、实现服务逻辑、配置路由和宿主。ServiceStack 还支持 WebSocket、SignalR 等实时通信协议,具备自动验证、自动过滤器等丰富功能,适合快速搭建高性能、可扩展的服务端应用。
268 3

热门文章

最新文章