方案设计
腾讯云COS
对象存储服务能够提供静态网站服务,并可以配置CDN
域名进行访问,那么就需要解决以下两个问题:
- 如何使
GitHub
自动同步文件到腾讯云COS
; - 腾讯云
COS
对应的CDN
又是如何自动刷新;
解决方案:
GitHub Action
-配置每次Push
代码后自动上传到COS
;- 腾讯云
SCF
云函数-检测到COS
内文件变动后自动刷新对应的CDN
链接;
方案流程图:
获取腾讯云API密钥
登录腾讯云控制面板,访问管理中的访问密钥→API密钥管理→新建密钥,此密钥拥有所有权限,为保证安全,也可以添加子用户,配置COS、CDN
对应的权限,如下图示
配置腾讯云COS
登录腾讯云对象存储控制面板,在存储桶列表中创建存储桶,选择适合的地域,设置权限为公有读私有写并获取存储桶相关信息,如下图示
配置GitHub Actions
在GitHub仓库中,Settings→Secrets
,添加SecretId
和SecretKey
分别为刚才获取的腾讯云API密钥,如下图示
GitHub仓库→Actions
,默认会有很多推荐的workflows
,这里选择Set up a workflow yourself
自己来配置。
系统会创建一个workflow
的yml
配置文件,删除预设代码,复制以下样本代码。图上标红两处需修改为刚才创建存储桶获取的名称和区域,然后右上角提交即可。
yml配置文件样本代码:
name: Upload to COS
on: [push]
jobs:
build:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v1
- name: Install coscmd
run: sudo pip install coscmd
- name: Configure coscmd
env:
SECRET_ID: ${{ secrets.SecretId }}
SECRET_KEY: ${{ secrets.SecretKey }}
BUCKET: docs-1300533487
REGION: ap-shanghai
run: coscmd config -a $SECRET_ID -s $SECRET_KEY -b $BUCKET -r $REGION
- name: Upload
run: coscmd upload -rs --delete -f ./ / --ignore "./.git/*"
测试GitHub Actions
提交yml
后系统检测到main.yml
的push,便会开始运行这个workflow,根据yml配置文件,可以看出整个工作流简单理解为安装了腾讯云的coscmd工具,并根据配置的SecretId SecretKey BUCKET REGION
上传整个仓库到腾讯云COS,同时忽略掉git文件夹,其中upload-rs
命令会使用md5
比对存储桶中已存在的文件,相同文件将会跳过上传。
配置CDN域名
配置腾讯云CDN域名,登录腾讯云对象存储控制面板,进入创建的存储桶,在基础配置中开启静态网站。
域名管理,添加自定义加速域名,并设置域名指向生成的CNAME
地址,源站类型改为静态网站源站。
在控制面板内容分发网络域名管理下,点击添加的域名选择高级配置。
开启HTTPS,设置强制跳转HTTPS
,并更改跳转方式为301
,再点击前往配置申请免费证书。
配置SCF云函数
登录腾讯云云函数控制面板,首次使用云函数可能会跳出服务授权框,需要前往访问添加并同意授权即可,该角色对本次添加的云函数没有影响。
选择和存储桶相同区域并新建,填写函数名,运行环境选择Php5.6,创建方式选择空白函数下一步。
函数配置,上部分保持默认即可,删除默认代码,复制以下样本代码至此。
图上标红两处需修改为之前获取的API密钥,注意此处的ID和KEY顺序和之前配置GitHub Actions
时是相反的,并把CDN链接改为你的域名,如果域名已配置过HTTPS和证书,确保此处为https,完成即可。
测试函数代码,确认API及CDN配置正确,点击测试,返回成功。
添加触发方式,此处需要分别添加全部创建和全部删除两个触发方式。
- 触发方式 :
COS触发
; - COS Bucket :
选择你的存储桶 (请再次确保存储桶和云函数的区域相同)
; - 事件类型 :
全部创建和全部删除
;
测试SCF云函数
腾讯云内容分发网络控制台,左侧刷新预热→操作记录→查询。
可以看到刚才测试成功的一条记录,现在可以尝试在Push代码到GitHub来完整的测试整个流程了。
联系方式:
文章链接:https://wxiou.cn/index.php/archives/122/
除特别注明外,文章均为Literature原创,转载时请注明本文出处及文章链接