【CICD】基于 github 的完整流程 - 编程导航 | 一线开发者编程经验和技术实战分享

在之前的内容中，我们分阶段的学习了 CICD 的核心原理以及概念。当然虽然概念非常重要，但是学会如何落地也是非常重要的一件事。因此我们结合我们之前学习的内容，做一个实战训练。

创建应用

因为是实战，我们找个真实的项目来操作一下，一个简单的博客应用就非常好。这里以 hexo 为例。

npm install hexo-cli -g # 全局安装hexo的命令行程序 hexo init blog # 初始化项目 cd blog # 切换到项目目录 yarn install # 安装项目依赖 yarn server # 启动hexo服务

如果顺利的话，我们可以成功看到如下页面：这就是一个非常简单的应用。现在我们做一些事情让他能够自动化起来。

创建仓库

因为我们准备使用的是程序员最广泛使用的 github 作为我们流程管理平台，我们需要在 github 创建一个仓库，创建仓库非常简单，只需要简单的点点点就行。点击 Create repository 就能成功创建一个空仓库了，成功后应当会显示如下：现在我们其实可以直接把我们的项目上传到 github 了，但是在此之前我们还需要做一些事情让我们的自动化能够跑起来。

开始准备持续集成

让我们首先来做一下 CI，在博客场景下，大部分的代码静态检查是不需要的，因此我们使用 prettier 的 markdown 语法美化来模拟一下持续集成场景。

yarn add -D prettier # 使用yarn安装prettier echo {} > .prettierrc.json # 创建一个空对象的配置文件

此时当我们通过yarn去执行prettier的命令行工具时，会出现错误：说明默认生成的markdown文件有一些规则问题，我们可以通过prettier去修复它。

yarn prettier --write ./source

此时我们再运行prettier检查则显示通过，如下图：为了让github action能够识别这段检查代码，我们需要在.github/workflows目录下创建一个yml文件。文件内容如下：

# .github/workflows/cicd.yml name: CICD on: [push] # run this action in every push jobs: check: runs-on: ubuntu-latest steps: - name: Checkout Source Code uses: actions/checkout@v3 - name: Install and Run Check Script run: | yarn install yarn prettier --check ./source

这个文件的作用就是每次提交代码时都会执行check任务。check 任务会在ubuntu系统下依次执行代码检出（checkout），安装依赖以及执行检查脚本。此时，当我们把代码提交的时候，如果通过的话则会在 github 的commit 记录上出现一个绿色的对号。现在让我们提交一下项目，在我们的博客应用的根目录执行以下命令：

git init # 初始化git仓库 git add . # 将当前所有文件提交到暂存区 git commit -m "init blog" # 提交改动 git remote add origin git@github.com:<your username>/hexo-cicd-test.git # 添加远程地址，并起名为origin git push -u origin main # 提交本地改动到远程

如果顺利的话最后会有以下提示信息: 此时我们回到我们创建的项目页，可以看到在我们的提交记录旁边有一个褐色的小圆点，这表示我们的action正在执行中。如果我们的 action 执行成功，这个小圆点就会变成绿色的对号，否则则会变成红色的叉号。成功的表现如下：持续集成的意义在于确保每次的改动对于其他的协作者来说都是健康的，而绿色的对号表示通过了所有我们预先设下的考验。对于一个多人协作项目来说，这意义重大——这代表了其他人有足够的信心能够基于先前的工作继续迭代项目。没有人愿意为自己改动以外的错误负责，而确保每次的提交都能通过持续集成测试则是一个现代工程师所必须具备的基本素养。持续集成检查可以做的有非常多，比如单元测试、UI测试、lint规则、类型验证、覆盖率测试、文件大小测试等等等等你所有能够想到的一切静态的、动态的代码检测。当然，千里之行始于足下，我们目前只是做的最简单的一步。这很简单，但很重要

接入持续交付

正如前文所说，一名合格的研发所需要做的事情是非常多的。当我们代码写完以后还不算完，我们必须将代码部署到环境中，让其他的相关者能够看到成果才算阶段工作的结束。而持续交付(或者说持续部署)则是可以帮助我们自动化完成这一步工作。 github 为所有的开发者提供了免费的github page服务, github page可以免费的托管静态的网页页面。而hexo正好是一个静态的博客系统，因此我们可以选择直接把我们的博客托管在github page服务中。首先我们先看下编译方式:

yarn build

执行命令后会在 public/ 目录下生成静态文件，直接打开public/index.html可以看到我们的博客，我们只需要把他提交的仓库的gh-pages分支即可。当然，既然是CD(持续交付), 那么怎么能让我们自己动手呢？我们可以通过action来帮我们完成这一步。

# .github/workflows/cicd.yml name: CICD on: [push] # run this action in every push permissions: contents: write jobs: check-and-deploy: runs-on: ubuntu-latest steps: - name: Checkout Source Code uses: actions/checkout@v3 - name: Install and Run Check Script run: | yarn install yarn prettier --check ./source - name: Build run: yarn build - name: Deploy uses: JamesIves/github-pages-deploy-action@v4 with: folder: public

我们这里用了一个别人做好的现成的action, 可以直接帮我们把某个目录下的文件推送到当前仓库的gh-pages分支。注意需要给上内容写的权限，这样action才能把内容写入仓库中。 action成功执行完毕以后就可以看到我们的gh-pages分支出现了编译好的内容。然后跳转到设置页面，配置github page的信息来源与分支，保存即可这时我们就可以在项目的右下角看到环境中增加了一个 github-pages 的环境, 点击过去即可跳转到 github 帮我们部署的页面。效果如下: 这时候我们可以看到我们的样式还是有一点小问题的，这是因为我们hexo默认配置的静态资源的资源目录地址是根路径/开始的，如/css/index.css这样的地址。而在这个场景中，我们的资源是从我们的仓库名/hexo-cicd-test 开始的。我们修改一下配置，在 _config.yml 中增加如下内容:

root: /hexo-cicd-test

添加完毕后通过git提交到远程，我们的自动化工具会自动帮助我们完成部署的功能。当我们 action 运行完毕后刷新页面就能看到最新的成果了。

总结

在本节课，我们用一个简单的博客系统真实而简单的学习了综合使用CICD工具并将其用于实战中，在每次提交都会有自动化流程帮我们做重复性工作，增加了生产力与研发效率。在本课程中，我们主要学习了为什么我们需要掌握DevOps的思想，如何用CICD作为DevOps落地的工具，学习了CICD的内核与底层设计，并且通过全球最大的开源社区github提供的CICD工具帮助我们实战演示了一下CICD的使用方式与集成手段。相信通过这几章的学习，读者能够掌握不同的流水线工具的使用，因为不管这些工具是怎么包装的，其底层的内核都是不变的，正所谓一法通万法通不外乎如是。最后感谢各位的陪伴，本课程的内容就此结束了，感谢各位读者的支持与学习。

#项目# #技术# #嘉宾分享#