WEB应用

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

Jager · 7月7日 · 2019年 · 801次已读

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:百度云加速的云函数

24 条回应
  1. 憧憬点滴记忆 2019-7-11 · 10:53

    张哥博客的新主题浏览起来有点小卡卡的,不知道为什么

    • 憧憬点滴记忆 2019-7-11 · 10:56

      而且访问进来CPU使用率有明显增高

      • 云武 2019-7-12 · 17:20

        木有办法的噻,上个主题和现在的主题都是一样。。

      • Jager 2019-7-15 · 7:36

        恭喜你,该换电脑了~

    • 悦有智 2019-7-15 · 9:05

      感觉还好,就是评论一阵一阵的,不习惯

    • 鳄鱼皮具 2019-7-21 · 10:54

      我觉得还好,不卡。速度还好

  2. 137博客 2019-7-11 · 15:06

    谢谢分享,这正是我要找的

  3. 挽救婚姻 2019-7-12 · 18:07

    厉害了,不断学习,PC端打字为什么会,跟着抖动…不习惯

  4. 心灵博客 2019-7-12 · 22:24

    cf真良心。我也来试试看。

    (我的邮箱是三级域名的,评论的时候总是提示邮箱格式不正确,暂时先改了个邮箱地址)

  5. 明月登楼的博客 2019-7-13 · 1:09

    国内的又拍云好像也一直在推CDN的边缘计算!不知道能实现这个不?

  6. 你好大佬 2019-7-13 · 3:57

    大佬,你的网站做得很好看。你现在的站内搜索是用百度站内搜索吗?

    • Jager 2019-7-15 · 7:41

      自带搜索

  7. 365cent 2019-7-14 · 18:38

    cf的service workers还是比较良心的,我fork了之前一个大佬写的js反代,感觉不错:https://sandbox.365.workers.dev/

    • Jager 2019-7-15 · 7:35

      牛逼,不过做这种反代还是要小心为上,省的被喝茶~~

    • 子虚 2019-7-17 · 8:31

      牛逼啊,大佬能分享一下这个js源码么

  8. 678资源网 2019-7-14 · 20:27

    怎么打字这么卡 我丢一晃一晃的

  9. 爪爪博士 2019-7-17 · 11:32

    不断学习,不过评论这个关闭振动,点了没反应。

  10. SKY8G网 2019-7-18 · 9:26

    这个输入抖动晃动,感觉不太友好,建议关闭,贵站整体布局新颖,页面排版大气,不错,现在网站就应该这样的大气网站,改变小巧玲珑的思想。

  11. 七夕夫人 2019-7-19 · 12:48

    有学习了,谢谢博主的分享!

  12. 明月登楼的博客 2019-7-20 · 3:08

    CDN的边缘计算好有诱惑力呀!估计今年能流行起来吧!

  13. 天音博客 2019-7-23 · 17:21

    走过看看,鼓励

  14. 搬瓦工 2019-7-28 · 9:22

    又学到一招
    感谢分享

  15. 何先生 2019-8-17 · 15:40

    边缘计算,高端的东西了

  16. 森纯博客 2019-8-28 · 22:17

    教程不错,话说打字会抖太神奇了