作為強迫症患者，一直對自動化部署非常痴迷，個人認為全自動部署最重要的就是穩定可靠。經過研究測試，最終使用 GitHub 和騰訊雲兩大平台，成功完成了全自動部署網站的實踐。
本文來自 Serverless 社區用戶「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 配置文件樣本
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 比對存儲桶中已存在的文件，相同文件將會跳過上傳。
第二階段 - 騰訊雲函數 SCF
配置騰訊雲 CDN 域名
登錄騰訊雲控制面板 - 對象存儲
進入創建的存儲桶 - 基礎配置 - 開啟靜態網站
域名管理
添加自定義加速域名,並設置域名指向生成的CNAME地址,源站類型改為靜態網站源站。
控制面板 - 內容分發網絡 - 域名管理
點擊添加的域名 - 高級配置
開啟 HTTPS，設置強制跳轉 HTTPS，並更改跳轉方式為 301。在點擊前往配置申請免費證書。
配置雲函數 SCF
登錄騰訊雲控制面板 - 雲函數
首次使用雲函數可能會跳出 服務授權 框，需要前往訪問添加並同意授權即可。該角色對本次添加的雲函數沒有影響。
選擇和你存儲桶相同區域並新建
填寫函數名，運行環境選擇 Php 5.6，創建方式選擇 空白函數 下一步。
函數配置
上部分保持默認即可
刪除默認代碼,復制以下樣本代碼至此.
圖上標紅兩處需修改為之前獲取的 API 密鑰，注意此處的 ID 和 KEY 順序和之前配置 GitHub Actions 時是相反的，並把 CDN 鏈接改為你的域名，如果域名已配置過 HTTPS 和證書，確保此處為 https。
完成即可
函數代碼樣本
<?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 來完整的測試整個流程了。
Serverless Framework 30 天試用計划
我們誠邀您來體驗最便捷的 Serverless 開發和部署方式。在試用期內，相關聯的產品及服務均提供免費資源和專業的技術支持，幫助您的業務快速、便捷地實現 Serverless！
One More Thing
3 秒你能做什么？喝一口水，看一封郵件，還是 —— 部署一個完整的 Serverless 應用？
復制鏈接至 PC 瀏覽器訪問：https://serverless.cloud.tencent.com/deploy/express
3 秒極速部署，立即體驗史上最快的 Serverless HTTP 實戰開發！
傳送門：
- GitHub: github.com/serverless
- 官網：serverless.com
歡迎訪問：Serverless 中文網，您可以在 最佳實踐 里體驗更多關於 Serverless 應用的開發！