《小团队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技术搭建》
相关文章
|
1天前
|
前端开发 Java Go
从前端到后端:构建现代化Web应用的技术实践
本文将介绍如何通过前端和后端技术相结合,构建现代化Web应用的技术实践。我们将探讨前端开发、后端架构以及多种编程语言(如Java、Python、C、PHP、Go)在构建高效、可扩展的Web应用中的应用。
|
1天前
|
JavaScript Java 测试技术
《手把手教你》系列技巧篇(四十六)-java+ selenium自动化测试-web页面定位toast-下篇(详解教程)
【5月更文挑战第10天】本文介绍了使用Java和Selenium进行Web自动化测试的实践,以安居客网站为例。最后,提到了在浏览器开发者工具中调试和观察页面元素的方法。
11 2
|
1天前
|
存储 JSON JavaScript
Web存储与传输:技术的背后
Web存储与传输:技术的背后
|
2天前
|
Web App开发 JavaScript 测试技术
《手把手教你》系列技巧篇(四十五)-java+ selenium自动化测试-web页面定位toast-上篇(详解教程)
【5月更文挑战第9天】本文介绍了在Appium中处理App自动化测试中遇到的Toast元素定位的方法。Toast在Web UI测试中也常见,通常作为轻量级反馈短暂显示。文章提供了两种定位Toast元素的技巧.
10 0
|
3天前
|
运维 监控 Kubernetes
构建高效自动化运维体系:基于容器技术的持续集成与持续部署(CI/CD)实践
【5月更文挑战第15天】 随着云计算和微服务架构的普及,传统的IT运维模式面临转型压力。为提高软件交付效率并降低运维成本,本文探讨了利用容器技术实现自动化运维的有效策略。重点分析了在持续集成(CI)和持续部署(CD)流程中,容器如何发挥作用,以及它们如何帮助组织实现敏捷性和弹性。通过具体案例研究,文章展示了容器化技术在自动化测试、部署及扩展中的应用,并讨论了其对系统稳定性和安全性的影响。
|
3天前
|
运维 监控 安全
构建高效自动化运维系统:基于容器技术的持续集成与持续部署(CI/CD)实践
【5月更文挑战第14天】 随着DevOps文化的深入人心,持续集成与持续部署(CI/CD)已成为现代软件工程不可或缺的组成部分。本文将探讨如何利用容器技术,尤其是Docker和Kubernetes,构建一个高效、可扩展的自动化运维系统。通过深入分析CI/CD流程的关键组件,我们将讨论如何整合这些组件以实现代码从提交到生产环境的快速、无缝过渡。文章还将涉及监控、日志管理以及安全性策略等运维考量,为读者提供一个全面的自动化运维解决方案蓝图。
|
3天前
|
存储 人工智能 测试技术
python自动化测试实战 —— CSDN的Web页面自动化测试
python自动化测试实战 —— CSDN的Web页面自动化测试
194 0
|
3天前
|
存储 安全 数据安全/隐私保护
Web应用程序的会话管理是一种跟踪和识别特定用户与Web服务器之间交互的技术
【5月更文挑战第12天】Python Web开发中,会话管理用于跟踪用户与服务器交互,如Flask框架提供的内置功能。以下是一个简单示例:安装Flask后,设置应用密钥,通过session读写用户状态。例如,创建一个显示和设置用户名称的Web应用,用户提交的名字将保存在会话中。在生产环境中,应安全存储密钥,如使用环境变量。扩展会话管理可借助第三方库实现更多功能,但可能需更多配置。
214 2
|
3天前
|
前端开发 搜索推荐 安全
AJAX和CSR(客户端渲染)是Web开发中常用的两种技术
【5月更文挑战第8天】AJAX提升用户体验,减轻服务器压力,但对搜索引擎不友好且增加开发复杂度,易引发安全问题。CSR提供快速响应和交互性,改善用户体验,但首屏加载慢,搜索引擎支持不足,同样面临安全挑战。两者各有适用场景,需按项目需求选择。
15 0
|
1天前
|
数据安全/隐私保护
那些酷炫的网页你也可以做到——第六篇,小型公司web开发
那些酷炫的网页你也可以做到——第六篇,小型公司web开发