从静态到全栈 —— Project Dashboard 部署 + VPS Monitor 完善
今天做了一件完整的事：把一个本地 AI 生成的「项目管理仪表盘」部署到公网 VPS，并顺手完善了自己的监控面板 VPS Monitor。中间踩了防火墙的坑，也解决了「动态服务发现」的老问题。更重要的，我建立了一套 「Codex 开发 + Claude 部署 + 我决策」的三方 AI 协作工作流。这篇文章完整记录。
一、项目背景
我手头有一个 AI 生成的项目管理工作台（HTML + JS + CSS，约 100 KB），包含 Dashboard、Projects、Issues、Milestones、Notes、WBS、Kanban、Gantt 等完整功能。它原本是本地静态 demo，我决定把它部署到自己的 VPS，通过公网访问。
同时，我的 VPS Monitor（自建监控面板）有几个待优化项：
- 「公開ポート」只显示端口号，看不出「谁在用」
- 「モデル別 RPM」只有 5 分钟窗口，数据太少
- 「リクエスト推移」只有 30 分钟，想看更长时间
- 服务列表和端口列表混在一起，职责不清
二、部署流程：Mac → GitHub → VPS → Nginx → 公网
2.1 Mac 端：推到 GitHub
# 1. 在 GitHub 建仓库
# https://github.com/new → project-dashboard
# 2. 改 remote
cd ~/path/to/project-dashboard
git remote set-url origin https://github.com/git938/project-dashboard.git
# 3. 更新 .gitignore
cat > .gitignore << 'EOF'
.DS_Store
.openai/
*.zip
*.command
EOF
# 4. Push
git add .
git commit -m "Prepare for GitHub deployment"
git push -u origin main踩坑：第一次 push 会要求认证。GitHub 不再接受密码，要用 Personal Access Token（Settings → Developer settings → Personal access tokens，勾选 repo 权限）。
2.2 VPS 端：Clone + 配置 Nginx
ssh root@162.43.92.249
# Clone
cd /root
git clone https://github.com/git938/project-dashboard.git
cd project-dashboard
# 复制静态文件到 Nginx 目录
mkdir -p /var/www/project-dashboard
cp -r dist/* /var/www/project-dashboard/
# Nginx 配置
cat > /etc/nginx/sites-available/project-dashboard.conf << 'EOF'
server {
listen 3004;
server_name _;
root /var/www/project-dashboard;
index index.html;
location / {
try_files $uri $uri/ /index.html;
}
}
EOF
# 启用
ln -sf /etc/nginx/sites-available/project-dashboard.conf /etc/nginx/sites-enabled/
nginx -t && systemctl reload nginx2.3 最大的坑：防火墙没开端口
VPS 上 curl 127.0.0.1:3004 返回 200，但浏览器打不开。排查发现 ufw 防火墙没开 3004 端口。
# 查看已开放端口
ufw status
# 输出显示 22、3000、3002、3003、8000、8081 等
# 但没有 3004
# 开放 3004
ufw allow 3004/tcp
# 从 Mac 测试
curl -sI http://162.43.92.249:3004/ --max-time 10
# 返回 200 OK ✅教训：本地 200 ≠ 外部可访问。部署后一定从外部测试（Mac、手机、在线工具）。