如何用Cloudflare Worker处理静态网站的动态请求？

PubDate

2024-02-24

Author

王福强

我们可以使用Cloudflare Worker的route pattern来定义和拦截到指定域名和路径的请求，然后进行处理。

比如，https://afoo.me是静态站，所有内容都是编译成静态HTML再发布的，所以，没有处理动态请求的能力。 假设我想要在https://afoo.me/api/这个路径以及其子路径上添加各种动态功能，应该怎么做呢？

提示

假设使用Cloudflare Pages来部署静态站的话， Pages Function特性其实就是用来给Cloudflare Pages增加动态请求处理能力的。

传统方式是在nginx或者caddyserver等服务上配置路有规则，但我们想要使用HonoJS开发一个Cloudflare Worker来做这个事情。

关键步骤分三步（跟把大象放冰箱分几步一个道理🤪）：

创建基于HonoJS的Cloudflare Worker项目

使用npm create hono@latest {{project_name}}创建即可，根据提示输入必要信息即可。

配置route pattern

在wrangler.toml中添加route pattern配置：

routes = [
    { pattern = "afoo.me/api/*", zone_name = "afoo.me" },
]

其中:

1. pattern指定的是拦截路径的表达式，pattern = "afoo.me/api/*"表示，当前Worker部署之后，将拦截并处理所有到https://afoo.me/api/这个路径以及其子路径上的请求。
2. zone_name或者zone_id是你/我在Cloudflare上已有配置的主域名。

编写动态请求的处理逻辑

这里就是HonoJS发挥所长的地方了，比如，我们可以新增加一个二维码生成API：

import { Hono } from 'hono'
import {bearerAuth} from 'hono/bearer-auth'
import {cors} from 'hono/cors'
import {renderSVG} from 'uqr'

// AccessToken based bearer authorization
const authMiddleware = async (c, next) => {
    let tokenValue = await c.env.credentials.get("K_TOKEN")
    const bearer = bearerAuth({token: tokenValue})
    await bearer(c, next)
}

// this app catches all requests coming into https://afoo.me/api/*
const app = new Hono().basePath('/api')

app.onError((e,c)=>{
  if(e.status){
    return c.json({status: e.status, message: e.message}, e.status)
  }else{
    throw e
  }
})

app.use('*', cors())
app.use("*", authMiddleware)

app.get("/qr", c => {
    let value = c.req.query("code")
    if(!value || value.trim().length === 0) {
        value = 'https://afoo.me'
    }
    const svg = renderSVG(value.trim(), {
        whiteColor: 'white',
        blackColor: "orange"
    })
    return c.json({result: svg})
})

export default app

因为是API服务，所以，所有响应（Response）我们都规范化为json结果，至于二维码的生成，我们使用的是uqr这个库，使用前需要安装依赖：npm install uqr，类似的库很多，可以根据自己喜好选择，这里只供参考。

提示

因为我们拦截处理的是域名下面的路径，所以，为了简化HonoJS的路由设置，我们增加了一个basePath的设置：

const app = new Hono().basePath('/api')

这既解决了路径匹配的问题，也避免了在代码中频繁冗余的编写/api前缀，比如/api/qr, /api/xyz..， 毕竟，能少输入一个字符就少输入一个嘛～