WEB应用

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

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

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

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

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

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

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

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

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

      • avatar
        Jager 2019-7-15 · 7:36

        恭喜你,该换电脑了~

        • 热腾网 2019-10-20 · 20:56

          刚换主题的时候感觉还可以,现在访问确实慢,我用的是联想的TS540,页面还有时卡住。

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

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

      • adsdadfga 2019-9-2 · 15:33

        是的

    • 鳄鱼皮具 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

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

    • avatar
      Jager 2019-7-15 · 7:41

      自带搜索

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

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

    • avatar
      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-13 · 23:55

    文章不错非常喜欢,支持

  16. free 2019-8-16 · 15:29

    家用nas 动态ip 是如何解决域名映射的

    • avatar
      Jager 2019-9-25 · 19:55

      DDNS

  17. 雷石 2019-8-16 · 16:24

    学到了,另外博主的加载速度好快!

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

    边缘计算,高端的东西了

  19. 大闸蟹礼券批发 2019-8-26 · 7:55

    大佬,大佬!

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

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

  21. aimi 2019-9-5 · 10:35

    给人感觉到一种权威和力量的存在

  22. 走运符 2019-9-9 · 19:28

    这个抖动的效果好炫酷啊

  23. 枫行者 2019-9-13 · 14:02

    这新主题给力啊,这么大页面

  24. 交易之家 2019-9-16 · 16:07

    新主题不错

  25. 美秘史 2019-9-29 · 14:36

    感谢分享

  26. 时光在路上 2019-10-23 · 16:31

    从你的网站真是能学到好多东西。这篇文章让人耳目一新。膜拜!

  27. Jasper 2019-11-17 · 10:41

    张哥博客最近浏览起来感觉有点卡,甚至有时候打不开

  28. 振动分析仪 2019-11-28 · 9:56

    期待更新

  29. 振动分析仪 2020-1-9 · 11:10

    谢谢分享

  30. 麦杰机械 2020-4-16 · 16:14

    这个可以的

  31. 外汇开户通 2020-6-23 · 18:48

    关注博客已经4年多了。记得刚开始接触技术方面的知识还是看了你的文章,然后用的鸟叔的主题,搭建的wordpress博客。
    最近发现又换主题了。好喜欢。