如何進(jìn)行Serverless + GitHub Actions完美自動(dòng)化部署靜態(tài)網(wǎng)站

這期內(nèi)容當(dāng)中小編將會(huì)給大家?guī)碛嘘P(guān)如何進(jìn)行Serverless + GitHub Actions完美自動(dòng)化部署靜態(tài)網(wǎng)站，文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

作為強(qiáng)迫癥患者，一直對(duì)自動(dòng)化部署非常癡迷，個(gè)人認(rèn)為全自動(dòng)部署最重要的就是穩(wěn)定可靠。經(jīng)過研究測試，最終使用 GitHub 和騰訊云兩大平臺(tái)，成功完成了全自動(dòng)部署網(wǎng)站的實(shí)踐。

方案簡介

業(yè)務(wù)需求

博主有一個(gè)簡單的純靜態(tài)文檔站點(diǎn) docs.ioiox.com，使用的的是 docsify 項(xiàng)目的 Markdown 渲染程序，平時(shí)通過本地 VSCode 編輯文檔，并提交到 GitHub。早前是直接使用 GitHub Pages 綁定域名來訪問，但由于網(wǎng)絡(luò)問題，體驗(yàn)并不好。

尋求方案

騰訊云對(duì)象存儲(chǔ) COS 服務(wù)能夠提供靜態(tài)網(wǎng)頁服務(wù)，并可以配置 CDN 域名進(jìn)行訪問。那么就需要解決以下兩個(gè)問題:

1. 如何使 GitHub 自動(dòng)同步文件到騰訊云 COS

2. 騰訊云 COS 對(duì)應(yīng)的 CDN 如何自動(dòng)刷新

解決方案

• GitHub Action - 配置每次 Push 代碼后自動(dòng)上傳到 COS

• 騰訊云云函數(shù) SCF - 檢測到 COS 內(nèi)文件變動(dòng)后自動(dòng)刷新對(duì)應(yīng)的 CDN 鏈接

方案流程圖

第一階段 - GitHub Actions

2019 年 11 月，GitHub 正式開放了 GitHub Actions 這個(gè)功能，不再需要申請(qǐng)就能自由使用，目前是按照 workflow 的使用時(shí)長來收費(fèi)，個(gè)人用戶每月 2000 分鐘的免費(fèi)額度也基本夠用了。

獲取騰訊云 API 密鑰

登錄騰訊云控制面板 - 訪問控制 - 訪問密鑰 - API 密鑰管理

新建密鑰

此密鑰擁有所有權(quán)限，為保證安全，也可以添加子用戶，配置 COS,CDN 對(duì)應(yīng)的權(quán)限

配置騰訊云 COS

登錄騰訊云控制面板 - 對(duì)象存儲(chǔ) - 存儲(chǔ)桶列表

創(chuàng)建存儲(chǔ)桶

選擇適合你的區(qū)域,設(shè)置權(quán)限為 公有讀私有寫.

獲取存儲(chǔ)桶相關(guān)信息

配置 GitHub Actions

GitHub倉庫 - Settings - Secrets

添加 SecretId 和 SecretKey 分別為剛才獲取的騰訊云 API 密鑰

GitHub倉庫 - Actions

默認(rèn)會(huì)有很多推薦的 workflows，這里選擇 Set up a workflow yourself 自己來配置。

系統(tǒng)會(huì)創(chuàng)建一個(gè) workflow 的 yml 配置文件，刪除預(yù)設(shè)代碼，復(fù)制以下樣本代碼。

圖上標(biāo)紅兩處需修改為剛才創(chuàng)建存儲(chǔ)桶獲取的名稱和區(qū)域

然后右上角提交即可。

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 后系統(tǒng)檢測到 main.yml 的 push，便會(huì)開始運(yùn)行這個(gè) workflow，根據(jù) yml 配置文件，可以看出整個(gè)工作流簡單理解為安裝了騰訊云的 coscmd 工具，并根據(jù)配置的 SecretId、SecretKey、BUCKET、REGION 上傳整個(gè)倉庫到騰訊云 COS，同時(shí)忽略掉 .git 文件夾。其中 upload -rs 命令會(huì)使用 md5 比對(duì)存儲(chǔ)桶中已存在的文件，相同文件將會(huì)跳過上傳。

第二階段 - 騰訊云函數(shù) SCF

配置騰訊云 CDN 域名

登錄騰訊云控制面板 - 對(duì)象存儲(chǔ)

進(jìn)入創(chuàng)建的存儲(chǔ)桶 - 基礎(chǔ)配置 - 開啟靜態(tài)網(wǎng)站

域名管理

添加自定義加速域名,并設(shè)置域名指向生成的CNAME地址,源站類型改為靜態(tài)網(wǎng)站源站。

控制面板 - 內(nèi)容分發(fā)網(wǎng)絡(luò) - 域名管理

點(diǎn)擊添加的域名 - 高級(jí)配置

開啟 HTTPS，設(shè)置強(qiáng)制跳轉(zhuǎn) HTTPS，并更改跳轉(zhuǎn)方式為 301。在點(diǎn)擊前往配置申請(qǐng)免費(fèi)證書。

配置云函數(shù) SCF

登錄騰訊云控制面板 - 云函數(shù)

首次使用云函數(shù)可能會(huì)跳出 服務(wù)授權(quán) 框，需要前往訪問添加并同意授權(quán)即可。該角色對(duì)本次添加的云函數(shù)沒有影響。

選擇和你存儲(chǔ)桶相同區(qū)域并新建

填寫函數(shù)名，運(yùn)行環(huán)境選擇 Php 5.6，創(chuàng)建方式選擇 空白函數(shù) 下一步。

函數(shù)配置

上部分保持默認(rèn)即可

刪除默認(rèn)代碼,復(fù)制以下樣本代碼至此.

圖上標(biāo)紅兩處需修改為之前獲取的 API 密鑰，注意此處的 ID 和 KEY 順序和之前配置 GitHub Actions 時(shí)是相反的，并把 CDN 鏈接改為你的域名，如果域名已配置過 HTTPS 和證書，確保此處為 https。

完成即可

函數(shù)代碼樣本

<?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協(xié)議，大部分接口都必須為https，只有少部分接口除外（如MultipartUploadVodFile）*/
    $isHttps =true;
    $nurl="https://XXXX.XXXX.com".$object; //   示例：$nurl="http://abc.com".$object;
    //print_r($nurl);

    /*下面這五個(gè)參數(shù)為所有接口的 公共參數(shù)；對(duì)于某些接口沒有地域概念，則不用傳遞Region（如DescribeDeals）*/
    $COMMON_PARAMS = array(
                    'Nonce' => rand(),
                    'Timestamp' =>time(NULL),
                    'Action' =>$action,
                    'SecretId' => $secretId,
                    'SignatureMethod' => 'HmacSHA256',
                    'urls.0' => $nurl
                    );
    $PRIVATE_PARAMS = array();
    //**********執(zhí)行CDN刷新URL操作**********/
    CreateRequest($HttpUrl,$HttpMethod,$COMMON_PARAMS,$secretKey, $PRIVATE_PARAMS, $isHttps);
   return "RefreshCdnUrl OK";
}
/***************CDN API調(diào)用方法***************/
function CreateRequest($HttpUrl,$HttpMethod,$COMMON_PARAMS,$secretKey, $PRIVATE_PARAMS, $isHttps)
{
        $FullHttpUrl = $HttpUrl."/v2/index.php";

        /***************對(duì)請(qǐng)求參數(shù) 按參數(shù)名 做字典序升序排列，注意此排序區(qū)分大小寫*************/
        $ReqParaArray = array_merge($COMMON_PARAMS, $PRIVATE_PARAMS);
        ksort($ReqParaArray);

        /**********************************生成簽名原文**********************************
         * 將 請(qǐng)求方法, URI地址,及排序好的請(qǐng)求參數(shù)  按照下面格式  拼接在一起, 生成簽名原文，此請(qǐng)求中的原文為
         * 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;
                /*拼接簽名原文時(shí)，如果參數(shù)名稱中攜帶_，需要替換成.*/
                if(strpos($key, '_'))
                {
                        $key = str_replace('_', '.', $key);
                }
                $SigTxt=$SigTxt.$key."=".$value;
        }
        /*********************根據(jù)簽名原文字符串 $SigTxt，生成簽名 Signature******************/
        $Signature = base64_encode(hash_hmac('sha256', $SigTxt, $secretKey, true));

        /***************拼接請(qǐng)求串,對(duì)于請(qǐng)求參數(shù)及簽名，需要進(jìn)行urlencode編碼********************/
        $Req = "Signature=".urlencode($Signature);
        foreach ($ReqParaArray as $key => $value)
        {
                $Req=$Req."&".$key."=".urlencode($value);
        }

        /*********************************發(fā)送請(qǐng)求********************************/
        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;
}
?>

測試函數(shù)代碼

確認(rèn) API 及 CDN 配置正確，點(diǎn)擊測試，返回成功。

添加觸發(fā)方式

此處需要分別添加 全部創(chuàng)建 和 全部刪除 兩個(gè)觸發(fā)方式

觸發(fā)方式：COS 觸發(fā)

COS Bucket：選擇你的存儲(chǔ)桶 (請(qǐng)?jiān)俅未_保存儲(chǔ)桶和云函數(shù)的區(qū)域相同)

事件類型：全部創(chuàng)建和全部刪除

測試配置

騰訊云控制臺(tái) - 內(nèi)容分發(fā)網(wǎng)絡(luò)

左側(cè)刷新預(yù)熱 - 操作記錄 - 查詢

可以看到剛才測試成功的一條記錄，現(xiàn)在可以嘗試在 Push 代碼到 GitHub 來完整的測試整個(gè)流程了。

Serverless Framework 30 天試用計(jì)劃

我們誠邀您來體驗(yàn)最便捷的 Serverless 開發(fā)和部署方式。在試用期內(nèi)，相關(guān)聯(lián)的產(chǎn)品及服務(wù)均提供免費(fèi)資源和專業(yè)的技術(shù)支持，幫助您的業(yè)務(wù)快速、便捷地實(shí)現(xiàn) Serverless！

上述就是小編為大家分享的如何進(jìn)行Serverless + GitHub Actions完美自動(dòng)化部署靜態(tài)網(wǎng)站了，如果剛好有類似的疑惑，不妨參照上述分析進(jìn)行理解。如果想知道更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道。