Xhair迁移 - 从Vercel到自部署
Xhair上线后收到一些访问速度的反馈，并且免费额度也有不少限制，因此决定自部署
背景
在25年6月我花了一周时间开发上线了xhair，考虑到开发体验与效率，我将其直接部署在Vercel上，目前日UV在一百左右。 因为一些问题，我决定将应用迁移至香港的云服务器上
面临的问题
国内连接不畅通
Vercel部署后域名存在DNS污染，延迟高，部分用户无法访问。
日志显示访问被新加坡和美国的服务器处理，而我接近9成的用户来自国内，显然用户体验不佳。
用户反馈集中在页面打开慢和偶发访问失败，问题主要出现在国内网络环境。
免费额度限制
流量平稳后，每天用户约一百人，这不是一个很高的流量，但我仍收到很多条Vercel的告警，提示我即将超过免费的额度。
- Image Optimization
Next.JS应用中直接使用img标签渲染图片会被提示使用Next/Image替代
然而Vercel提供的额度仅有5K，一周后就收到了警告，我不得不修改代码停止使用
- Link Prefetch
Next.JS中跳转链接使用Link组件，会默认具备prefetch的能力。
在我的页面中可能会有几十个卡片，每个卡片都支持跳转，这意味着每次访问会有额外的几十次请求。
卡片列表中的大量跳转链接会触发预取，请求数会随着列表规模快速增加。
很快Edge Request额度也不够了，我只得在每一条跳转链接上手动设置prefecth=false
<Link href={`/players/${player.name}`} prefetch={false}>
{player.name}
</Link>
- 其他
我还遇到了其他限制如fluid-compute等。使用Next.JS是为了更快的效率，我不希望为了各种限制去放弃框架特性并调整代码
难以舍弃的开发体验
虽然有遇到问题，但难以否认使用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以docker容器管理多个服务，我的Nextjs应用在构建时4G的内存不太够用，因此我设置了swap，也可以将镜像构建迁移至Github Action，但配置略麻烦。
可参考 https://github.com/coollabsio/coolify/discussions/2754
链接Github仓库后push代码后自动部署，包括一些基础功能如环境变量设置、域名配置等，大致体验可对齐Vercel。
Umami
替代一下Vercel的Analytics，简洁够用。
结果
虽然也会面临服务器厂商跑路和崩溃的风险，核心还是想要提升访问的速度以及摆脱vercel额度的限制
使用测速工具对比首页访问速度，国内访问时间9.7s -> 1.8s 降低了81.4%
迁移前，国内访问首页加载时间接近 10 秒。
迁移到香港服务器后，首页加载时间下降到 2 秒以内。