skip to content
pureink

Xhair迁移 - 从Vercel到自部署

/ 4 min read

View more blogs with the tag 技术
目录

背景

在25年6月我花了一周时间开发上线了xhair，考虑到开发体验与效率，我将其直接部署在Vercel上，目前日UV在一百左右。 因为一些问题，我决定将应用迁移至香港的云服务器上

面临的问题

国内连接不畅通

Vercel部署后域名存在DNS污染，延迟高，部分用户无法访问。

日志显示访问被新加坡和美国的服务器处理，而我接近9成的用户来自国内，显然用户体验不佳。

feedback

免费额度限制

流量平稳后，每天用户约一百人，这不是一个很高的流量，但我仍收到很多条Vercel的告警，提示我即将超过免费的额度。

  1. Image Optimization

Next.JS应用中直接使用img标签渲染图片会被提示使用Next/Image替代 image-lint 然而Vercel提供的额度仅有5K，一周后就收到了警告，我不得不修改代码停止使用 vercel-image-usage

  1. Link Prefetch

Next.JS中跳转链接使用Link组件，会默认具备prefetch的能力。

在我的页面中可能会有几十个卡片，每个卡片都支持跳转，这意味着每次访问会有额外的几十次请求。 page-pros 很快Edge Request额度也不够了，我只得在每一条跳转链接上手动设置prefecth=false

<Link href={`/players/${player.name}`} prefetch={false}>
  {player.name}
</Link>
request-usage
  1. 其他

我还遇到了其他限制如fluid-compute等。使用Next.JS是为了更快的效率，我不希望为了各种限制去放弃框架特性并调整代码 fluid-usage

难以舍弃的开发体验

虽然有遇到问题，但难以否认使用Vercel部署很方便，我自21年至今部署了几十个项目，平台的使用体验很棒。

也可以轻松接入Analytics和Speed Insight等能力

替代方案

香港服务器

香港服务器可以满足低延迟和免备案这关键的两点，我购买了一台小厂的4C/4G/20M带宽的服务器，2年600元。 在北京直连延迟约40ms

Coolify

An open-source & self-hostable Heroku / Netlify / Vercel alternative.

首先需要部署coolify，也可以使用其提供的coolify cloud，5刀一个月，然后连接服务器就可以部署了，我就都用的一台服务器。 coolify-web

coolify以docker容器管理多个服务，我的Nextjs应用在构建时4G的内存不太够用，因此我设置了swap，也可以将镜像构建迁移至Github Action，但配置略麻烦。

可参考 https://github.com/coollabsio/coolify/discussions/2754

链接Github仓库后push代码后自动部署，包括一些基础功能如环境变量设置、域名配置等，大致体验可对齐Vercel。

coolify-dashboard

Umami

替代一下Vercel的Analytics，简洁够用。 umami

结果

虽然也会面临服务器厂商跑路和崩溃的风险，核心还是想要提升访问的速度以及摆脱vercel额度的限制

使用测速工具对比首页访问速度，国内访问时间9.7s -> 1.8s 降低了81.4%

vercel-speed server-speed