Serverless + GitHub Actions 完美自动化部署静态网站


作为强迫症患者,一直对主动化布置十分痴迷,个人认为全主动布置最重要的就是稳定可靠。经过研究测验,终究运用 GitHub 和腾讯云两大渠道,成功完结了全主动布置网站的实践。

本文来自 Serverless 社区用户「I @ R ] ; H { v eStille」投稿

方案简介

事务需求

博主有一个简略的纯静态文档站点 docs.ioiox.com,运用的的是 docsify 项目的 MaH = + Z M wrkdown 烘托程序,平常Z J N v – r & $经过本地 VSCode 修改文档,并提交到 GitHub。早前是直接运用 GitHub Pages 绑定域名来拜访,但由于网络问题,体会并不好。

寻求方案

腾讯云目标存储 COS 服务能够供给) 6 e g R静态网页服务,并能够装备 CDN 域名进行拜访。那么就需求处理以# S T $ R下两个问题:

  1. 怎么使 GitHub 主动同步文件到腾讯云 COS
  2. 腾讯云 COS 对应的 CDN 怎么主动改写

处理方案

  • GitHub Actif J % K T non – 装* X / Q备每次 Push 代码后主动上传到 COS
  • 腾讯云云函数 SCF – 检测到r o C { $ u u V COS 内文件变化后主动改写对应的O U | x 2 + C _ CDN 链接

方案流程图

Serverless + GitHub Actions 完美自动化部署静态网站

第一阶段 – GitHub Actions

Serverless + GitHub Actions 完美自动化部署静态网站

2019 年 11 月,GitHub 正式B B [ O ~开放了 GitHub Actions 这个) { w Y 7 u % H功用,不再需求恳求就能自由运用,目前是依照 workflow 的运用时长来收费,个人用户每u u ` F :月 2000 分钟的免费额度也基本够用了。

获取腾讯云 API 密钥

登录腾g J d讯云控制面板 – 拜访控制 – 拜访密钥 – API 密钥办理

新建密钥

Serverless + GitHub Actions 完美自动化部署静态网站

此密钥具有一切o S tG ~ n g , +限,为保证安8 f 7 9全,也能够增l ; F M z ] U F加子用户,装备 COS,CDN 对应的权限

装备腾讯云 COS

U b t 5 d q F 6录腾讯云控制面板 – 目标存储 – 存储桶列表

创立存储桶

挑选合适你的区域,设置权限为 公有读私有写V ^ Y w F 9.

Serverless + GitHub Actions 完美自动化部署静态网站
Serverless + GitHub Actions 完美自动化部署静态网站

获取存储桶相关信息

Serverless + GitHub Actions 完美自动化部署静态网站

装备 GitHub Actions

GitHub库房 – Settings – Se$ M O ; H A ; g Ecrets

增加 SecretIdSecretKX } L 8ey 分别为刚才获取的腾讯云 API 密钥

Serverless + GitHub Actions 完美自动化部署静态网站

GitHub库房 – Actions

默许会有很多推荐的 workflows,这儿挑选 Set up a workflo8 d I A %w yourself 自己来装备。

Serverless + GitHub Actions 完美自动化部署静态网站

体系会创立$ v J / C一个 workflow 的 yml9 j C 装备文件,删去预设代码,仿制以下样本代码。

图上标红两处需修改为刚才创立存储桶获取的称9 I N号和区域

然后右上角提交即可。

Serverless + GitHub Actions 完美自动化部署静态网站

yml 装$ I ~ t n c c j备文件样本

name: Upload to COS
on: [pT Y v !ush]
jobs:
builQ N 3 i - # w G ud:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v1
- name: Install coscmd
run: sudo pip install cosf K  %cmd
- name: Configure coscmd
env:
SECRET_ID: ${{ secrets.SecretId }}
SECQ h ) sRy m PET_KEY: ${{ secrets.SecretKeyj C R 2 # , n ) }}
BUCKET: docs-1300533487
REGION: ap-shangL Z Dhai
run: coscmd co| _ e _ s 9 p { 7nfig -a $SECRET_ID -s $SECRET_KEY -b $BUCKET -r $REGION
- name: Upload
run: coscmd upload -rs --delete -f ./ / --ignore "./.git/*"

测验 GitHus j D mb Actions

提交 yml 后体系检测到 main.yml 的 push% O 2,便会开端运转这个 woo w d ] H ) z Mrkflow,依据 yml 装备文件,能够看出整个工作流简略理解为安装了腾讯云的 coscmd 工具,并依据装备的 SecretIdSecretKeyBUCKETREGION 上传整个库房到腾讯云 COW e ( rS,同时疏忽掉 .git 文件夹。其中 upload -rs 命令会运用 md5 比对存储桶中已存在的文件,相同文件将会跳过上传。

Serverless + GitHub Actions 完美自动化部署静态网站
Serverless + GitHub Actions 完美自动化部署静态网站

第二阶段 – 腾讯云函数 SCF

Serverless + GitHub Actions 完美自动化部署静态网站

装备腾讯云 CDN 域名

登录腾讯云控制面板 – 目标存储

进入创立的存储桶 – 根底装备 – 敞开静态网站

Serverless + GitHub Actions 完美自动化部署静态网站

域名办理

增加自定义加快域名,并设置域名指向生成的CNAME地址,源% 9 B n &站类型改为静态网站源站

Serverless + GitHub Actions 完美自动化部署静态网站

控制面板 – 内容分 1 a发网络 – 域名办理

点击增加的域名 – 高级装备

敞开 HTTPS,设置强制跳转 HTTPS,并更改跳转办法为 301。在点击前往装备恳求免费证书。

Serverless + GitHub Actions 完美自动化部署静态网站

装备云函数 SCF

登录腾讯云控制面k | F / m w L v X板 – 云函数

首次运用云函数可能会跳出 服务授权 框,需求前往拜访增加并同意授权即可。该人物对本次增加的云函数没有影响。

Serverless + GitHub Actions 完美自动化部署静态网站
Serverless + GitHub Actions 完美自动化部署静态网站

挑选和你存储桶相同区域并新建

填写函数名,运转环境挑选 Php 5.$ q k 36,创立办法挑选 空白函数 下一步。

Serverless + GitHub Actions 完美自动化部署静态网站
Serverless + GitHub Actions 完美自动化部署静态网站

函数装备

上部分保持默许即可

删去默许代码,仿制以下样本代码至此.

图上标红两处需修改为之前获取的 API 密钥,留意此处的 ID 和 KEY 次序和之前装备 GitHub Actions 时是相反的,并把 CDN 链接改为你~ _ # m D | c I的域名,假如域名已装备过 HTTPS 和证书,保证此处为 https。

完结即可

Serverless + GitHub Actions 完美自动化部署静态网站
Serverless + GitHub Actions 完美自动化部署静态网站

函数代码样本

<?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部分z R ! M R G u
$object=substr($usr_url,strpos($usr_url,"/",8));
/*需求填写r o Y您的密钥,可从  https://console.cloud.tencent.com/capi 获取 SecretId 及 $secretKey*/
$secretKey='XXXXXXXXXXXXXX';
$secretId='XXXXXXXXXXXXXX';
$action='R3 W .efreshCdnUrl';
$Http@ W P k qUrl="cdn.api.qcloud.com";
/*除非有特殊阐明,如MultipartUploadVodFile,其它接口都支持GET及POST*/
$HttpMethod="GET";
/*是否https协议,大部分接口都必须为https,只有少部分接口除外(如MultipartUploadVodFile)*/
$x / ! 2 + J d =isHttps =true;
$nurl="https://XXXX.XXXX.com".$object; //   示例:$nurl="http://a{ ? L Obc.com".$object;
//print_r($nurl);
/*下面这五个参数为一切接口的 公共参数;关于某些接口没 2 y z w ? N k有地域概念,则不必传递Region(如DescribeDeals)*/
$COMMON_PARAMS = array(
'Nonz M 5 ] D jce' => randt V K(),
'Timestamp' =J & ~ 8 r , W>time(NULy  ; ] L T 6L),
'Action' =>$action,
'SecretId' => $secretId,
'SignatureMethod' => 'HmacSHA256',
'urls.0' => $nurl
);
$PRIVATE_PARAMS = array();
//**********执行CDN改写URL操作**********/
CreateRequest($Httpi z q )Url,$HttpMethod,$COMMON_PARAMS,$secretKey, $PRIVATE_PARAMS, $isHttps);
return "RefreshCdnUrl OK";
}
/***************CDN API调用办法***************/
function CreateRe7 R 0 S 1 F 3quest($HttpUrl,$HttpMethod,$COMMON_PARAMS,$secretKey, $PRIVATE_PARA/ a N K U V u {MS, $isHttps)
{
$FullHttpUrl = $HttpUrlQ f P N U @ + 9."/v2/index.php";
/**. 4 % { H s*******s @ C C 2 : ] | ,****# = N - { ? H u**对恳求参数 按参数名 做字典序升序摆? q 7放,留* # E /意此排序区分大小写********T t Q m !*****/
$ReqParaArray = array_merge($C9 T [ g P 7 : AOMZ n g G fMON_PARAMS, $PRIVATE_PARAMS);
ksort($ReqParaArray);
/*****************| I * n ( r w : |*****************生成签名原文*********# 1 v c 7*************************
* 将 恳求办法, UR@ z : 3 % : )I地址,及排序好的恳求参数  依照下面格局  拼接在一起,) H 8 } z 7 W . D 生成签名原文,V e k & w b此恳求中的原文为
* GEI J [ $Tcvm.api.qcloud.com/v2/index.php?Action=DescribeInstanc( _ # jes&Nonce=345122&M . W sRegion=gz
* &SecretId=AKIDz8krbsJ5yKBZQ    1pn74WFkmLPx3gnPhESA&Timel I P B qstamp=1408704141
* &instanceIds.0=qcvm12345&instanceIds.1=qcvm56789
* *******# + ~ i c*******************k Y / + [****************************| I y 0 ***********************? K N { & (/
$SigTxt =) 4 G H v X $6 m i i i x x @ HttpMethod.$FullHttpUrl."?";
$isFirst = true;, l % ? f V
foreach ($ReqParaArray as $key => $value)
{
if (!$isFirsU M ! a T { * jt)
{
$h z  = $ ( #SigTxt = $SigTxt."&";
}
$isFirst= false;
/*拼接签名? 0 ! ; j原文时,假如参数称号中带着_,需求替换成.*/
if(strpos($key, '_'))
{
$key = str_replace('# ; N 9 1 O 1 $_', '.', $key);2 { {  -
}
$SigTxt=$SigTxt.$key."=".$value;
}
/************s G V**L b 6*******依据签名原文字符串 $SigTxt,l B E n 2 5 G生成签名 S7 w .ignature******************/
$Signature] Q H { = base64_encode(hash_hmac('sha256', $SigTxt, $secretKey, true));
/***************拼接恳求串,关于恳求参Z N G d 4 ` b ` r数及签名,需求进行urlencodeu p s 2 A编码**********w n y E # a**********/
$Req = "Signature=".urlencode($Signature);
foreach ($ReqParaArray as $key => $value)
{
$Req=$Req."&".$key."=".urlencode($value);
}Y 9 8 4
/*********************************发送恳求********************************/
if($HttpMethod === 'GET')
{
if($isHttps === true)
{
$Req="https://2 % : k U o B".$FullHttpUrl."?".$Req;
}
else
{
$Req="http://".$FullHttpO ( t _ 5 xUrl."?".$Req;
}
$Rsp = file_get_content / @ ] # M C s($Req);
}
else
{
if($isHttps === true)
{
$Rsp= SendPost("https://".$FullHttpUrl,$Req,$isHt] E = 3 _ 9 ] X ?tps);
}
else
{
$Rsp= SendPost("http://".$FullHttpUrl,$Req,$isHttps);
}
}
var_export(json_decode($u ] [Rsp,true));
}
function SendPost($FullHttpUrl, $Req, $isHttR X : i |ps)
{
$ch = curl_init()Y S A ) ^ 4 ` T *;
curl_setopt($ch, CU7 r V g A ~RLOPT_POST[ L L q B o z = 6, 1);
curl_setopt($ch, CURLOPT_POSTFIELDS, $Req);
curl_setopt($ch, CURLOPT_UR} R nL, $FullHttpUrl);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
if ($isHttps === true) {
curl_setopt($ch, CURLOPT_SR 0 w K b USL_VERIFYPEERQ ( z p j X l,  false);, $ i
curl_setopt($ch, CURLOPT_SSL_VERIFYHOST,  false);
}
$result = curl_exec($ch);
return $result;
}
?>; W / r { $ C

测验函数7 5 E l代码

承认 API 及 CDN 装备正确,点击测验,回来成功。f % 7

Serverless + GitHub Actions 完美自动化部署静态网站

增加触发办法

此处需求分别增加 悉数创立悉数删去 两个触发办法

触发办法:COS 触发

COS Bucket:挑W . 7选你的存储桶 (请再次保证存储桶和云u M G ( @ t |函数的区域相同)

事情类型:悉数创立悉数删去

Serverless + GitHub Actions 完美自动化部署静态网站

测验装备

腾讯云控制台 – 内容分发网络

左侧改写预热 – 操作记载 – 查询

能够看到刚才测验成功的一条记载,现在能够测验在 Push 代码到 GitHub 来完好的测验整个流程了。

Serverless + GitHub Actions 完美自动化部署静态网站

Serveb O k v s d F Xrless FrameworD N B z N Q r Fk 30 天试用方案

咱们诚邀您来体会最快捷的 Serverless 开发和布置办法。在试用期内,相关联的产品及服务均供给免费资源和专业的技术支持,帮助您的事C / h r , . Y务快速、快捷地实现 Serverless!

概况可查阅:Serverless Framework 试用方案

One More Thing

3{ ^ . I L 秒你能做什么?喝一口水,看一封邮件,仍是 —— 布置一个完好的 Serverless 应用?

仿制链接至 PC 浏1 R [ b 5 ]览器C R ` 4拜访:serverless.cloud.tencent.com/deploy/expr…

3 秒极速布置,当即体会史上最快的 Serverless HTTP 实战开发!

传送门:

  • GitHub: github.com/serverless
  • 官网:serverless.com

欢迎拜访:Serverless 中文网,您能够在 最佳实践 里E O [体会* z v y v 1 3更多关于 Serverless 应用的开发!


推荐阅览:《Serverless 架构:从原L & 8 w理、设计到项目实战》

发表评论

提供最优质的资源集合

立即查看 了解详情