如何使用HonoJS和Cloudflare Worker提供静态页面服务?
假如有静态页面需要对外提供服务, 那么, 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; } }}))