这几日阴云终于散去，开始转晴。只是已进入了冬天，温度低的我的手脚经常冰冷。在经过不短时间的尝试之后，我成功用coding开启了我的主页自动化构建。这里附上flutter web构建成果： my.guuguo.top

前言

回忆起大学的时候，我就很想搞个自己的个人网站，想的是最好啥钱都不用付。当时没弄成，还是买了学生优惠的阿里云做服务器。但是如果那时候我看过 Flutter 零成本搭建个人小博客的话。那不要钱并且有后端的网站弄起来就很轻松了。(不只是flutter可以用) 加上这篇文章的话，服务器都不用，连自动化构建都弄起来了。

动手要求：

个人的网站是静态网站，数据请求是跨域请求资源（比如用免费的leancloud作为云后端）
有可以编译出静态网站的代码（flutter web，react，vue都行）
然后就没有要求了

本文主要内容为以下4个要点

使用coding免费持续集成自动编译flutter web 产物
使用 coding 脚本自动更新构建产物到腾讯 cos 对象存储（cos做网页不用钱，因为存储空间小，我都没付过钱）
利用腾讯的对象存储托管静态网站，免费有了自己的主页，并可配置在更新的时候刷新cdn
部署完成后使用飞书机器人发送构建部署结果

名词解释

docker：容器化技术，在本文中我们利用coding的持续集成，在coding免费的服务器资源下，使用 flutter 环境镜像的 docker容器构建出flutter web 产物。
coding：一站式软件研发管理平台。本文用到的是她的代码托管和持续及集成功能。
CI/CD**：**持续集成和持续部署，持续集成（CI）可以帮助开发人员更加频繁地（有时甚至每天）将代码更改合并到共享分支或"主干"中。一旦开发人员对应用所做的更改被合并，系统就会通过自动构建应用并运行不同级别的自动化测试（通常是单元测试和集成测试）来验证这些更改，确保这些更改没有对应用造成破坏。这意味着测试内容涵盖了从类和函数到构成整个应用的不同模块。如果自动化测试发现新代码和现有代码之间存在冲突，CI 可以更加轻松地快速修复这些错误。

一，coding 自动化构建配置

1.1 开启持续集成功能

基础操作，在coding中注册，登陆，创建项目一气呵成。然后就能在左下角看到有个项目设置进入设置页面后，就能找到对应开关。路径：项目与成员->功能开关->持续集成，如图所示。

1.2 配置持续集成

持续集成的自动化流程简单来说就是如下四部：

检出代码，获取到选定分支的开发源码
在flutter镜像的 docker 容器中构建flutter web
上传到腾讯云 COS 对象存储
发送对应消息到飞书机器人展开来说步骤如下。先点击创建构建计划，进入下图页面

因为 coding自带的构建模板中没有flutter构建方案。所以点击右上角的自定义构建过程开始自定义。

代码仓库选择coding。
配置来源选择使用静态配置的 Jenkinsfile。
然后确认

1.3 使用docker镜像构建项目

进入配置，就能看到预置的几个流程。已经默认包含了代码检出流程。这一块不用动自定义构建过程以构建flutter 为例，改名为构建flutter 点击阶段节点，会出现设置弹窗。更改构建环境为自定义，并使用docker。 Docker 针对自己的构建环境可以去docker hub 搜索。我就去搜索了对应版本的 flutter docker镜像。

当然如果是nodejs 或者其他环境找对应的环境镜像就行了。

1.4 上传构建产物到 cos 部署静态网页

先新增一个阶段节点，命名为上传到腾讯cos。然后点击加号，找到并添加命令->变更子目录步骤。将命令行的当前目录改变到构建产物的子目录。对于 flutter web ，产物则是在 build/web 目录下。 接下来就是执行shell命令。 针对上传到cos 使用默认环境自带的coscmd命令。

sh "coscmd config -a ${env.COS_SECRET_ID} -s ${env.COS_SECRET_KEY}"+" -b ${env.COS_BUCKET_NAME} -r ${env.COS_BUCKET_REGION}"
sh 'coscmd upload -rs ./ /'

这样就完成了构建产物文件夹的上传工作。值得注意的是: 诸如 env.COS_SECRET_ID 是配置的环境变量，从腾讯云cos控制台中获得。环境变量在右上角可以找到配置入口，如图所示：

1.5 发送打包结果到飞书群

在飞书群里，创建群机器人，然后到配置页面获取对应的token 只需要在流程中执行get请求，就能发送对应文本到飞书群了。使用curl命令请求，代码如下

sh 'curl -X POST -H "Content-Type: application/json" -d \'{"msg_type":"text","content":{"text":"网页部署成功，地址是 http://my.guuguo.top/"}}\' https://open.feishu.cn/open-apis/bot/v2/hook/{token}'

1.6 最终的 jenkinsfile 配置文本

在用图形方式配置完流程后，可以看到对应的 jenkinsfile 文本。构建flutter web 的完整配置文本如下

pipeline {
  agent any
  stages {
    stage('检出') {
      steps {
        checkout([
          $class: 'GitSCM',
          branches: [[name: env.GIT_BUILD_REF]],
          userRemoteConfigs: [[
            url: env.GIT_REPO_URL,
            credentialsId: env.CREDENTIALS_ID
          ]]])
        }
      }
      stage('构建flutter') {
        agent {
          docker {
            image 'cirrusci/flutter:2.8.1'
            reuseNode 'true'
            registryUrl ''
          }
        }
        steps {
          sh 'flutter build web --web-renderer canvaskit --no-sound-null-safety --release  --dart-define=FLUTTER_WEB_CANVASKIT_URL=https://unpkg.zhimg.com/canvaskit-wasm@0.30.0/bin/'
        }
      }
      stage('上传到腾讯云 COS 对象存储') {
        steps {
          dir('build/web') {
            sh "coscmd config -a ${env.COS_SECRET_ID} -s ${env.COS_SECRET_KEY}"+" -b ${env.COS_BUCKET_NAME} -r ${env.COS_BUCKET_REGION}"
            sh 'coscmd upload -rs ./ /'
            sh 'curl -X POST -H "Content-Type: application/json" -d \'{"msg_type":"text","content":{"text":"网页部署成功，地址是 http://my.guuguo.top/"}}\' https://open.feishu.cn/open-apis/bot/v2/hook/{token}'
          }

        }
      }
    }
  }

二，COS，配置自动更新dns缓存(推送更新后刷新网页缓存)

简单说明步骤

进入cos控制台
找到存储桶，进入存储桶
找到存储桶功能目录里面的函数计算类别然后点击 CDN缓存刷新函数
事件类型选择 全部创建 和全部删除 类型，范围选择 所有存储桶。这样所有的创建和删除操作就都会触发该函数。之后再进行全量推送静态网站资源文件，在访问对应域名的时候就会自动刷新了。 自动化构建到自动化部署一键完成。爽歪歪。

三，细枝末节

自动触发: 可以对自动化构建的持续集成做一个代码分支推送触发,不用手动操作了。域名配置: 可以对cos配置自己的域名，完成对该域名绑定cos静态网页，并做好cdn加速。

end

勉勉强强完成了我的免费博客的简易自动化。脑子愚笨，过程不易。完成后又是一阵索然无味。好久好久没有更新博客，也好久好久没有打自己的代码。我真是一个好吃懒做的咸鱼。

【小试牛刀 】传个代码，就能免费构建部署网页！有Coding持续集成，还买啥服务器

前言