Spaces:

Mabbs
/

blog

Running

File size: 21,225 Bytes

6013f62

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />

  <!-- Begin Jekyll SEO tag v2.8.0 -->
<title>使用CloudFlare Workers做一些有趣的功能 | Mayx的博客</title>
<meta name="generator" content="Jekyll v3.9.5" />
<meta property="og:title" content="使用CloudFlare Workers做一些有趣的功能" />
<meta name="author" content="mayx" />
<meta property="og:locale" content="zh_CN" />
<meta name="description" content="挺不错，但是还是不如PHP" />
<meta property="og:description" content="挺不错，但是还是不如PHP" />
<meta property="og:site_name" content="Mayx的博客" />
<meta property="og:type" content="article" />
<meta property="article:published_time" content="2021-03-02T00:00:00+08:00" />
<meta name="twitter:card" content="summary" />
<meta property="twitter:title" content="使用CloudFlare Workers做一些有趣的功能" />
<meta name="google-site-verification" content="huTYdEesm8NaFymixMNqflyCp6Jfvd615j5Wq1i2PHc" />
<meta name="msvalidate.01" content="0ADFCE64B3557DC4DC5F2DC224C5FDDD" />
<meta name="yandex-verification" content="fc0e535abed800be" />
<script type="application/ld+json">
{"@context":"https://schema.org","@type":"BlogPosting","author":{"@type":"Person","name":"mayx"},"dateModified":"2021-03-02T00:00:00+08:00","datePublished":"2021-03-02T00:00:00+08:00","description":"挺不错，但是还是不如PHP","headline":"使用CloudFlare Workers做一些有趣的功能","mainEntityOfPage":{"@type":"WebPage","@id":"/2021/03/02/workers.html"},"publisher":{"@type":"Organization","logo":{"@type":"ImageObject","url":"https://avatars0.githubusercontent.com/u/17966333"},"name":"mayx"},"url":"/2021/03/02/workers.html"}</script>
<!-- End Jekyll SEO tag -->

  <link rel="canonical" href="https://mabbs.github.io/2021/03/02/workers.html" />
  <link type="application/atom+xml" rel="alternate" href="/atom.xml" title="Mayx的博客" />
  <link rel="alternate" type="application/rss+xml" title="Mayx的博客(RSS)" href="/rss.xml" />
  <link rel="alternate" type="application/json" title="Mayx的博客(JSON Feed)" href="/feed.json" />
  <link rel="stylesheet" href="/assets/css/style.css?v=1768642552" />
  <!--[if !IE]> -->
  <link rel="stylesheet" href="/Live2dHistoire/live2d/css/live2d.css" />
  <!-- <![endif]-->
  <link rel="search" type="application/opensearchdescription+xml" href="/opensearch.xml" title="Mayx的博客" />
  <link rel="webmention" href="https://webmention.io/mabbs.github.io/webmention" />
  <link rel="pingback" href="https://webmention.io/mabbs.github.io/xmlrpc" />
  <link rel="preconnect" href="https://summary.mayx.eu.org" crossorigin="anonymous" />
  <link rel="prefetch" href="https://www.blogsclub.org/badge/mabbs.github.io" as="image" />
  <link rel="blogroll" type="text/xml" href="/blogroll.opml" />
  <link rel="me" href="https://github.com/Mabbs" />
  <script src="/assets/js/jquery.min.js"></script>
  <!--[if lt IE 9]>
    <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery-ajaxtransport-xdomainrequest/1.0.3/jquery.xdomainrequest.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.min.js"></script>
  <![endif]-->
  <script>
    var lastUpdated = new Date("Sat, 17 Jan 2026 17:35:52 +0800");
    var BlogAPI = "https://summary.mayx.eu.org";
  </script>
  <script src="/assets/js/main.js"></script>
  <!--[if !IE]> -->
  
  <!-- Global site tag (gtag.js) - Google Analytics -->
  <script async="async" src="https://www.googletagmanager.com/gtag/js?id=UA-137710294-1"></script>
  <script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());
    gtag('config', 'UA-137710294-1');
  </script>
  
  <script src="/assets/js/instant.page.js" type="module"></script>
  <!-- <![endif]-->
</head>

<body>
  <!--[if !IE]> --><noscript><marquee style="top: -15px; position: relative;"><small>发现当前浏览器没有启用JavaScript，这不影响你的浏览，但可能会有一些功能无法使用……</small></marquee></noscript><!-- <![endif]-->
  <!--[if IE]><marquee style="top: -15px; position: relative;"><small>发现当前浏览器为Internet Explorer，这不影响你的浏览，但可能会有一些功能无法使用……</small></marquee><![endif]-->
  <div class="wrapper">
    <header class="h-card">
      <h1><a class="u-url u-uid p-name" rel="me" href="/">Mayx的博客</a></h1>

      
      <img src="https://avatars0.githubusercontent.com/u/17966333" fetchpriority="high" class="u-photo" alt="Logo" style="width: 90%; max-width: 300px; max-height: 300px;" />
      

      <p class="p-note">Mayx's Home Page</p>

      <form action="/search.html">
        <input type="text" name="keyword" id="search-input-all" placeholder="Search blog posts.." />&#160;<input type="submit" value="搜索" />
      </form>
      <br />

      

      

      <p class="view"><a class="u-url" href="/Mabbs/">About me</a></p>

      <ul class="downloads">
        
        <li style="width: 270px; border-right: none;"><a href="/MayxBlog.tgz">Download <strong>TGZ File</strong></a></li>
        
      </ul>
    </header>
    <section class="h-entry">

      <small><time class="date dt-published" datetime="2021-03-02T00:00:00+08:00">2 March 2021</time> - 字数统计：1676 - 阅读大约需要5分钟 - Hits: <span id="/2021/03/02/workers.html" class="visitors">Loading...</span></small>
<h1 class="p-name">使用CloudFlare Workers做一些有趣的功能</h1>

<p class="view">by <a class="p-author h-card" href="//github.com/Mabbs">mayx</a></p>
<div id="outdate" style="display:none;">
  <hr /><p>
  这是一篇创建于 <span id="outime"></span> 天前的文章，其中的信息可能已经有所发展或是发生改变。
  </p>
</div>
<script>
  daysold = Math.floor((new Date().getTime() - new Date("Tue, 02 Mar 2021 00:00:00 +0800").getTime()) / (24 * 60 * 60 * 1000));
  if (daysold > 90) {
    document.getElementById("outdate").style.display = "block";
    document.getElementById("outime").innerHTML = daysold;
  }
</script>

<hr />

<b>AI摘要</b>
<p id="ai-output">这篇文章介绍了作者尝试使用CloudFlare Workers实现的一些功能，包括自建反向代理以加快博客访问速度，搭建简单Status Page监测网站可用性，以及对Serverless云函数的玩味。作者提到虽然Workers功能完善且支持KV存储，但免费版的10万次请求限制对大流量网站并不适用。此外，作者认为Serverless更适合小公司，大公司则可能不会将其作为主要业务平台，因为存在服务中断风险。</p>

<hr />



<ul><li><a href="#起因">起因</a></li><li><a href="#首先给自己搭个反代">首先给自己搭个反代</a></li><li><a href="#给自己的网站搭一个status-page吧">给自己的网站搭一个Status Page吧</a></li><li><a href="#其他玩法">其他玩法</a></li><li><a href="#总结">总结</a></li></ul>
<hr />


 <main class="post-content e-content" role="main"><p>挺不错，但是还是不如PHP<!--more--></p>
<h1 id="起因">
  
  
    <a href="#起因"><svg class='octicon' viewBox='0 0 16 16' version='1.1' width='16' height='32' aria-hidden='true'><path fill-rule='evenodd' d='M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z'></path></svg></a> 起因
  
  
</h1>
    
<p>之前搞<a href="/2021/02/23/picbotpro.html">微信图片机器人</a>的时候，我看到P站的图片反代给了一个自己在CloudFlare Workers上建反向代理的<a href="https://pixiv.cat/reverseproxy.html">代码</a>。 </p><p>
  虽然我很早就在用CloudFlare，也知道Workers这个功能，不过我的JavaScript水平不太行，而且当时这个功能还不够完善，就没怎么管，不过既然又见到了，那就来玩玩试试看吧，现在的这个Workers功能不仅已经很完善，而且免费版的限制也少了很多，甚至还支持1G的KV存储。</p>
<h1 id="首先给自己搭个反代">
  
  
    <a href="#首先给自己搭个反代"><svg class='octicon' viewBox='0 0 16 16' version='1.1' width='16' height='32' aria-hidden='true'><path fill-rule='evenodd' d='M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z'></path></svg></a> 首先给自己搭个反代
  
  
</h1>
    
<p>之前我用PHP给自己的博客搭了一个<a href="/2021/01/06/proxy.html">简单的反代</a>，不过我用的那个服务商不太行，速度有点慢，而且也不是所有的PHP空间都支持伪静态。那既然有CloudFlare Workers那我们就来试试用这个实现吧。 </p><p>
  代码如下：</p>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nx">addEventListener</span><span class="p">(</span><span class="dl">"</span><span class="s2">fetch</span><span class="dl">"</span><span class="p">,</span> <span class="nx">event</span> <span class="o">=&gt;</span> <span class="p">{</span>
  <span class="kd">let</span> <span class="nx">url</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">URL</span><span class="p">(</span><span class="nx">event</span><span class="p">.</span><span class="nx">request</span><span class="p">.</span><span class="nx">url</span><span class="p">);</span>
  <span class="nx">url</span><span class="p">.</span><span class="nx">hostname</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">mabbs.github.io</span><span class="dl">"</span><span class="p">;</span>
  <span class="nx">event</span><span class="p">.</span><span class="nx">respondWith</span><span class="p">(</span><span class="nx">fetch</span><span class="p">(</span><span class="k">new</span> <span class="nx">Request</span><span class="p">(</span><span class="nx">url</span><span class="p">,</span> <span class="nx">event</span><span class="p">.</span><span class="nx">request</span><span class="p">)));</span>
<span class="p">});</span>
</code></pre></div></div>
<p>看起来代码好像更简单了，可惜我的JavaScript水平不行，最多只能照猫画虎，自己写不来…… </p><p>
  最终做出来的网址如下： <a href="https://blog.mayx.workers.dev/">https://blog.mayx.workers.dev/</a> ，这也算是我博客的另一个为了在国内能访问的域名吧……如果自己有域名的话可以设置路由把其他域名绑在上面。 </p><p>
  不过CloudFlare Workers也有一些缺陷，那就是有请求次数限制，免费版只有10w次/天的访问次数限制，对于我这种小站还行，大一点的请求次数一阵子就用光了，相比于限流量的PHP空间，用CloudFlare Workers做这种请求比较密集的站并不合适，不过这个不限流量，如果用来代理下载比较大的文件还是挺不错的。</p>
<h1 id="给自己的网站搭一个status-page吧">
  
  
    <a href="#给自己的网站搭一个status-page吧"><svg class='octicon' viewBox='0 0 16 16' version='1.1' width='16' height='32' aria-hidden='true'><path fill-rule='evenodd' d='M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z'></path></svg></a> 给自己的网站搭一个Status Page吧
  
  
</h1>
    
<p>我在看Workers的一些介绍时看到了一个很有意思的东西，就是Status Page，用来监测网站可用性的，看起来很有意思而且部署非常简单，具体可以看<a href="https://github.com/eidam/cf-workers-status-page#getting-started">文档</a>。 </p><p>
  这个东西支持一键部署，只要按照说明，很轻松就能搭一个属于自己的Status Page，另外我也给花火学园搭了一个<a href="https://status.sayhuahuo.com/">Hanabi Status Page</a>，看起来很专业的样子。</p>
<h1 id="其他玩法">
  
  
    <a href="#其他玩法"><svg class='octicon' viewBox='0 0 16 16' version='1.1' width='16' height='32' aria-hidden='true'><path fill-rule='evenodd' d='M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z'></path></svg></a> 其他玩法
  
  
</h1>
    
<p>其实这就是所谓的Serverless的云函数吧，我以前玩LeanCloud的时候就玩过了，本质其实和那些虚拟网站空间差不多，只是可能和平台的集成度更高，有一堆自制的API，所以效率更高吧。像OneIndex当时也有CloudFlare Workers版的，就是功能有点少，所以我还是搭的PHP版。 </p><p>
  如果自己有能力开发的话利用那个KV存储其实想开发什么网站都可以，而且这个支持的语言也很多，甚至也支持PHP，就是和一般的PHP感觉不太一样……  </p><p>
  比如我之前开发的<a href="/2021/02/23/picbotpro.html">图片机器人</a>、<a href="/2021/02/26/serverchancorp.html">Server酱自制版</a>等等都可以用CloudFlare Workers重写。 </p><p>
  像这样甚至自己写一个论坛都没问题，不过免费版的限制还是挺多的，虽然1G的KV存储还是挺大的，但是10w次/天的访问还是太少了，要用的话还是不够……如果做成前后端分离的那种可能还好，一个页面就一次请求，要是没有分离的话访问一次就要请求好多次了，相比之下不考虑流量的话可能免费的虚拟网站空间还能支持更多的请求。</p>
<h1 id="总结">
  
  
    <a href="#总结"><svg class='octicon' viewBox='0 0 16 16' version='1.1' width='16' height='32' aria-hidden='true'><path fill-rule='evenodd' d='M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z'></path></svg></a> 总结
  
  
</h1>
    
<p>总之现在Serverless也算是一个现在比较流行的东西（有人说Workers是边缘计算，不过我感觉现在应该不算了），从云计算来看应该算PaaS吧？还是BaaS（后端即服务，不是什么区块链）？倒是可以玩玩试试看，不过也就小公司可能会因为相对便宜而用，大公司肯定不会把业务放到这种东西上，万一这个服务没了，那曾经写的代码可能就全都没用了，如果做了兼容层还好，毕竟每一个平台的API都不一样，现在的Serverless厂家又不可能统一成什么联盟，挂了就没了，但是在服务器上自己写和部署的代码，无论是哪个服务器都可以运行，所以这个也就只能是玩玩看，未来这个可能不会有很大的发展。</p></main> 


<small style="display: block">tags: <a rel="category tag" class="p-category" href="/search.html?keyword=CloudFlare"><em>CloudFlare</em></a> - <a rel="category tag" class="p-category" href="/search.html?keyword=Workers"><em>Workers</em></a> <span style="float: right;"><a href="https://gitlab.com/mayx/mayx.gitlab.io/tree/master/_posts/2021-03-02-workers.md">查看原始文件</a></span></small>


<h4 style="border-bottom: 1px solid #e5e5e5;margin: 2em 0 5px;">推荐文章</h4>
<p id="suggest-container">Loading...</p>
<script>
var suggest = $("#suggest-container");
$.get(BlogAPI + "/suggest?id=/2021/03/02/workers.html&update=" + lastUpdated.valueOf(), function (data) {
  if (data.length) {
    getSearchJSON(function (search) {
      suggest.empty();
      var searchMap = {};
      for (var i = 0; i < search.length; i++) {
        searchMap[search[i].url] = search[i];
      }
      
      var tooltip = $('<div class="content-tooltip"></div>').appendTo('body').hide();
      for (var j = 0; j < data.length; j++) {
        var item = searchMap[data[j].id];
        if (item) {
          var link = $('<a href="' + item.url + '">' + item.title + '</a>');
          var contentPreview = item.content.substring(0, 100);
          if (item.content.length > 100) {
                contentPreview += "……";
          }
          link.hover(
            function(e) {
              tooltip.text($(this).data('content'))
                .css({
                  top: e.pageY + 10,
                  left: e.pageX + 10
                })
                .show();
            },
            function() {
              tooltip.hide();
            }
          ).mousemove(function(e) {
            tooltip.css({
              top: e.pageY + 10,
              left: e.pageX + 10
            });
          }).data('content', contentPreview); 
          
          suggest.append(link);
          suggest.append(' - ' + item.date + '<br />');
        }
      }
    });
  } else {
    suggest.html("暂无推荐文章……");
  }
});
</script>

<br />
<div class="pagination">
  
  <span class="prev">
    <a href="/2021/02/28/discuz.html">
      上一篇：如何给DiscuzX添加像原生一样的404页面
    </a>
  </span>
  
  <br />
  
  <span class="next">
    <a href="/2021/03/23/wxpush.html">
      下一篇：亲自体验微信推送的制作感受
    </a>
  </span>
  
</div>

<!--[if !IE]> -->
<link rel="stylesheet" href="/assets/css/gitalk.css">
<script src="/assets/js/gitalk.min.js"></script>

<div id="gitalk-container"></div>

<script>
  var gitalk = new Gitalk({
    clientID: '36557aec4c3cb04f7ac6',
    clientSecret: 'ac32993299751cb5a9ba81cf2b171cca65879cdb',
    repo: 'mabbs.github.io',
    owner: 'Mabbs',
    admin: ['Mabbs'],
    id: '/2021/03/02/workers',      // Ensure uniqueness and length less than 50
    distractionFreeMode: false,  // Facebook-like distraction free mode
    proxy: "https://cors-anywhere.mayx.eu.org/?https://github.com/login/oauth/access_token"
  })
  gitalk.render('gitalk-container')
</script>
<!-- <![endif]-->

    </section>
    <!--[if !IE]> -->
<div id="landlord" style="left:5px;bottom:0px;">
  <div class="message" style="opacity:0"></div>
  <canvas id="live2d" width="500" height="560" class="live2d"></canvas>
  <div class="live_talk_input_body">
    <form id="live_talk_input_form">
      <div class="live_talk_input_name_body" >
        <input type="checkbox" id="load_this" />
        <input type="hidden" id="post_id" value="/2021/03/02/workers.html" />
        <label for="load_this">
          <span style="font-size: 11px; color: #fff;">&#160;想问这篇文章</span>
        </label>
      </div>
      <div class="live_talk_input_text_body">
        <input name="talk" type="text" class="live_talk_talk white_input" id="AIuserText" autocomplete="off" placeholder="要和我聊什么呀？" />
        <button type="submit" class="live_talk_send_btn" id="talk_send">发送</button>
      </div>
    </form>
  </div>
  <input name="live_talk" id="live_talk" value="1" type="hidden" />
  <div class="live_ico_box" style="display:none;">
    <div class="live_ico_item type_info" id="showInfoBtn"></div>
    <div class="live_ico_item type_talk" id="showTalkBtn"></div>
    <div class="live_ico_item type_music" id="musicButton"></div>
    <div class="live_ico_item type_youdu" id="youduButton"></div>
    <div class="live_ico_item type_quit" id="hideButton"></div>
    <input name="live_statu_val" id="live_statu_val" value="0" type="hidden" />
    <audio src="" style="display:none;" id="live2d_bgm" data-bgm="0" preload="none"></audio>
    <input id="duType" value="douqilai" type="hidden" />
  </div>
</div>
<div id="open_live2d">召唤伊斯特瓦尔</div>
<!-- <![endif]-->
    <footer>
      <p>
        <small>Made with ❤ by Mayx<br />Last updated at 2026-01-17 17:35:52<br /> 总字数：614622 - 文章数：178 - <a href="/atom.xml" >Atom</a> - <a href="/README.html" >About</a></small>
      </p>
    </footer>
  </div>
  <script src="/assets/js/scale.fix.js"></script>
  <!--[if !IE]> -->
  <script src="/assets/js/main_new.js"></script>
  <script src="/Live2dHistoire/live2d/js/live2d.js"></script>
  <script src="/Live2dHistoire/live2d/js/message.js"></script>
  <!-- <![endif]-->
</body>
</html>