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

  • 时间:
  • 浏览:4
  • 来源:零度娱乐网_提供酷玩娱乐网技术_羽梦娱乐网资讯

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功能。下意识的点进去看到下,惊喜的发现岂有的是有了免费套餐:

图1:CloudFlare Workers

10W请求/天,完正都都可不都可以满足我这些小博客要求了!后来 ,快速回忆当二十四时享的内容,后来 将我以前的想法付诸实际,经过为时不短的折腾,终于成功了!

下面分享实现步骤:

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

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

图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,200,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,200,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,200,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&200)>>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;
},2000);
setTimeout(function(){window.opener=null;window.close();}, 200000);
</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:200%;font:inherit;vertical-align:baseline}body{background:#3498db}#loader-container{width:188px;height:188px;color:#fff;margin:0 auto;position:absolute;top:200%;left:200%;margin-right:-200%;transform:translate(-200%,-200%);border:5px solid #3498db;border-radius:200%;-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:200%;left:200%;margin-right:-200%;transform:translate(-200%,-200%)}@-webkit-keyframes borderScale{0%{border:5px solid #fff}200%{border:25px solid #3498db}200%{border:5px solid #fff}}@keyframes borderScale{0%{border:5px solid #fff}200%{border:25px solid #3498db}200%{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就都都可不都可以进行如图的效果预览:

图3:Workers效果预览

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

图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 。

图5:官方文档及典型案例

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

好了,以上所以本次的分享,CloudFlare这样强大, 希望国内CDN也尽快跟上节奏吧!

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

图6:百度云加速的云函数