夜雨聆风
大家好，我是 AI 淇橦学。
前两篇聊了墨语（摸鱼）的功能和开发踩坑。今天聊最后一个环节，部署上线。
这个环节踩的坑，比开发还多。
我之前有个错觉，代码在本地跑得好好的，部署到服务器就算完成。后来发现，真正的上线是从第一个 502、第一个字体加载失败、第一个手机端打不开开始的。
这一篇，咱从买服务器讲起，一路讲到手机能正常访问。
一、买服务器，一个决定坑了我一路
我选的是腾讯云轻量服务器。
买服务器的时候，因为需要配置 OpenClaw，选了新加坡区域。当时只想着那个需求，完全没想到一个问题，我的用户在国内。
这个决定导致了一连串的问题。
国内没有 VPN 的情况下，访问新加坡服务器的速度非常慢。字体文件大，跨洋加载更慢。有时候字体根本加载不出来，手写效果直接退回系统默认字体，一秒崩掉。
如果你的用户在国内，服务器一定要选国内区域。哪怕你个人有其他需求需要海外节点，产品服务器应该是国内优先。
这一个决策失误，后面花了我好几天来补救。
实用要点：服务器区域怎么选
用户在国内 → 选国内区域（北京/上海/广州），延迟通常 20-50ms
用户在海外 → 选对应区域（新加坡/东京/美西）
不要因为个人需求（比如访问某个海外服务）把产品服务器放到海外，用户访问速度是第一优先级
新手优先选轻量应用服务器，够用且便宜，够用了再升级
二、云控制台，选项多到让人迷路
买完服务器，登录腾讯云控制台。
第一感觉就是，选项太多了。
CDN、域名、DNS、SSL 证书、防火墙、安全组、对象存储，每个菜单点进去又是新的子菜单，每个子菜单又有新的配置项。我完全不知道哪些是我需要的，哪些跟我无关。
我相信第一次接触云服务的人都有这个感受。这些控制台是给专业运维设计的，给普通人用就是一场迷路。
后端服务、静态文件、Nginx 配置，这些都是通过和 AI 交流，让它教我做的。AI 告诉我改哪个文件、加哪段配置。但问题是，文件在哪？怎么改？改完怎么让它生效？改错了怎么回退？
这些"显而易见"的步骤，对小白来说每一步都是墙。
印象最深的一次搞了半天。而且不止一次，很多次都是一样的模式，不熟悉流程和界面，不同的问题反复出现。问 AI、照着做、报错、再问、再试。
实用要点：小项目只需要关注这几个云服务
第一次进云控制台会被几十个服务吓到，但一个小项目真正用到的就这几个：
服务 干什么 什么时候用 云服务器（轻量/CVM） 跑代码 第一件事就买 域名 + DNS 让别人通过网址访问 买了服务器就配 SSL 证书 开启 HTTPS 域名配好之后申请 对象存储（COS/OSS） 存图片、字体等静态资源 有大文件加载需求时用 防火墙/安全组 开放端口（80、443） 买完服务器就检查 CDN、负载均衡、容器服务这些，等项目做大了再考虑。别被控制台吓到，大部分跟你无关。
三、第一次手机访问，缩小版的电脑端
终于把代码放到服务器上了。我兴冲冲地用手机打开网址。
看到的是一个缩小版的电脑端页面。字特别小，按钮特别小，布局完全是电脑端的缩放版，根本没法用。
后端服务也没配好。静态文件的位置不确定对不对，Nginx 有没有正确代理到后端，全都不确定。
你想象一下那个画面。你在电脑上做了一个月的东西，终于部署上去了，用手机一打开，就像在看一张缩略图。
那一刻我才真正理解一句话，本地能跑，和线上能用，中间差了十万八千里。
实用要点：手机端适配第一步
确认你的 HTML
<head>里有这行：1 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 没有这行，手机浏览器会把页面当成桌面版等比缩放，字和按钮都会特别小。
部署后一定要用真实手机访问测试，不要只看电脑浏览器的手机模拟模式。模拟器和真机的渲染差异很大。
四、Nginx，502 教会我的事
墨语的线上架构是这样的。Nginx 做反向代理，前端静态文件放在服务器的 /var/www/html 目录，后端服务监听 127.0.0.1:8787 端口。用户访问网页走前端，API 请求通过 Nginx 转发到后端。
1 2 3 4 5 6 用户访问
↓
Nginx（反向代理）
├── 前端静态文件 → /var/www/html
├── /api/ 请求 → 后端服务 127.0.0.1:8787
└── 后台管理页 → 权益码管理
配 Nginx 的时候遇到一个经典问题，502。
有一次 Nginx 配置检查了没问题，后端服务状态也显示正常，但访问还是 502。我反复改 Nginx 配置，改了又改，还是不行。
后来排查才发现，问题可能不在 Nginx 配置本身。可能是云服务器防火墙没开放端口，可能是后端进程虽然显示运行但实际已经挂了，可能是 Nginx 重启后没有真正加载新配置。
教训就是，不要一看到 502 就盲目改 Nginx。 先查后端进程是否存活，再查防火墙端口，再查 Nginx 配置，最后确认重启生效了。
实用要点：502 排查顺序（照着走就行）
查后端进程是否存活：
pm2 list或ps aux | grep node查端口是否在监听：
curl http://127.0.0.1:8787/api/health查防火墙是否开放：去云控制台检查安全组规则，确认 80、443 和后端端口都开了
查 Nginx 配置语法：
nginx -t重载 Nginx 配置：
nginx -s reload按这个顺序排查，不要一上来就改配置。大部分 502 不是配置写错了，而是后端进程挂了或者端口没开。
五、字体加载，手写模拟器的命门
手写模拟器对字体依赖特别重。字体加载失败，输出就会退回系统默认的楷体或者宋体，效果立刻崩掉。
服务器在新加坡，国内手机访问字体资源慢或者超时。如果字体走的是 Google Fonts，国内直接不可访问。
我做了几件事来修。
把字体文件上传到腾讯云 COS（对象存储），让前端从国内资源加载。检查响应头，确保字体文件能被正确缓存。重新构建 dist，确保构建后的代码指向新的字体地址。
修完之后，国内手机加载速度明显快了很多。字体能正常加载，手写效果才能保住。
一个工具上线后，图片、字体、静态资源都应该当成产品能力的一部分。它们跟功能代码一样重要，任何一个加载失败，用户体验都会崩。
实用要点：静态资源优化（国内项目必看）
Google Fonts 在国内不可访问，换成国内源或自托管字体文件
字体、图片上传到对象存储（腾讯云 COS / 阿里云 OSS），走国内 CDN 加速
大文件加缓存响应头：
Cache-Control: max-age=31536000，让浏览器缓存一年构建时确认代码指向新资源地址，rebuild 后再部署，不要遗漏
用浏览器开发者工具的 Network 面板检查字体、图片是否正常加载，关注加载耗时
六、权益码，小工具的最小商业闭环
部署基本跑通之后，我加了权益码系统。
免费用户每天有导出次数，更多导出可以通过次卡码或者买断码解锁。后台管理页可以生成权益码、查看兑换状态、查看导出和上传记录。
后端用的是 Node.js 加 SQLite。用 Node 22 内置的 DatabaseSync，不需要安装数据库，不需要 ORM，整个后端就一个 server.js 文件。部署在服务器上用 pm2 常驻，Nginx 做反向代理。
权益码这件事，我觉得对小工具特别重要。
不是为了复杂化产品，是让一个免费工具有机会活下去。用户免费体验核心功能，觉得有用再付费。后台管理让你能看到谁在用、用了多少、权益码有没有被滥用。
这是一个最简单但完整的商业闭环。
实用要点：小工具商业化的最小方案
免费额度 + 付费解锁，是最简单的变现模式，不需要接入支付
权益码系统三步走：生成码 → 用户兑换 → 解锁功能
后台管理只需要三件事：生成码、查兑换、看用量
技术栈可以极简：Node.js + SQLite，一个 server.js 文件搞定后端，Node 22 内置 DatabaseSync，不需要额外装数据库
先验证有没有人愿意付费，再考虑复杂化
七、本地开发也有坑
最后说一个本地开发的坑，跟线上部署无关，但很容易踩。
本地开发的时候，前端跑在 5173 端口，后端跑在 8787 端口，两个都正常。但 5173 访问 /api/health 的时候，返回的是前端的 HTML 页面，不是后端的 JSON。
原因是 Vite 没有配置本地代理。前端不知道 /api 请求应该转发到后端。
后来在 vite.config.ts 加了一行代理配置，把 /api 转发到 http://127.0.0.1:8787，就好了。
还有一个新手常见问题。终端关掉之后项目就停了。npm run dev 是跟着终端进程的，终端关掉服务就没了。线上要用 pm2 之类的工具让服务常驻。
实用要点：本地开发两个常见坑
坑 1：前端访问 /api 返回 HTML
在 vite.config.ts 加一行代理配置：
1 2 3 4 5 6 7 export default defineConfig({
server: {
proxy: {
'/api': 'http://127.0.0.1:8787'
}
}
})前端不知道 /api 请求该转发到后端，加了这行就好了。
坑 2：终端关了服务就停
本地开发无所谓，线上必须用进程管理工具。pm2 常用命令：
pm2 start server.js— 启动服务
pm2 list— 查看所有进程状态
pm2 logs— 查看实时日志
pm2 restart all— 重启所有服务
八、给小白的部署清单
一路踩过来，我整理了一份清单。如果你也想把 AI 做的小项目部署上线，可以照着这个来。
服务器选国内区域（除非你的用户在海外）
前端构建 dist 放到服务器指定目录
后端服务用 pm2 常驻，不要用 npm run dev
Nginx 配置反向代理，把 /api 转发到后端端口
字体和图片等静态资源放国内 CDN 或对象存储
防火墙开放必要端口（80、443、后端端口）
检查后端进程是否存活，502 先查进程再查配置
本地开发时配置 Vite 代理，/api 转发到后端
用手机实际访问测试，走完全部流程
看着步骤多，实际跑一遍，一天之内能搞定。前提是你知道每一步要做什么。
九、回头看
一个 AI 小工具从本地 demo 到线上产品，中间差的几行代码，是一整套真实世界的约束。
手机浏览器、网络环境、资源加载、后台服务、用户付费路径，全都要进入你的产品判断。
也许这才是普通人用 AI 做产品最值得学的地方。
AI 能帮你写代码，帮你排查问题，帮你生成配置。但你得自己决定服务器选哪个区域，你得自己用手机打开测试，你得自己判断哪里还不对。
工具只是表面，真正值得写的是一个普通人如何借助 AI，把想法推到可用状态。
墨语（摸鱼）的三篇文章到这里就结束了。从为什么做，到怎么踩坑，到怎么上线。希望这三篇能帮你少走一些弯路。
如果你也有想用 AI 做的小项目，别犹豫，先跑起来再说。哪怕第一版很粗糙，哪怕部署全是问题，先跑起来，后面再一轮一轮地修。
接下来准备开个新系列，普通人的AI实战课，在一些真实场景中，如何用AI去帮助我们有效的去落地，去学习，去提质增效。
欢迎大家继续关注。
关注公众号「AI 淇橦学」，和 AI 一起成长。
有问题或建议？后台留言即可。
