如何使用HonoJS和Cloudflare Worker提供静态页面服务？

PubDate

2024-02-25

Author

王福强

假如有静态页面需要对外提供服务， 那么， Cloudflare Pages或者Github Pages无疑是当下最为合适的方案。较为传统的做法是走nginx（或者caddyserver），使用自己熟悉的语言用HTTP相关的库（Library）当然也可以，只不过，都不如前面这些方案那样是现成儿的工具。

假如真的想要通过Cloudflare Worker提供静态网页服务，那么，就相当于用Javascript写了一个服务器端的程序来加载文件并作为响应（Response）返回给客户端浏览器，原理并不复杂，但静态文件放哪里是一个问题。 好在，这个问题Cloudflare Worker提供了支持，它会把静态页面的内容放到Cloudflare KV里面去，只要我们在wrangler.toml配置文件中指定了使用那个Cloudflare KV就可以了。

所以，要通过Cloudflare Worker提供静态页面访问服务，第一步是先在wrangler.toml配置文件中添加：

[site]
bucket = "./assets"

这里的bucket指定的值是项目下的某个目录，这个目录的内容会在Worker部署到Cloudflare之后存放到某个名字类似于__{你的worker名}_sites_assets的KV下面。

配置完从哪里加载和读取静态文件内容之后，我们就可以开始编写HonoJS代码完成静态文件内容的服务了：

import { Hono } from 'hono'
import { serveStatic } from 'hono/cloudflare-workers'

const app = new Hono()
...
app.get("/*", serveStatic({root: "./public"}))

这样， 所有的请求都会映射到./assets/public目录， 具体映射目标目录可以使用root参数指定。

另外，假如想要重定向/请求到/index.html，可以进一步为serveStatic提供rewriteRequestPath参数对请求路径进行重写，比如：

app.get("/*", serveStatic({
    root: "./public",
    rewriteRequestPath: (path) => {
        if (path === "/") {
            return "/index.html"
        } else {
            return path;
        }
    }
}))