从 0 到上线:单文件网页 App 部署到阿里云 ECS 全流程(Nginx+Node+PM2+PostgreSQL)

从 0 到上线:单文件网页 App 部署到阿里云 ECS 全流程(Nginx+Node+PM2+PostgreSQL)

"今天吃什么?"------这五个字,是我每天下班回家面对冰箱时的终极难题。

作为一个非科班、纯自学的普通打工人,我没想做多牛的产品,就想要个能替我想好「这顿吃啥、还差多少营养」的小工具。于是用业余时间做了个单文件网页 App:「今天吃什么 · 纠结症救星」。

做完之后,真正的难题才开始:怎么让它稳定地跑在网上,让别人也能打开?

这篇聊聊我从「本地能跑」到「公网可访问」的全过程,以及踩过的坑。希望帮到同样想把自己小工具上线的你。

一、先说产品:它解决了什么

填身高体重,它算出你今天该吃多少热量/蛋白;按「当日营养缺口」智能凑出三餐(不是乱推,是真算缺口);支持自己做饭 / 点外卖 / 外出吃三种场景;120+ 菜品库、饮水打卡、周趋势图、云端同步、分享卡片。数据没登录存本机,登录后存云端。

二、为什么不用「现成平台」

一开始图省事试了 Serverless(云函数 + 对象存储):

  • 坑1:云函数默认域名响应头强制 Content-Disposition: attachment,HTML 直接变成「下载文件」而不是渲染页面,前端必须外置,代码层无解。
  • 坑2:为国内访问快试了某 CDN,结果又慢又偶发打不开。
  • 再加上托管数据库密码里的特殊字符要 URL 编码、建表权限各种幺蛾子......
    结论:对个人小项目,与其和平台特性搏斗,不如买台自己的服务器全自己管,反而最省心。

三、最终架构(一台机器全包)

复制代码
公网 80/443 (Nginx)
  └─ 今天吃什么 Web App
       ├─ 前端:单文件网页(手机电脑自适应)
       ├─ 后端:Node.js + PM2(端口3000,崩了自动拉起)
       └─ 数据库:本机 PostgreSQL(存账号/饮食记录)
服务器:阿里云 ECS Ubuntu 22.04 / 2核2G / 北京 / 包年包月 ¥99/年

四、部署全流程(可复现)

  1. 买 ECS(Ubuntu 22.04,2核2G,北京,包年包月,预装 Docker 可选)
  2. 安全组放行 80 / 443 / 22
  3. 本地 scp 上传部署包到服务器
  4. 服务器跑一键脚本:装 PG14 + Node + Nginx + PM2 → 建库建表 → 复制前后端 → 配 Nginx 反代 → PM2 启动
  5. 验证 http://<IP>/ 可访问、/api/health 返回 ok
  6. 提交 ICP 备案;通过后脚本绑域名 + 免费 HTTPS

整个流程约 10 分钟,核心是「前端外置 + Nginx 反代 + PM2 守护」三板斧。

五、踩坑实录(省你时间)

  • 云函数 HTML 变下载:别挣扎,前端必须独立托管。
  • 数据库密码含 !@#:连接串里要 URL 编码成 %21%40%23。
  • 建表报 information_schema 权限错:用 public. 前缀建表。
  • 备案主体一致性:域名和服务器要在同一实名主体下,否则备案会被驳回(我为此换了账号重买服务器)。
  • 账号风控:同一人多个账号参与活动会被风控,新服务器要用不同实名。

六、现状 & 邀请

工具已上线,跑在自有服务器,国内直连打开不转圈。

体验地址:http://39.102.215.224/(备案通过后换 https://mealpick.me/)

测试期注册验证码 123456,登录就能存自己的饮食记录。

欢迎来用、来挑刺、来提需求------你的每条反馈我都会看,下个版本安排上。

如果你也在做个人小工具,希望这篇能少让你踩几个坑。有问题评论区聊 👇

相关推荐
还是大剑师兰特3 天前
解决nginx错误:http://localhost:7000正常,http://localhost:7000/map 报错404
nginx·大剑师
xing-xing3 天前
Docker容器中Nginx站点根目录网页配置访问
nginx·docker
Terra.K3 天前
后端+AIAGENT项目开发指南
后端·agent·个人开发
小葱运维3 天前
命名与环境规范
运维·开源·云计算
workflower3 天前
SSH(Struts+Spring+Hibernate)
人工智能·机器学习·机器人·云计算·无人机
PC2005-cloud3 天前
Nginx 防盗链配置实战:用 referer 模块保护网站静态资源
nginx
不吃香菜kkk、3 天前
CI/CD(GitOps)学习与部署手册
运维·云原生·容器·kubernetes·云计算·jenkins·argocd
金融小师妹3 天前
AI金融能力评估:18个主流模型金融问题平均错误率达57%
人工智能·云计算·逻辑回归·深度优先
2501_915909063 天前
移动端开发工具链怎么组合比较好,iOS、Android、跨端三套配置方案
ide·vscode·ios·objective-c·个人开发·swift·敏捷流程
whyutianict_vv3 天前
云计算运维培训课程技术栈拆解:从 Linux 网络到 AI 推理的五层能力分层
linux·云计算