巧用 Vercel 路由

警告

Vercel 中 Fair Use Policy 里面明确说明：

Proxies and VPNs 和 Media hosting for hot-linking 为 Never Fair Use 范畴，请不要尝试在任何场合这样做，本人不对该行为担负任何有关责任。
也就是说Vercel 只可以用 Rewrite 功能来做非代理其他网站性质的流量。

本文只讨论使用 Vercel 路由来搭建 Serverless 服务的方式。

前言

Vercel hobby 版本每月有免费 100G 的流量，拥有 AWS 香港、日本等国内相对优质的路由，相较于 Cloudflare 减速 CDN 拥有更稳定的速度。但是 Vercel 自带的 Serverless 框架冷启动时间较长，一段事件后打开网页会有近 500ms 的启动延迟，而且只能在单地区部署 Serverless 框架，这些延迟会显著影响首次打开体验。而在国内打开速度相对较慢的 Cloudflare Workers 拥有 0ms Worldwide Coldboot Time，这使得解决启动延迟变成了可能，那就是用 Vercel 路由 + Cloudflare Workers 渲染界面。

Vercel 端

Rewrite 分流

为了在 Cloudflare 端减少部分工作量，我选择通过 Vercel 进行分流，把异常的域名请求跳转至个人主页并把可以不通过 Cloudflare 的流量直接通过 Vercel 连接。在 Vercel 新增的 Has 选项中，我们可以应对流量进行轻松分流。

"rewrites": [{
  "source": "/(.*)",
  "destination": "https://status.charliez0.workers.dev/$1",
  "has": [{
    "type": "header",
    "key": "host",
    "value": "(?:blacklist\\-|alt\\-|)status\\.charliez0(|sp)\\.(?:cf|ga|gq|ml|tk|vercel\\.app)"
  }]
}],
"redirects": [{
  "source": "/(.*)",
  "destination": "https://charliez0.js.org",
  "permanent": true,
  "has": [{
    "type": "header",
    "key": "host",
    "value": "^(?!((blacklist\\-|alt\\-|)status\\.charliez0(|sp)\\.(cf|ga|gq|ml|tk|vercel\\.app))).*$"
  }]
}]

我们可以看出通过巧妙地设置正则表达式可以实现异常流量分流，使得项目主页的截屏界面与个人主页相同。

HSTS + CORS 配置

使用 Headers 选项即可，此处只展示常用的 HSTS 配置

"headers": [{
  "source": "/(.*)",
  "headers": [{
    "key": "strict-transport-security",
    "value": "max-age=63072000; includeSubDomains; preload"
  }]
}]

Cloudflare 端

稍后补坑。

小结

这次两个服务的协同工作让我从实践中体验到了多服务结合的力量，将来在我遇到问题的时候也会优先考虑多服务的结合，毕竟可以取各家免费之长嘛～