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

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

获取腾讯云API密钥

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

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

配置腾讯云COS

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

获取存储桶相关信息

配置GitHub Actions

GitHub仓库 – Settings – Secrets
添加 SecretId和 SecretKey分别为刚才获取的腾讯云API密钥

GitHub仓库 – Actions
默认会有很多推荐的workflows,这里选择 Set up a workflow yourself自己来配置.

系统会创建一个workflow的yml配置文件,删除预设代码,复制以下样本代码.
图上标红两处需修改为刚才创建存储桶获取的名称和区域
然后右上角提交即可

yml配置文件样本

<pre class="inline:true decode:1 " >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 -rfs --delete ./ / --ignore &quot;./.git/*&quot;

<pre class="inline:true decode:1 " >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 -rfs --delete ./ / --ignore "./.git/*"

测试GitHub Actions

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

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

配置腾讯云CDN域名

登录腾讯云控制面板 – 对象存储
进入创建的存储桶 – 基础配置 – 开启静态网站

域名管理
添加自定义加速域名,并设置域名指向生成的CNAME地址,源站类型改为静态网站源站.

控制面板 – 内容分发网络 – 域名管理
点击添加的域名 – 高级配置
开启HTTPS,设置强制跳转HTTPS,并更改跳转方式为301.在点击前往配置申请免费证书.

配置SCF云函数

登录腾讯云控制面板 – 云函数
首次使用云函数可能会跳出服务授权框,需要前往访问添加并同意授权即可.该角色对本次添加的云函数没有影响.

选择和你存储桶相同区域并新建
填写函数名,运行环境选择 Php 5.6,创建方式选择空白函数下一步.

函数配置
上部分保持默认即可
删除默认代码,复制以下样本代码至此.
图上标红两处需修改为之前获取的API密钥,注意此处的ID和KEY顺序和之前配置GitHub Actions时是相反的,并把CDN链接改为你的域名,如果域名已配置过HTTPS和证书,确保此处为https.
完成即可

函数代码样本

<pre class="inline:true decode:1 " >&lt;?php
$gl = 1;
function main_handler($event, $context) {
    $eve = json_decode(json_encode($event,JSON_FORCE_OBJECT),true);
    $usr_url=strval($eve[&quot;Records&quot;][0][&quot;cos&quot;][&quot;cosObject&quot;][&quot;url&quot;]);

    //截取object部分
    $object=substr($usr_url,strpos($usr_url,&quot;/&quot;,8));

    /*需要填写您的密钥，可从  https://console.cloud.tencent.com/capi 获取 SecretId 及 $secretKey*/
    $secretKey='XXXXXXXXXXXXXX';
    $secretId='XXXXXXXXXXXXXX';
    $action='RefreshCdnUrl';

    $HttpUrl=&quot;cdn.api.qcloud.com&quot;;
    /*除非有特殊说明，如MultipartUploadVodFile，其它接口都支持GET及POST*/
    $HttpMethod=&quot;GET&quot;;
    /*是否https协议，大部分接口都必须为https，只有少部分接口除外（如MultipartUploadVodFile）*/
    $isHttps =true;
    $nurl=&quot;https://XXXX.XXXX.com&quot;.$object; //   示例：$nurl=&quot;http://abc.com&quot;.$object;
    //print_r($nurl);

    /*下面这五个参数为所有接口的 公共参数；对于某些接口没有地域概念，则不用传递Region（如DescribeDeals）*/
    $COMMON_PARAMS = array(
                    'Nonce' =&gt; rand(),
                    'Timestamp' =&gt;time(NULL),
                    'Action' =&gt;$action,
                    'SecretId' =&gt; $secretId,
                    'SignatureMethod' =&gt; 'HmacSHA256',
                    'urls.0' =&gt; $nurl
                    );
    $PRIVATE_PARAMS = array();
    //**********执行CDN刷新URL操作**********/
    CreateRequest($HttpUrl,$HttpMethod,$COMMON_PARAMS,$secretKey, $PRIVATE_PARAMS, $isHttps);
   return &quot;RefreshCdnUrl OK&quot;;
}
/***************CDN API调用方法***************/
function CreateRequest($HttpUrl,$HttpMethod,$COMMON_PARAMS,$secretKey, $PRIVATE_PARAMS, $isHttps)
{
        $FullHttpUrl = $HttpUrl.&quot;/v2/index.php&quot;;

        /***************对请求参数 按参数名 做字典序升序排列，注意此排序区分大小写*************/
        $ReqParaArray = array_merge($COMMON_PARAMS, $PRIVATE_PARAMS);
        ksort($ReqParaArray);

        /**********************************生成签名原文**********************************
         * 将 请求方法, URI地址,及排序好的请求参数  按照下面格式  拼接在一起, 生成签名原文，此请求中的原文为 
         * GETcvm.api.qcloud.com/v2/index.php?Action=DescribeInstances&amp;Nonce=345122&amp;Region=gz
         * &amp;SecretId=AKIDz8krbsJ5yKBZQ    ·1pn74WFkmLPx3gnPhESA&amp;Timestamp=1408704141
         * &amp;instanceIds.0=qcvm12345&amp;instanceIds.1=qcvm56789
         * ****************************************************************************/
        $SigTxt = $HttpMethod.$FullHttpUrl.&quot;?&quot;;
        $isFirst = true;
        foreach ($ReqParaArray as $key =&gt; $value)
        {
                if (!$isFirst) 
                {
                        $SigTxt = $SigTxt.&quot;&amp;&quot;;
                }
                $isFirst= false;
                /*拼接签名原文时，如果参数名称中携带_，需要替换成.*/
                if(strpos($key, '_'))
                {
                        $key = str_replace('_', '.', $key);
                }
                $SigTxt=$SigTxt.$key.&quot;=&quot;.$value;
        }
        /*********************根据签名原文字符串 $SigTxt，生成签名 Signature******************/
        $Signature = base64_encode(hash_hmac('sha256', $SigTxt, $secretKey, true));

        /***************拼接请求串,对于请求参数及签名，需要进行urlencode编码********************/
        $Req = &quot;Signature=&quot;.urlencode($Signature);
        foreach ($ReqParaArray as $key =&gt; $value)
        {
                $Req=$Req.&quot;&amp;&quot;.$key.&quot;=&quot;.urlencode($value);
        }

        /*********************************发送请求********************************/
        if($HttpMethod === 'GET')
        {
                if($isHttps === true)
                {
                        $Req=&quot;https://&quot;.$FullHttpUrl.&quot;?&quot;.$Req;
                }
                else
                {
                        $Req=&quot;http://&quot;.$FullHttpUrl.&quot;?&quot;.$Req;
                }
                $Rsp = file_get_contents($Req);
        }
        else
        {
                if($isHttps === true)
                {
                        $Rsp= SendPost(&quot;https://&quot;.$FullHttpUrl,$Req,$isHttps);
                }
                else
                {
                        $Rsp= SendPost(&quot;http://&quot;.$FullHttpUrl,$Req,$isHttps);
                }
        }
        var_export(json_decode($Rsp,true));
}
function SendPost($FullHttpUrl, $Req, $isHttps)
{
        $ch = curl_init();
        curl_setopt($ch, CURLOPT_POST, 1);
        curl_setopt($ch, CURLOPT_POSTFIELDS, $Req);
        curl_setopt($ch, CURLOPT_URL, $FullHttpUrl);
        curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
        if ($isHttps === true) {
                curl_setopt($ch, CURLOPT_SSL_VERIFYPEER,  false);
                curl_setopt($ch, CURLOPT_SSL_VERIFYHOST,  false);
        }
        $result = curl_exec($ch);
        return $result;
}
?&gt;

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

<pre class="inline:true decode:1 " ><?php

$gl = 1;

function main_handler($event, $context) {

$eve = json_decode(json_encode($event,JSON_FORCE_OBJECT),true);

$usr_url=strval($eve["Records"][0]["cos"]["cosObject"]["url"]);

//截取object部分

$object=substr($usr_url,strpos($usr_url,"/",8));

/*需要填写您的密钥，可从 https://console.cloud.tencent.com/capi 获取 SecretId 及 $secretKey*/

$secretKey='XXXXXXXXXXXXXX';

$secretId='XXXXXXXXXXXXXX';

$action='RefreshCdnUrl';

$HttpUrl="cdn.api.qcloud.com";

/*除非有特殊说明，如MultipartUploadVodFile，其它接口都支持GET及POST*/

$HttpMethod="GET";

/*是否https协议，大部分接口都必须为https，只有少部分接口除外（如MultipartUploadVodFile）*/

$isHttps =true;

$nurl="https://XXXX.XXXX.com".$object; // 示例：$nurl="http://abc.com".$object;

//print_r($nurl);

/*下面这五个参数为所有接口的公共参数；对于某些接口没有地域概念，则不用传递Region（如DescribeDeals）*/

$COMMON_PARAMS = array(

'Nonce' => rand(),

'Timestamp' =>time(NULL),

'Action' =>$action,

'SecretId' => $secretId,

'SignatureMethod' => 'HmacSHA256',

'urls.0' => $nurl

);

$PRIVATE_PARAMS = array();

//**********执行CDN刷新URL操作**********/

CreateRequest($HttpUrl,$HttpMethod,$COMMON_PARAMS,$secretKey, $PRIVATE_PARAMS, $isHttps);

return "RefreshCdnUrl OK";

}

/***************CDN API调用方法***************/

function CreateRequest($HttpUrl,$HttpMethod,$COMMON_PARAMS,$secretKey, $PRIVATE_PARAMS, $isHttps)

{

$FullHttpUrl = $HttpUrl."/v2/index.php";

/***************对请求参数按参数名做字典序升序排列，注意此排序区分大小写*************/

$ReqParaArray = array_merge($COMMON_PARAMS, $PRIVATE_PARAMS);

ksort($ReqParaArray);

/**********************************生成签名原文**********************************

* 将请求方法, URI地址,及排序好的请求参数按照下面格式拼接在一起, 生成签名原文，此请求中的原文为

* GETcvm.api.qcloud.com/v2/index.php?Action=DescribeInstances&Nonce=345122&Region=gz

* &SecretId=AKIDz8krbsJ5yKBZQ ·1pn74WFkmLPx3gnPhESA&Timestamp=1408704141

* &instanceIds.0=qcvm12345&instanceIds.1=qcvm56789

* ****************************************************************************/

$SigTxt = $HttpMethod.$FullHttpUrl."?";

$isFirst = true;

foreach ($ReqParaArray as $key => $value)

{

if (!$isFirst)

{

$SigTxt = $SigTxt."&";

}

$isFirst= false;

/*拼接签名原文时，如果参数名称中携带_，需要替换成.*/

if(strpos($key, '_'))

{

$key = str_replace('_', '.', $key);

}

$SigTxt=$SigTxt.$key."=".$value;

}

/*********************根据签名原文字符串 $SigTxt，生成签名 Signature******************/

$Signature = base64_encode(hash_hmac('sha256', $SigTxt, $secretKey, true));

/***************拼接请求串,对于请求参数及签名，需要进行urlencode编码********************/

$Req = "Signature=".urlencode($Signature);

foreach ($ReqParaArray as $key => $value)

{

$Req=$Req."&".$key."=".urlencode($value);

}

/*********************************发送请求********************************/

if($HttpMethod === 'GET')

{

if($isHttps === true)

{

$Req="https://".$FullHttpUrl."?".$Req;

}

else

{

$Req="http://".$FullHttpUrl."?".$Req;

}

$Rsp = file_get_contents($Req);

}

else

{

if($isHttps === true)

{

$Rsp= SendPost("https://".$FullHttpUrl,$Req,$isHttps);

}

else

{

$Rsp= SendPost("http://".$FullHttpUrl,$Req,$isHttps);

}

var_export(json_decode($Rsp,true));

}

function SendPost($FullHttpUrl, $Req, $isHttps)

{

$ch = curl_init();

curl_setopt($ch, CURLOPT_POST, 1);

curl_setopt($ch, CURLOPT_POSTFIELDS, $Req);

curl_setopt($ch, CURLOPT_URL, $FullHttpUrl);

curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);

if ($isHttps === true) {

curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);

curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, false);

}

$result = curl_exec($ch);

return $result;

}

测试函数代码
确认API及CDN配置正确,点击测试,返回成功.

添加触发方式
此处需要分别添加全部创建和全部删除两个触发方式
触发方式 : COS触发
COS Bucket : 选择你的存储桶 (请再次确保存储桶和云函数的区域相同)
事件类型 : 全部创建和全部删除

测试配置

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

结语

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

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

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

前言

方案简介

业务需求

寻求方案

解决方案

方案流程图

第一阶段 – GitHub Actions

获取腾讯云API密钥

配置腾讯云COS

配置GitHub Actions

测试GitHub Actions

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

配置腾讯云CDN域名

配置SCF云函数

测试配置

结语

分享到：

相关