GitHub Actions + 腾讯云COS + SCF云函数 + 自动刷新CDN 完美自动化部署静态网站

前言

作为强迫症患者,一直对自动化部署非常痴迷,个人认为全自动部署最重要的就是稳定可靠,经过研究测试,最终使用GitHub和腾讯云两大平台,成功完成了全自动部署网站的实践.

文章略长,但完成整个部署仅需不到半小时.

本文为 Stille 原创文章.经实践,测试,整理发布.如需转载请联系作者获得授权,并注明转载地址.

方案简介

业务需求

博主有一个简单的纯静态文档站点 docs.ioiox.com,使用的的是 docsify 项目的Markdown渲染程序.平时通过本地VSCode编辑文档,并提交到Github,早前是直接使用GitHub Pages绑定域名来访问,但由于网络问题,体验并不好.

寻求方案

腾讯云COS对象存储服务能够提供静态网页服务,并可以配置CDN域名进行访问,那么就需要解决以下两个问题:

  • 如何使GitHub自动同步文件到腾讯云COS
  • 腾讯云COS对应的CDN如何自动刷新

解决方案

  • GitHub Action – 配置每次Push代码后自动上传到COS
  • 腾讯云 SCF云函数 – 检测到COS内文件变动后自动刷新对应的CDN链接

方案流程图

GitHub Actions + 腾讯云COS + SCF云函数 + 自动刷新CDN 完美自动化部署静态网站


第一阶段 – GitHub Actions

3300901121
2019年11月,GitHub 正式开放了 GitHub Actions 这个功能,不再需要申请就能自由使用,公共仓库完全免费,个人私有仓库目前是按照 workflow 的使用时长来收费,每月 2000 分钟的免费额度也基本够用了.

获取腾讯云API密钥

登录腾讯云控制面板 – 访问控制 – 访问密钥 – API密钥管理
新建密钥
3108579086

此密钥拥有所有权限,为保证安全,也可以添加子用户,配置COS,CDN对应的权限,如需要帮助可给我留言.

配置腾讯云COS

登录腾讯云控制面板 – 对象存储 – 存储桶列表
创建存储桶
选择适合你的区域,设置权限为 公有读私有写.
3213199807
4027693112
获取存储桶相关信息
3451376313

配置GitHub Actions

GitHub仓库 – Settings – Secrets
添加 SecretIdSecretKey分别为刚才获取的腾讯云API密钥
2943382166
GitHub仓库 – Actions
默认会有很多推荐的workflows,这里选择 Set up a workflow yourself自己来配置.
3478888109
系统会创建一个workflow的yml配置文件,删除预设代码,复制以下样本代码.
图上标红两处需修改为刚才创建存储桶获取的名称和区域
然后右上角提交即可
2845040983
yml配置文件样本

测试GitHub Actions

提交yml后系统检测到main.yml的push,便会开始运行这个workflow,根据yml配置文件,可以看出整个工作流简单理解为安装了腾讯云的coscmd工具,并根据配置的 SecretId SecretKey BUCKET REGION上传整个仓库到腾讯云COS,同时忽略掉.git文件夹.其中 upload -rfs命令会使用md5比对存储桶中已存在的文件,相同文件将会跳过上传.当本地即仓库中文件删除时 --delete参数将同步删除存储桶中对应的文件,保持完全同步.
1010470230
3347411549


第二阶段 – 腾讯云 SCF云函数

2030953084

配置腾讯云CDN域名

登录腾讯云控制面板 – 对象存储
进入创建的存储桶 – 基础配置 – 开启静态网站
3814536309
域名管理
添加自定义加速域名,并设置域名指向生成的CNAME地址,源站类型改为 静态网站源站.
2188562839
控制面板 – 内容分发网络 – 域名管理
点击添加的域名 – 高级配置
开启HTTPS,设置强制跳转HTTPS,并更改跳转方式为301.在点击前往配置申请免费证书.
1324825565

配置SCF云函数

登录腾讯云控制面板 – 云函数
首次使用云函数可能会跳出 服务授权框,需要前往访问添加并同意授权即可.该角色对本次添加的云函数没有影响.
1584743378
2236344018
选择和你存储桶相同区域并新建
填写函数名,运行环境选择 Php 5.6,创建方式选择 空白函数下一步.
916251634
1345606549
函数配置
上部分保持默认即可
删除默认代码,复制以下样本代码至此.
图上标红两处需修改为之前获取的API密钥,注意此处的IDKEY顺序和之前配置GitHub Actions时是相反的,并把CDN链接改为你的域名,如果域名已配置过HTTPS和证书,确保此处为https.
完成即可
3233493932
303042024
函数代码样本

测试函数代码
确认API及CDN配置正确,点击测试,返回成功.
738740530
添加触发方式
此处需要分别添加 全部创建全部删除两个触发方式
触发方式 : COS触发
COS Bucket : 选择你的存储桶 (请再次确保存储桶和云函数的区域相同)
事件类型 : 全部创建全部删除
469425520
2683120116

测试配置

腾讯云控制台 – 内容分发网络
左侧刷新预热 – 操作记录 – 查询
可以看到刚才测试成功的一条记录,现在可以尝试在Push代码到GitHub来完整的测试整个流程了.
597511961


结语

随着 COSCMD的更新,支持了 --delete参数,但是一直没有测试成功.十分感谢热心网友大神的留言分享,在加了 -f忽略提示的参数后,目前已经完全支持删除功能,完美的实现了同步需求.


本站提供免费和付费的技术支持.你可以通过留言,邮件,TG群的方式来技术交流和免费咨询.同时也可以付费支持的方式获得相关的技术支持,项目部署配置等服务.具体相关详情请点击查看 技术支持页面

© 版权声明
THE END
喜欢就支持一下吧
点赞0 分享