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

岛民小强
5,654 阅读5分钟

本文正在参加「金石计划 . 瓜分6万现金大奖」

欢迎关注系列专栏：《小团队web技术搭建》

《小团队web技术搭建》（一）环境和工具的准备-第一部分
《小团队web技术搭建》（二）环境和工具的准备-第二部分
《小团队web技术搭建》（三）环境和工具的准备-第三部分
《小团队web技术搭建》（四）虚拟机的安装使用
《小团队web技术搭建》（五）项目的简单部署方式
《小团队web技术搭建》（六）自动化部署方式（CI/CD）（一）
《小团队web技术搭建》（七）自动化部署方式（CI/CD）（二）
持续更新中...

上一篇文章我们讨论和试验了CI/CD流程，相信各位已对它有一个大体的了解，但其安装和配置都比较繁琐，市面上有一类平台提供傻瓜式的CI/CD服务，通过简单、人性化的操作界面，就能新建并运行起一个流水线，比如Github Action、Gitee 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技术搭建》

avatar
文章
阅读
粉丝