上个月收到 Vercel 账单,25/月)。
我的产品才 50 个注册用户,0 付费。
算了一下,如果按这个"标准配置"走下去:
- Vercel Pro: $20/月
- Supabase Pro: $25/月
- 域名 + CDN 杂费: ~$5/月
- 合计: 600
这还是在没有任何收入的情况下。
后来我花了一个周末,把整个架构迁移到了"自托管方案"。现在每月成本:$4(一台 Hetzner VPS)。
这篇文章记录我是怎么做的,以及踩过的坑。
第一步:买一台 VPS(不是买云服务)
为什么不用 Vercel/Netlify?
Vercel 的免费版够用,但一旦你需要:
- 自定义域名的 HTTPS
- 超过 100GB/月 的带宽
- 环境变量超过 4KB
就得升级到 Pro (40/月。
我的选择:CloudCone 洛杉矶(CN2 线路)
为什么选 CloudCone 而不是 Vultr/Hetzner?
- 价格极低:年付 1.25
- CN2 GIA 线路:专门优化了到中国的路由,电信/联通晚高峰稳定
- 洛杉矶机房:虽然不在亚洲,但 CN2 线路让延迟比普通欧洲机房还低
配置推荐:
方案 1:极致省钱版 ⭐ 推荐新手
- 价格:$15/年(约 ¥108/年)
- 1 vCPU
- 768MB RAM
- 10GB SSD
- 1TB 流量/月
- 适合:纯前端项目 + Pocketbase
方案 2:全栈舒适版
- 价格:$30/年(约 ¥216/年)
- 2 vCPU
- 2GB RAM
- 30GB SSD
- 3TB 流量/月
- 适合:Next.js + Postgres + Redis
实测:我用的是 $30/年 方案,跑了 2 个 Next.js 项目 + Pocketbase,CPU 占用率 < 20%。
操作步骤:
- 去 CloudCone 注册(支持支付宝/PayPal/信用卡)
- 选择 Los Angeles(洛杉矶)机房
- 镜像选 Ubuntu 24.04
- SSH Key 上传你的公钥(
~/.ssh/id_rsa.pub) - 点击 Deploy,1 分钟后拿到 IP
# SSH 登录
ssh root@your-server-ip
国内访问测试(我的实测数据):
# 电信(CN2 GIA):150ms
# 联通(CN2):160ms
# 移动:180ms
CN2 是什么? CN2 (ChinaNet Next Carrying Network) 是中国电信的高质量骨干网,专门优化了国际出口。走 CN2 线路的 VPS,即使在洛杉矶,延迟也比普通欧洲机房(200-300ms)低很多,而且晚高峰不丢包。
第二步:一键安装 Coolify(自己的 Vercel)
什么是 Coolify?
Coolify 是一个开源的 PaaS 平台,给你提供和 Vercel 一样的体验:
- Git Push 自动部署
- 自动 HTTPS 证书
- 环境变量管理
- 一键部署数据库(Postgres/MySQL/Redis)
安装(只需一行命令)
curl -fsSL https://cdn.coollabs.io/coolify/install.sh | bash
等 3-5 分钟,安装完成后访问 http://your-server-ip:8000。
初始化配置:
- 设置管理员邮箱和密码
- 配置域名(比如
coolify.yourdomain.com) - Coolify 会自动申请 Let's Encrypt 证书
部署第一个应用
- 点击 "New Resource" → "Public Repository"
- 填入你的 GitHub 仓库地址(比如
https://github.com/yourusername/your-nextjs-app) - 选择分支(main)
- Coolify 自动检测到是 Next.js,配置好构建命令
- 点击 Deploy
第一次部署大概 2-3 分钟。部署成功后,Coolify 会给你一个临时域名,比如 https://abc123.coolify.app。
第三步:换掉 Supabase,用 Pocketbase
为什么不继续用 Supabase?
Supabase 很强大,但对于早期项目来说:
- 太重了:完整的 Supabase 自托管需要跑 10+ 个 Docker 容器,吃掉 2GB+ 内存
- 配置复杂:光是配置 Postgres 的 Row Level Security 就得看半天文档
Pocketbase 的优势
Pocketbase 是一个 15MB 的单文件,包含了:
- SQLite 数据库(支持实时订阅)
- 用户认证(邮箱/OAuth)
- 文件存储
- 管理后台
在 Coolify 上部署 Pocketbase
- 在 Coolify 点击 "New Resource" → "Docker Image"
- 镜像填
ghcr.io/muchobien/pocketbase:latest - 端口映射:
8090:8090 - 挂载数据卷:
/pb_data→/data(持久化数据) - 点击 Deploy
部署完成后,访问 http://your-server-ip:8090/_/ 进入管理后台。
前端接入 Pocketbase
// lib/pocketbase.ts
import PocketBase from 'pocketbase';
export const pb = new PocketBase('https://pb.yourdomain.com');
// 用户注册
async function signUp(email: string, password: string) {
const user = await pb.collection('users').create({
email,
password,
passwordConfirm: password,
});
return user;
}
// 获取文章列表(自动实时更新)
async function getPosts() {
const posts = await pb.collection('posts').getFullList({
sort: '-created',
});
return posts;
}
实测性能:
- 1000 条记录的查询:< 10ms
- 支持并发 100+ 连接(在 4GB 内存的 VPS 上)
第四步:UI 组件不花钱
别买 Tailwind UI 了
Tailwind UI 确实好看,但 $299 对于还没赚到钱的项目来说太贵了。
我的免费方案
基础组件:Shadcn/ui
- 不是 npm 包,是直接复制代码到你的项目
- 基于 Radix UI(无障碍性好)
- 完全可定制
高级动效:Magic UI
- 炫酷的动画组件(比如打字机效果、粒子背景)
- 同样是复制粘贴
图标:Lucide
- 免费、开源
- 比 Heroicons 更全
安装示例
# 初始化 Shadcn
npx shadcn@latest init
# 添加按钮组件
npx shadcn@latest add button
# 添加表单组件
npx shadcn@latest add form
所有代码都在 components/ui/ 目录下,你可以随意修改。
成本对比:一年能省多少钱?
| 项目 | Vercel 方案 | 自托管方案 |
|---|---|---|
| 前端托管 | $20/月 | $0(包含在 VPS) |
| 数据库 | $25/月 | $0(Pocketbase) |
| VPS | - | $30/年(CloudCone) |
| 域名 | $12/年 | $12/年 |
| 年总成本 | $552 | $42 |
节省:$510/年(约 ¥3672)
如果你选择 CloudCone 的 27(约 ¥195),节省 $525/年。
什么时候该"毕业"?
这套方案不是永久的。当你的产品达到以下情况时,建议切换回托管服务:
-
用户量 > 10,000
SQLite 开始吃力,考虑迁移到 Postgres(可以继续自托管,或者用 Supabase) -
团队 > 3 人
自己维护服务器的时间成本 > $20/月,不如用 Vercel -
需要全球 CDN
Cloudflare Pages(免费)或者 Vercel 的 Edge Network -
有收入了
比如月收入 > 50/月的托管费用完全可以接受
我踩过的坑
1. 忘记配置防火墙
刚装完 Coolify,服务器就被扫了一遍。记得配置 UFW:
ufw allow 22 # SSH
ufw allow 80 # HTTP
ufw allow 443 # HTTPS
ufw enable
2. Pocketbase 数据丢失
第一次部署时没挂载数据卷,重启容器后数据全没了。一定要配置持久化存储。
3. 域名解析太慢
用了国内域名商的 DNS,解析要 10 分钟。后来换成 Cloudflare DNS,秒生效。
总结
这套方案适合:
- 还在验证 idea 的独立开发者
- 预算有限的学生/业余项目
- 想学习 DevOps 的前端工程师
- 国内用户(CloudCone CN2 线路优化)
不适合:
- 需要 99.99% 可用性的企业应用
- 不想碰命令行的人
- 已经有稳定收入的成熟产品
我现在的项目跑了 3 个月,除了偶尔 apt upgrade 更新一下系统,基本零维护。
每年 $30(约 ¥216),换来的是完全的掌控感。