想折腾个人副业做小产品，是不是必须买云服务器？每个月是不是要一笔不小的开销？
我自己断断续续折腾副业五个多月，算下来，云服务一分钱没花，唯一开销就6块钱，只买了一个域名。前端、后端、数据库、存图片的存储全部用 Vercel 和 Cloudflare 免费版。
先把我实际用到的各个组件分工讲清楚，避免搞混：
- Vercel：主要放前端网页，Vue、Next.js 这类。Next.js 在Vercel上面适配最好，开箱体验顺滑。
- Cloudflare Pages ：同样部署前端，适合静态页面、Astro、普通Vue项目；免费带宽无上限是它最大优势，但Next.js部分高级特性需要额外适配才能跑起来。
- Cloudflare Workers：跑后端接口，写Express这类API服务，不用管服务器，写完直接部署到全球边缘节点。
- D1：Cloudflare 自带的 SQLite 数据库，存业务表，比如任务、用户这类结构化业务数据。
- R2 ：存图片、上传的文件，好处是文件对外下载不收流出流量费。
区分两类存储：D1用来存表格类业务数据；R2专门放图片、附件这类二进制文件。
- K2、Basin 这两个组件我就直接没碰。K2是消息队列，Basin是面向海量数据的数据湖；K2还需要付费套餐才能开启，对于我现阶段的小副业MVP项目来说完全用不上，没必要花时间去研究。
简单对比下两个前端平台怎么选： Next.js项目优先Vercel，原生适配，踩坑少；普通静态Vue、H5页面，Cloudflare Pages会更香，不用担心流量爆了产生高额账单。
前端部署：Cloudflare Pages实操
Cloudflare Pages就是用来托管前端代码的，先进入Pages功能界面。 
截图说明：这是Cloudflare侧边栏「Workers & Pages」的入口，点进去就可以新建Pages前端项目。
接下来关联GitHub仓库，选择我们存放前端代码的仓库。 
截图说明：授权GitHub之后，页面会列出你的所有仓库，选中需要部署的前端仓库。
我第一次部署完，页面直接报错打不开。 
截图说明：部署构建成功，但访问页面404/报错，绝大多数情况是构建命令、输出文件夹配置不对。
找到项目设置，修改部署配置，调整构建命令、构建输出目录。 
截图说明：在这里填写框架对应的构建命令，以及打包之后输出资源的文件夹，比如dist。
保存配置，触发重新打包。 
截图说明：提交代码或者手动触发，Pages会重新执行一次构建流程。
构建状态变成绿色，代表部署成功，可以访问默认域名。
部署完成之后，就可以绑定自己的子域名。举个例子，根域名是example.com，主站www.example.com交给Vercel，我新建子域名vue.example.com分配给Cloudflare Pages。 
截图说明：Pages的自定义域名配置页面，填入自己已经托管在Cloudflare的子域名，自动生成DNS解析记录。配置完成后就可以用自己的域名访问网页。
后端：Workers + D1，踩过不少真实的坑
后端这块踩坑是最多的。我本地开发用better‑sqlite3做SQLite，本地跑一切正常，代码一推到线上Worker，接口直接500。 
截图说明：Workers项目的管理界面，我们在这里上传express后端代码、管理绑定资源。
线上接口返回500报错页面。 
截图说明：浏览器直接访问接口，返回500内部错误，但是这个页面看不出具体是什么问题，需要去日志里排查。
Worker也可以绑定自定义子域名，我把api子域名绑定到Worker服务。 
截图说明：Workers自定义域名配置，填入api子域名，域名托管在当前Cloudflare账号，就可以绑定成功。
线上出问题，就要来到Observability日志页面查看事件日志，这里能看到代码打印的console日志和异常堆栈。 
截图说明：Events事件日志列表，每一条请求都会记录在这里，可以过滤error级别日志，拿到报错堆栈。
监控指标总览页面，这里统计Worker底层运行指标。 
截图说明：这里只统计Worker运行时底层崩溃错误；业务代码返回500不会计入这里的Errors指标，不要被0Errors迷惑。
D1数据库监控面板，可以直观看到数据库查询次数、读写行数、存储空间、数据表数量、查询延迟。 
截图说明：D1数据库概览页，如果发现数据表数量不对，可以进到Console标签页直接执行SQL语句建表、查数据。
翻看线上日志堆栈，才搞懂原因：better‑sqlite3依赖操作系统原生二进制文件，Worker环境里面是跑不了的。 必须写代码做环境区分，线上环境只用绑定好的D1实例，只有本地开发的时候才去加载本地sqlite文件。
线上排错这里我也踩过认知误区：Worker总览页面的Errors等于0，不代表业务接口没有出错。 这个统计指标，只统计Worker底层运行崩溃的情况。像Express捕获异常之后主动返回500，属于业务层面错误，不会计入这个统计。 这种情况下，日志也不会自动打印错误堆栈，需要自己写全局错误捕获中间件，手动把error对象打印出来，才能在Observability Events里面看到真实报错信息。
日常排查的习惯：接口出问题，优先看Events日志，过滤error级别日志。本地优先用wrangler dev调试，很多问题本地就可以复现，比线上看日志省事很多。
配套存储
R2对象存储
对标阿里云OSS，适合存放图片、用户上传附件，它最大的优势是对外流出流量不计费。 
截图说明：R2存储桶列表页面，在这里新建存储桶，之后就可以在Worker/Pages里面绑定R2，实现文件上传读取。
K2 Streams、Basin
这两个我现阶段直接没有使用。 K2是消息队列，Basin属于数据湖，面向海量数据分析场景，而且K2还需要付费套餐。对于小副业MVP来说，暂时接触不到，不用花精力研究。
域名配置实操，CNAME域名别名
CNAME不等于网页跳转，它只是一条域名别名解析记录。记录那里云朵图标打开变成橙色，代表流量会先走 Cloudflare，再转发到后端服务；如果是灰色，就仅仅做域名解析，流量直接访问源站，CDN、防护全部不会生效。还有一个小细节，根域名是不能直接配置CNAME。
假设：
- 我的域名：
my-site.com（托管在 Cloudflare） - 第三方平台分配的目标地址：
target.platform-host.com（比如 Vercel 的cname.vercel‑dns.com） 需求：希望访问web.my-site.com，实际打开部署在 Vercel 上的网站
截图说明：DNS解析记录配置界面，添加CNAME记录，注意代理云朵设置为橙色Proxied。SSL/TLS加密模式，记得设置成
Full(strict)，不然容易出现HTTPS重定向报错。
还有一个关键点，Cloudflare这边配置完CNAME不算完事，Vercel项目里面也要添加这个自定义域名做校验，不然网站依旧打不开。
我自己平时线上排查的一套流程
踩的问题多了，慢慢整理出来一套自己的排查顺序：
- 如果前端页面异常，打开Vercel Observability面板，查看CDN、Serverless函数有没有报错尖峰。
截图说明：Vercel项目总览界面，在这里进入Observability监控。
截图说明：Vercel Observability监控图表，看CDN、Functions的报错曲线，定位前端问题。
- 如果是后端接口返回500：
- 不要被Worker总览页面的Errors=0迷惑；
- 切换到Observability的Events页面，过滤error，过滤POST请求；
- 如果看不到报错堆栈，检查自己有没有写全局错误捕获，打印err对象；
- 留意新版本流量是否还没切过来，用接口输出版本号的方式确认当前实际运行的代码。
- 如果怀疑数据库相关问题，打开D1控制台，查看数据表数量，在Console执行SQL检查表是否正常。
关于免费额度需要留意的地方
Vercel、Cloudflare这套免费方案可以支撑个人副业想法验证，但各个组件都有对应的免费额度上限。 D1、R2、Workers调用次数都有限制，小流量的MVP项目是够用的。
可以直接抄作业的MVP架构
给想做副业的朋友一个现成参考：
- 前端网页：
- Next.js项目优先Vercel；普通静态Vue页面可以选Cloudflare Pages
- 后端接口：Cloudflare Workers + Express
- 业务数据库：D1
- 图片附件：R2
- 域名：自行购买域名，托管到Cloudflare
整体开销，就只有域名的费用。适合做小工具、个人SaaS，快速验证副业想法。
结尾
不少人想尝试做个人副业，还没有动手，就会担心服务器成本太高，不敢开始。
就我自己体验下来，想法验证阶段，完全没必要一开始就购买云服务器。Vercel+Cloudflare这套免费栈，足够把完整产品跑上线。
当然有更多好用的功能或者其他产品也欢迎在评论区共同分享！