thumbnail
将 Hexo 部署到 Cloudflare Workers

0. 起因

最近得知 Cloudflare Workers KV 有免费额度了,看起来可以搞一些有意思的东西,因为我自己 Blog 服务器在国内,所以想要通过分流的方法使国外直接访问 Cloudflare 以获得更好的体验。

1. 准备工作

想要把 Hexo Blog 部署到 Cloudflare Workers,当然要有一个 Hexo 的 Blog 了。
同时也需要一个 Cloudflare 的账号~

2. 申请一个API key

登录 Cloudflare,在 个人资料-API令牌 中申请一个API令牌
使用自带的 Cloudflare Workers 模板即可

记住你的Key,一会儿会用到。

3. 本地安装 Wrangler CLI 进行首次部署

安装 wrangler

既然有 Hexo,那必然会有 Nodejs 环境,那么,通过 npm 或者 yarn 安装 wrangler~

npm i @cloudflare/wrangler -g
# yarn global add @cloudflare/wrangler
初始化项目

进入你的 Hexo 根目录进行初始化

wrangler init --site my-static-site # 最后的名字可以改成自己喜欢的名字~

初始化之后,大概就可以看见目录中多出来的wrangler.toml文件和workers-site目录了。

修改配置

我们需要修改 wrangler.toml 来配置一下我们的项目

[site]
bucket = "./public"
entry-point = "workers-site"

最重要的是这两行,我们需要修改 bucket 的值为我们需要部署的目录,对于 Hexo 就是 ./public

同时还需要修改上面的个人信息

account_id = ""
workers_dev = true
route = "www.nekomio.com/*"
zone_id = ""

account_id 大概登录就能看见,如果你没有绑定自己的域名可以暂时不管 routezone_id

部署

这时候需要运行 wrangler config, 并输入之前我们得到的 API Token

可以通过 preview 进行预览。

wrangler preview --watch

通过 publish 进行部署

wrangler publish

这时,我们以及可以打开Cloudflare上我们的网站了。

4. 自定义 Router

我这里使用了 Sukka 给出的一个配置文件,主要是将以 index.html 结尾的请求 301 跳转到不包含 index.html 的 URL,加长了 css 的 cache 时间。
这里也放出来进行参考

import { getAssetFromKV, mapRequestToAsset } from '@cloudflare/kv-asset-handler'

addEventListener('fetch', event => {
  try {
    event.respondWith(handleEvent(event))
  } catch (e) {
    if (DEBUG) {
      return event.respondWith(
        new Response(e.message || e.toString(), {
          status: 500,
        }),
      )
    }
    event.respondWith(new Response('Internal Error', { status: 500 }))
  }
})

async function handleEvent(event) {
  const { origin, pathname: path, search } = new URL(event.request.url);
  if (path.endsWith('/index.html')) {
    return new Response(null, {
      status: 301,
        headers: {
          'Location': `${origin}${path.substring(0, path.length - 10)}${search}`,
          'Cache-Control': 'max-age=3600'
        }
    });
  }
  if (path === '/atom.xml') {
    return getAssetFromKV(event, {
      cacheControl: {
        edgeTtl: 60 * 60,
        browserTtl: 2 * 60 * 60
      }
    });
  }
  
  if (path.startsWith('/css/'))  {
    const response = await getAssetFromKV(event, {
      cacheControl: {
        edgeTtl: 365 * 24 * 60 * 60,
        browserTtl: 365 * 24 * 60 * 60
      }
    });
    // getAssetFromKV 不会添加 immutable,所以需要手动覆盖掉 Cache-Control
    response.headers.set('cache-control', `public, max-age=${365 * 24 * 60 * 60}, immutable`);
    return response;
  }
  
  const response = await getAssetFromKV(event, {
    cacheControl: {
      edgeTtl: 60 * 60,
      browserTtl: 5 * 60
    }
  });
  
  response.headers.set('X-XSS-Protection', '1; mode=block');
  return response;
}

最后,就结束了~~

这个是官方给出的免费的限制,流量不大的话还是够用的。如果文章数量比较多的话,大概每天部署的次数比较有限。

  • Workers 功能

    • 包括 100,000 个请求/天 (UTC+0)
    • 每个请求最多占用 10 毫秒 CPU 时间
    • 第一个请求后的延迟最低
  • 键值存储功能

    • 每天 100,000 次读取操作
    • 每天 1,000 次写入、删除、列出操作
本文作者 : NekoMio
知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。
本文链接 : https://www.nekomio.com/2020/12/17/156/
下一篇