Vercel, Cloudflare, fly.io 我的云服务三剑客

标签: vercel cloudflare fly | 发表时间:2022-06-30 08:00 | 作者:
出处:https://limboy.me
Update: 在排查 Cloudflare 缓存命中率低的问题时,发现没有一台 Server 实在是不方便。比如想看下哪些请求透过了 CF,直接到了源站,如果内容 deploy 在 Vercel 上,就看不到这些请求日志。所以虽然 Vercel 很方便,用起来也很舒服,但一些能力上的缺失在某些场景下还是挺难受的,因此还是转向了 VPS(Vultr) + Cloudflare 的传统配搭。

自己时不时地会写一些网页(如 拼音猜成语)或部署一些静态页面(如这个博客),或者托管一些资源文件(如播客音频),这就涉及到线上服务的选择。目前来看 Vercel, Cloudflarefly.io 能较好地满足我的大部分需求。

DNS 管理 & CDN

这部分交由 Cloudflare(简称 CF) 来管理。在 CF 后台新建 Site 后,在域名注册商处,将 Name Server 设置为 Cloudflare 的 Name Server 就行了,就是下面这两个

  leah.ns.cloudflare.com
wesley.ns.cloudflare.com
CF 也提供域名注册服务,如果是新的域名,可以直接在 CF 注册,管理起来更方便,价格也不贵。

因为 CF 的主营业务还是 CDN,所以提供了一个很方便的功能:代理网站静态资源,也就是这朵橘色的云(Proxy Status)。

开启了之后,domain 下的资源(如图片,CSS 等)会被 CF 缓存到 CDN,用户访问这些资源时,就直接访问 CDN 上的缓存,不会到自己的服务器,可以节省很多流量。而且 CF 的 CDN 流量是免费的,所以不用担心哪天站点访问量剧增带来的流量费用。

PS: 开启「自动代理」后,如果出现直接访问 OK,但通过 CF 访问就会出现问题的现象,可以把 SSL/TLS 设置为「灵活」。

如果发现 CF 访问统计中,有很多的流量没有缓存,可能是跟 Vercel 返回的 Cache-Control 有关,比如 Cache-Control: public, max-age=0, must-revalidate,表示不缓存,这样 CF 也要遵从这个约定,当用户访问资源文件时,如果浏览器本地没有缓存,或者已经过期,每次请求到了 CF 这里后,CF 也还是要到源站(Vercel)去取。这样不仅没有让 CF 发挥 CDN 的优势,反而因为要回源,导致请求变慢。

好在 Vercel 支持自定义 header 规则(更多的规则可以看 这里),我们可以在 vercel.json 里重新定义 Cache-Control

  {
  "headers": [
    {
      "source": "/(.*).(jpe?g|png|ico|webp|svg|mp4|gif|xml|ttf|woff2?)",
      "headers": [
        {
          "key": "Cache-Control",
          "value": "public, max-age=31536000, immutable"
        }
      ]
    }
  ]
}

这样当访问特定后缀的资源文件时,就会返回我们定义的 Cache-Control,CF 会根据新的 Cache-Control 策略来缓存,比如这里设置了永不过期。

PS: Vercel 有个 页面专门讨论了与 CF 并存的问题,想进一步了解的话,可以看一下。

PPS: 这么做确实可以达到效果,但 CF 后台显示缓存命中率只有不到 10%,需要进一步排查。

CF 默认不缓存 HTML 文件,如果要设置更加灵活的缓存策略,可以通过 Page Rules 来完成,免费用户可以设置 3 个规则,基本够用了。

还有一个好处是,可以在 CF 的后台看到页面的访问统计,虽然比较简单(能看到访问次数,但无法精确到页面,或者来源),但不需要额外的 JS 代码,不用依赖第三方访问统计服务,也还不错。

CF 还可以托管一些存储服务的文件,以 Backblaze(又称 B2) 为例,对 DNS 的 CNAME 做一下映射(同样要将 Proxy 设置为 Proxied),比如将 assets.example.com 映射到 f002.backblazeb2.com,通过后台或 API 上传资源文件(如播客的音频)后会得到 B2 的 URL,将域名换一下就行了。比如将 https://f002.backblazeb2.com/a/b.mp3 替换为 https://assets.example.com/a/b.mp3,就可以使用 CF 的 CDN 服务了。

静态页面

通过 SSG(静态内容生成器)生成的博客或文档等静态资源,会部署到 Vercel 上,体验确实很不错。比如 Connect Github 后,做一些简单的配置,就能方便地 Deploy 了。push 到 main 之外的分支,可以生成 Preview 页面,确定内容正确后,再 push 到 main 分支,就上线了。这也是 Vercel 提倡的 Develop, Preview, Ship 流程。

每个月 100 G 的流量(所有 Projects 加起来)如果都走 Vercel,可能不太够,但结合 CF 就完全能 hold 住了(流量主要是一些 HTML 页面)。

如果要写一些复杂的页面或涉及到一些后端逻辑,也可以使用 Vercel 开源的 Next.js。API 会以 Serverless 的方式运行(所以不要依赖一些内存全局变量)。最近 Middleware 也 GA 了,可以在请求到达具体页面前再做一些处理(比如判断是否有特定的 Cookie,然后重定向到特定的页面)。

CF 也提供类似的服务 Cloudflare Pages,不过目前对 Vercel 还比较满意,就没考虑切换。

动态数据

如果涉及到数据库,对个人项目来说,要么在单独的 VPS 上部署,要么在 Serverless code 里通过 API 去连接 Cloud Database Service,前者有一定的维护成本,要保障 VPS、后端服务、DB Service 的正常运行,还要考虑各种运维(网络耗时、磁盘空间、CPU、内存占用等等),后者就要找一个合适的服务商,确保价格、空间、流量、使用体验等比较满意。

其实也可以有第三种选择,我选的是 fly.io,可以简单地理解为把 Docker 部署到边缘节点,让用户可以就近访问服务。fly 的免费版本提供了一定的存储空间(3GB,先创建 Volume,然后 mount 到 App 上),一些简单的项目,一个 SQLite 文件就搞定了,备份起来也很方便。更 Serious 的项目可以使用他们提供的 Postgres 数据库(支持多节点部署,读写分离)。

这样就兼具了 VPS 的灵活性,又免去了不少运维成本,又因为服务可以部署在全球的各个节点,访问速度上也比较有保障(挂了 Volume 后,就只能锁定单个区域,因为 Volume 跟 App 和 Region 绑定)。

目前只是在上面部署了一个小项目,还没有较正经地使用,不过有 RemixKent 的背书,从一些 其他的反馈来看也还可以,应该会是不错的选择。

还有一个原因是 fly.io 给我的感觉也是满酷的,比如 Rust 开发的招聘文,这是其中一段:

The premise of our hiring process is that we’re going to show you the kind of work we’re doing and then see if you enjoy actually doing it; “work-sample challenges”. Unlike a lot of places that assign “take-home problems”, our challenges are the backbone of our whole process; they’re not pre-screeners for an interview gauntlet.


这三家服务商基本覆盖了我所有的线上需求,而且只需支付很少(或者免费)的费用就能支撑足够大的访问量(Cloudflare 功不可没)。如果你也有类似的需求,或许可以考虑下。

相关 [vercel cloudflare fly] 推荐:

Vercel, Cloudflare, fly.io 我的云服务三剑客

- - Limboy
Update: 在排查 Cloudflare 缓存命中率低的问题时,发现没有一台 Server 实在是不方便. 比如想看下哪些请求透过了 CF,直接到了源站,如果内容 deploy 在 Vercel 上,就看不到这些请求日志. 所以虽然 Vercel 很方便,用起来也很舒服,但一些能力上的缺失在某些场景下还是挺难受的,因此还是转向了 VPS(Vultr) + Cloudflare 的传统配搭.

Vercel 部署 Node 服务

- - 掘金 前端
之前在写 面试常客:HTTP 缓存时,曾经就强缓存和协商缓存写过两个demo,但缓存要在服务端做,只能贴上代码,不能在网页上感受(虽然我贴了gif). 笔者的所有 demo 例子都放在 github page 上,其特点是不需要服务器即可部署静态资源,但它不具备部署服务端应用能力. 最近笔者在了解 CI/CD 方面的知识点,想起了 Vercel,就想着能否将服务端应用架在 vercel 上呢.

免费 CDN 加速服务:CloudFlare

- ArBing - 我爱水煮鱼
最近通过 MediaTemple 的后台了解到 (mt) 提供了 CloudFlare 加速服务服务,仔细看了下,CloudFlare 是一家功能非常强大的免费 CDN 免费加速服务. 什么是 CloudFlare. CloudFlare 是通过反向代理(reverse proxy)提供网站加速服务,为站长解决了 jpg/JS/CSS 这些静态文件到 CDN 上的问题,并且通过它部署在全球各大洲的缓存结点服务器(详细列表),提供高效的加速服务.

vercel是什么神仙网站? | I’M COOPER | NICE TO MEET YOU

- -
vercel是我用过的最好用的网站托管服务. vercel类似于github page,但远比github page强大,速度也快得多得多,而且将Github授权给vercel后,可以达到最优雅的发布体验,只需将代码轻轻一推,项目就自动更新部署了. vercel还支持部署serverless接口. 那代表着,其不仅仅可以部署静态网站,甚至可以部署动态网站,而这些功能,统统都是免费的,简直是白嫖党的福利啊.

[让子弹飞/火烧云DVD国语中文字幕][Let The Bullets Fly][动作喜剧片]

- 观弈道人 - 沒有水的魚
◎片  名 Let The Bullets Fly/Rang zidan fei. ◎文件格式 DVD-RMVB. ◎视频尺寸 640 x 276. ◎文件大小 1CD 566MB. ◎导  演 姜文 Wen Jiang. ◎主  演 姜文 Wen Jiang…张牧之.       周润发 Yun-Fat Chow…黄四郎.

Vercel 与 Next.js:开源全明星团队背后的商业逻辑 - 掘金

- -
Vercel 是由 Guillermo Rauch 创立的云服务公司,以拥有数个知名开源项目为大众所知,随着 2021 年在融资、招聘、产品等方面的高调亮相,Vercel 的商业逻辑也愈发清晰. 现代前端框架的代表之一 React 于 2013 年开源,与同期其他前端框架一起推动前后端分离的开发模式直至现在.

CloudFlare获2000万美元投资,让网络更快更安全

- pestwave - 36氪
网络安全公司CloudFlare已经完成2000万美元的B轮融资. 领投方为New Enterprise Associates. CloudFlare将用这笔资金用于基础设施投入和团队扩充. CloudFlare开发了一款云端软件程序,可以帮助网站免受恶意软件和DoS攻击的威胁. CloudFlare称其产品可以部署在任何网站上,站长所要做的就是简单地修改一下DNS设置.

SHA-1即将淘汰,但Facebook和CloudFlare将提供“退路”

- - Solidot
2016年之后,主流浏览器将停止支持使用SHA-1哈希算法签名的证书. 但仍然有大量网站的数字证书使用这种弱加密算法签名,仍然有很多人使用不支持SHA256的过时浏览器,社交巨人Facebook和云服务公司CloudFlare为此宣布了受争议的“退路计划”,让这些网站和用户继续使用弱加密连接,他们的观点是有加密总比没有加密好.

CloudFlare 发布一周年,为所有用户提供 IPv6 网关支持

- Blaker - 36氪
CloudFlare 发布于一年前的今天. 为网站提供加速和免受恶意软件、DDOS攻击威胁的服务. 在一年内,该公司已从几乎没有流量成长为(上个月)PV 达 150 亿、独立访客达 3.5 亿的服务. 今天,为庆祝 CloudFlare 的生日,开发团队认为应该为用户送上一份开创性的礼物. CloudFlare 决定着手解决互联网最大的挑战.