CloudFlare边缘计算Workers尝鲜初探:博客跳转中间页

4 月 27 日,有幸参加了由 Aftership 组织、CloudFlare 的大牛孟鑫主讲的《CloudFlare 最新边缘 API,打造无服务器(Serverless)架构》课程,感觉收获颇丰。因为这个课程非常接地气,大部分内容都在实战,而不像有些分享一味的讲理论、拼 PPT,听得云里雾里,分享的时候是一个样子,真正你去尝试的时候却是另外的样子,duang~,当然,还有一个原因就是张戈博客目前也在用 CloudFlare,因此会更加的有代入感。

这次分享的关键词是 CDN 边缘计算以及 ServerLess,具体是啥这里先不说,先看完下面的实战吧。

当时听完分享并跟着实操了一遍(使用的是 Aftership 分享的收费套餐子账号),就觉得我博客上至少有一个功能可以立马用起来,那就是 /goto/ 外链转内链的跳转页面,主要是得益于之前我额外写了一个 html 纯静态版本【相关文章】,能天然支持 CF 这种 ServerLess 玩法。

可惜,当时 CF 的 Workers 是收费的,入门档 5 刀/月。目前我博客运行在家里的 NAS 上,连服务器费用都省了,我肯定也不会花 5 刀去弄一个锦上添花的功能吧,因此作罢。

直到昨天傍晚(7 月 6 日),我这边打开博客感觉有些卡顿,就上 CF 去看了下,又看到了这个 Workers 功能。下意识的点进去看了下,惊喜的发现居然有了免费套餐:

CloudFlare边缘计算Workers尝鲜初探:博客跳转中间页
图 1:CloudFlare Workers

10W 请求/天,完全可以满足我这种小博客要求了!因此,快速回忆当时分享的内容,然后将我之前的想法付诸实际,经过为时不短的折腾,终于成功了!

下面分享实现步骤:

1、打开 CF 域名控制面板,如图 1 点击切换到 Workers 选项卡;

2、点击【Launch Editor】按钮进入 Workers 编辑界面后,点击【Add script】输入脚本名称并保存,如图:

CloudFlare边缘计算Workers尝鲜初探:博客跳转中间页
图 2:添加 Workers 脚本

3、提交后将下面的代码(注意修改代码中的 zhang.ge 为自己的域名)贴到代码编辑框,并点击【deploy】:

addEventListener('fetch', event => {
  event.respondWith(handleRequest(event.request))
})

/**
 * Fetch and log a request
 * @param {Request} request
 */
html = `<html>
<html lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="renderer" content="webkit">
<meta http-equiv="Cache-Control" content="no-transform" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<meta name="robots" content="noindex, nofollow" />
<meta name="applicable-device" content="pc,mobile">
<meta name="HandheldFriendly" content="true" />
<meta name="description" content="跳转页面" />
<meta name="keywords" content="跳转页面" />
<script>
var base64EncodeChars="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/";var base64DecodeChars=new Array(-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,62,-1,-1,-1,63,52,53,54,55,56,57,58,59,60,61,-1,-1,-1,-1,-1,-1,-1,0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,-1,-1,-1,-1,-1,-1,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,-1,-1,-1,-1,-1);function base64encode(str){var out,i,len;var c1,c2,c3;len=str.length;i=0;out="";while(i<len){c1=str.charCodeAt(i++)&255;if(i==len){out+=base64EncodeChars.charAt(c1>>2);out+=base64EncodeChars.charAt((c1&3)<<4);out+="==";break}c2=str.charCodeAt(i++);if(i==len){out+=base64EncodeChars.charAt(c1>>2);out+=base64EncodeChars.charAt(((c1&3)<<4)|((c2&240)>>4));out+=base64EncodeChars.charAt((c2&15)<<2);out+="=";break}c3=str.charCodeAt(i++);out+=base64EncodeChars.charAt(c1>>2);out+=base64EncodeChars.charAt(((c1&3)<<4)|((c2&240)>>4));out+=base64EncodeChars.charAt(((c2&15)<<2)|((c3&192)>>6));out+=base64EncodeChars.charAt(c3&63)}return out}function base64decode(str){var c1,c2,c3,c4;var i,len,out;len=str.length;i=0;out="";while(i<len){do{c1=base64DecodeChars[str.charCodeAt(i++)&255]}while(i<len&&c1==-1);if(c1==-1){break}do{c2=base64DecodeChars[str.charCodeAt(i++)&255]}while(i<len&&c2==-1);if(c2==-1){break}out+=String.fromCharCode((c1<<2)|((c2&48)>>4));do{c3=str.charCodeAt(i++)&255;if(c3==61){return out}c3=base64DecodeChars[c3]}while(i<len&&c3==-1);if(c3==-1){break}out+=String.fromCharCode(((c2&15)<<4)|((c3&60)>>2));do{c4=str.charCodeAt(i++)&255;if(c4==61){return out}c4=base64DecodeChars[c4]}while(i<len&&c4==-1);if(c4==-1){break}out+=String.fromCharCode(((c3&3)<<6)|c4)}return out}function utf16to8(str){var out,i,len,c;out="";len=str.length;for(i=0;i<len;i++){c=str.charCodeAt(i);if((c>=1)&&(c<=127)){out+=str.charAt(i)}else{if(c>2047){out+=String.fromCharCode(224|((c>>12)&15));out+=String.fromCharCode(128|((c>>6)&63));out+=String.fromCharCode(128|((c>>0)&63))}else{out+=String.fromCharCode(192|((c>>6)&31));out+=String.fromCharCode(128|((c>>0)&63))}}}return out}function utf8to16(str){var out,i,len,c;var char2,char3;out="";len=str.length;i=0;while(i<len){c=str.charCodeAt(i++);switch(c>>4){case 0:case 1:case 2:case 3:case 4:case 5:case 6:case 7:out+=str.charAt(i-1);break;case 12:case 13:char2=str.charCodeAt(i++);out+=String.fromCharCode(((c&31)<<6)|(char2&63));break;case 14:char2=str.charCodeAt(i++);char3=str.charCodeAt(i++);out+=String.fromCharCode(((c&15)<<12)|((char2&63)<<6)|((char3&63)<<0));break}}return out}function doit(){var f=document.f;f.output.value=base64encode(utf16to8(f.source.value));f.decode.value=utf8to16(base64decode(f.output.value))};
function GetQueryString(name)
{
     var reg = new RegExp("(^|&)"+ name +"=(.*)$");
     var r = window.location.search.substr(1).match(reg);
     if(r!=null) { 
         return  unescape(r[2]);
     } else {
         return window.location.pathname.replace("/goto/",""); //注意代码中的/goto/和跳转地址/goto/保持一致,请记得自行修改!
     }
}
jump_url = GetQueryString("url");
// 若传入的是 base 加密数据,则进行解密处理
if( jump_url == base64encode(base64decode(jump_url))) {
    jump_url = base64decode(jump_url);
}
// 自定义一些特殊字符串的跳转,请根据实际需求自行发挥,比如:
// 访问 "/goto/baidu" 会跳转到百度首页:
if(jump_url=="baidu") {
   jump_url="https://www.baidu.com/";
}
// 访问 "/goto/cf" 会跳转到 cloudflare 首页:
if(jump_url=="cf") {
   jump_url="https://www.cloudflare.com/";
}
// 网址校验
var UrlReg = "^((http|https|thunder|qqdl|ed2k|Flashget|qbrowser|ftp|rtsp|mms)://)";
if(jump_url == null || jump_url.toString().length<1 || !jump_url.match(UrlReg)) {
    document.title = "参数错误,正在返回首页...";
    jump_url = location.origin;
}
// 延时执行跳转
setTimeout(function link_jump()
{   
// 防止盗用,但是微信等客户端无法取得 referrer,因此这里允许了 referrer 为空的访问,请自行修改 zhang.ge 为自己的域名
  var MyHOST = new RegExp("zhang\.ge");
  if (!MyHOST.test(document.referrer) && document.referrer.length ) {
      alert("请不要盗用本站跳转页面!");
      location.href = "https://zhang.ge/";
      return;
  }
  location.href = jump_url;
},1000);
setTimeout(function(){window.opener=null;window.close();}, 50000);
</script>
<title>页面加载中,请稍候...</title>
<style type="text/css">
a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}body{background:#3498db}#loader-container{width:188px;height:188px;color:#fff;margin:0 auto;position:absolute;top:50%;left:50%;margin-right:-50%;transform:translate(-50%,-50%);border:5px solid #3498db;border-radius:50%;-webkit-animation:borderScale 1s infinite ease-in-out;animation:borderScale 1s infinite ease-in-out}#loadingText{font-family:"Microsoft YaHei",Helvetica,Arial,Lucida Grande,Tahoma,sans-serif,Raleway,sans-serif;font-size:1.4em;position:absolute;top:50%;left:50%;margin-right:-50%;transform:translate(-50%,-50%)}@-webkit-keyframes borderScale{0%{border:5px solid #fff}50%{border:25px solid #3498db}100%{border:5px solid #fff}}@keyframes borderScale{0%{border:5px solid #fff}50%{border:25px solid #3498db}100%{border:5px solid #fff}}
</style>
</head>
<body>
<div id="loader-container"><p id="loadingText">页面加载中...</p></div>
</body>
</html>`
//console.log(html)
async function handleRequest(request) {
  const newResponse = new Response(html)
  newResponse.headers.set('Content-Type', 'text/html');
  return newResponse
}

Ps:从代码可以看到,实际就是将我之前写的跳转页面的静态 Html 内容利用 Workers 语法吐到页面上,不用和后端的服务器做任何交互,就实现了一样的效果,这就是一种 ServerLess 无服务器服务。

添加并保存代码后,再回到这个页面点击 Preview 就可以进行如图的效果预览:

CloudFlare边缘计算Workers尝鲜初探:博客跳转中间页
图 3:Workers 效果预览

4、点击【routers】按钮切到路由编辑界面,点击【Add router】后如图添加路由:

CloudFlare边缘计算Workers尝鲜初探:博客跳转中间页
图 4:添加路由

5、大功告成!如果博客之前做了内链转外链跳转优化的话,回到博客点开一个评论者的外链跳转地址就能看到和以前一样的效果了!当然,也可以点击下面的地址预览:

https://zhang.ge/goto/aHR0cHM6Ly93d3cuYmFpZHUuY29tLw==

https://zhang.ge/goto/?url=https://www.baidu.com/

看完上面的操作和效果,相信对上文卖的关子:CDN 边缘计算、ServerLess 应该有了些许理解。CDN 边缘计算说白了就是将我们服务器上的一些计算任务转移到 CDN 节点上运行,实现业务功能的就近计算,从而使成本更低、速度更快。对于我们的站点或 APP 来说,这部分功能不再需要服务器承载,因此也是 ServerLess 无服务器服务的一种形式。2017 年我去上海参加 CNUTCon 分享大会就听过 ServerLess,但是显然没有比这样实操一遍带来的理解更深!

当然,上文分享的案例是最简单、最初级的入门实践,CF 的 Workers 的功能远不止如此。大牛孟鑫、Aftership 开发 GG 分享时,展示了很多强大的功能,比如 html 内容替换、简单 json API、结合 AWS 云服务的复杂 API、页面反向代理以及基于 Workers 做蓝绿部署切换等等。由于篇幅有限,这里就不一一回溯分享了,感兴趣的同学可以去跟着下面的 demo 实操一遍:

https://github.com/AfterShip/demo-cloudflare-workers/branches

操作步骤还是和上文分享的一致,前提是你先要有一个域名托管在 CF,enjoy it!当然,CF 官方也有详细的文档,感兴趣的同学也可以深入研究研究:https://workers.cloudflare.com/docs

CloudFlare边缘计算Workers尝鲜初探:博客跳转中间页
图 5:官方文档及典型案例

如图所示,Workers 可以实现边缘 APP、ServerLess 函数、自定义 CDN 缓存等功能,在我看来,还有几个比较实用的场景,感兴趣的同学完全可以研究下,比如在线二维码生成、图片裁剪、图片水印、代码压缩、美化等前端在线工具等,都完全可以实现 ServerLess 无服务器服务。

好了,以上就是本次的分享,CloudFlare 如此强大, 希望国内 CDN 也尽快跟上节奏吧!

2019-07-15 补充:偶尔看了下百度云加速,发现也支持边缘计算了,想到百度云加速和 CF 的合作关系,跟上这个节奏也就不奇怪了,猜测是直接使用了 CF 的技术方案。

CloudFlare边缘计算Workers尝鲜初探:博客跳转中间页
图 6:百度云加速的云函数

暂无评论

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇