从 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,登录就能存自己的饮食记录。

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

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

相关推荐
北极糊的狐5 小时前
阿里云宝塔输入cat /www/server/panel/config/safe_path.conf报错 No such file or directory
阿里云·云计算
暖核6 小时前
Nginx 从入门到实践:部署、配置、反向代理与负载均衡全解
运维·nginx·负载均衡
.柒宇.8 小时前
运维常见面试题_04_Nginx与DNS服务
运维·nginx·面试·dns
北极糊的狐8 小时前
阿里云宝塔报错bash tools/update.sh: No such file or directory 意思是:tools 整个目录直接丢失
阿里云·云计算·bash
NiceCloud喜云8 小时前
阿里云 ECS 实例怎么选:面向出海业务的规格、地域与成本判断
阿里云·云计算
NGINX开源社区9 小时前
NGINX Ingress Controller 5.5:安全性与性能提升,迁移更轻松
java·服务器·nginx
weixin_307779139 小时前
PHP 大文件上传:内存占用、超时与最佳实践
linux·服务器·开发语言·nginx·php
丨晨 丨9 小时前
LNMP_LAMP_项目实战教程
云计算
闲云野鹤在人间9 小时前
项目实战:LNMP-电商平台-ECshop
linux·运维·nginx·apache·lvs