从零到上线一个人把「今天吃什么」做成公网小工具架构 / 踩坑 / 部署全记录一、背景为什么做这个工具二、技术选型演进三、最终架构同源部署无跨域四、上云踩坑实录全是真金白银的教训坑 1外网打不开坑 2ICP 备案失败坑 3账号风控坑 4私有仓库无法 git clone坑 5部署脚本相对路径 bug坑 6功能字段合并过度五、产品打磨移动端体验六、做饭教程从太简单到够用七、上线与运维带版本回滚的部署八、成本与后续九、小结一、背景为什么做这个工具链接今天吃什么今天吃什么几乎是每个打工人每天的精神内耗。我做了一个名为「今天吃什么 · 纠结症救星」的单文件 Web 工具核心能力按营养缺口 / 口味偏好 / 健康目标智能推荐餐食内置 120 菜品含热量、蛋白、碳水、脂肪记录每日饮食、饮水打卡、连续打卡趋势图可视化一键生成微信分享卡片工具最早是一个纯前端 HTML 文件数据存在localStorage本地打开即用。但只有自己能用、换设备就没了于是有了上云的想法。二、技术选型演进阶段方案结果v0单文件 HTML前端 localStorage个人可用无法多端同步v1Serverless函数计算 FC 云数据库 RDS踩坑放弃见第三节v2单台 ECS 全栈自营Nginx Node PostgreSQL✅ 最终方案已上线v1 的教训函数计算的默认域名会强制给 HTML 加Content-Disposition: attachment浏览器直接下载而不是渲染且前后端分离带来跨域麻烦。前端必须独立托管这是关键认知。三、最终架构同源部署无跨域单台 ECS2 核 2G、Ubuntu 22.04、40G ESSD、按流量计费上跑全套Nginx监听 80/443既做静态资源托管又把/api反代到 NodeNode 独立 HTTP 服务端口 3000处理推荐 / 记录 / 打卡等业务PostgreSQL 14本机安装存用户档案、饮食记录因为前端和后端在同一台机器、同一域名下没有跨域问题部署简单很多。四、上云踩坑实录全是真金白银的教训坑 1外网打不开现象浏览器访问公网 IP 没反应。原因安全组入方向没有放行 80 端口。解决在云控制台安全组加一条 80/443/22 的入站规则即可。坑 2ICP 备案失败现象提交备案被驳回。原因当时用的是按量付费实例而国内 ICP 备案要求实例必须是包年包月。解决重新购买一台包年包月实例个位数百元 / 年把服务迁过去备案才顺利提交。坑 3账号风控现象账号被风控部分资源被限制。原因同一人用多个账号参与试用活动被系统识别。解决走官方申诉流程恢复并确保服务器和域名在同一实名账号下避免备案主体不一致。坑 4私有仓库无法 git clone在服务器上git clone私有仓库一直卡在要输密码。解决本地用scp直接把文件传到服务器目录再在服务器执行部署脚本绕开仓库鉴权。坑 5部署脚本相对路径 bugsetup.sh里用cd进子目录后相对路径拷贝失败。解决改用脚本绝对路径 多目录查找脚本一次跑通。坑 6功能字段合并过度早期把忌口和过敏原混在一个框里用户反馈不清。解决明确拆分——忌口 口味偏好香菜 / 大蒜 / 葱等点选快捷标签自动填入过敏原 医学过敏海鲜 / 坚果等独立复选 可自填两者独立过滤、独立存储。五、产品打磨移动端体验因为主要场景是手机上临时决定吃什么做了几轮移动端优化横向翻页向导档案编辑原来一页太长改成 4 屏横向翻页基础信息 → 健康目标 → 今日口味 → 更多选填底部圆点指示进度。健康标签子标签选填的健康目标做成可折叠的子标签面板按需展开。老用户预填二次进入先显示档案页自动填回上次信息 横幅提示是否修改不想改直接进主页。主页也翻页推荐 / 记录 / 数据 / 我的 四个 Tab 横向切换。六、做饭教程从太简单到够用自己做饭场景下原来的教程每道菜只有 2-3 句话太敷衍。重做为两层内联详细教程每道菜可展开看食材清单主料 / 辅料 / 调料带用量 带小标题的编号步骤 小贴士。完整教程弹窗点查看完整教程 ›弹出全屏卡片参考下厨房 / 小红书含耗时 / 难度 / 份量、分组食材、编号步骤、小贴士还能收藏菜谱。数据结构也从简单数组升级为{ time, level, serves, ingr, steps[], tips, story }旧格式自动兼容。七、上线与运维带版本回滚的部署每次更新都靠一个deploy.sh流程部署前自动备份当前版本到backups/backup_时间戳/复制新文件 → 重启 PM2 →健康检查写versions.json记录版本失败自动回滚到上一备份常用命令bashdeploy.sh deployv1.6 做饭教程详细化# 部署新版本bashdeploy.shhistory# 查看版本历史bashdeploy.sh rollback# 回滚到上一版本bashdeploy.sh status# 查看服务状态八、成本与后续成本包年包月 ECS 个位数百元 / 年流量计费几乎零运维成本。后续备案通过后绑定自有域名 免费 SSL把多个自研小工具汇总成一个个人工具集导航站含每个工具的说明、访问方式、开发框架、跳转长远规划小程序 / App。九、小结从纯前端 HTML 到公网全栈服务真正的难点不在写代码而在云上那些文档不会明说、只有踩了才知道的规矩安全组、备案实例类型、账号风控、FC 域名限制。把这些都理顺后剩下的就是持续打磨产品本身。如果你也在做类似的小工具上云希望这篇能帮你少走几个弯路。
