[特殊字符] PM2 入门实战:从 0 到线上托管 React SPA

1. 什么是 PM2?(30 s 速读)

PM2 是 Node.js 的生产级进程管理器 ,内置负载均衡、日志切割、开机自启、监控面板

一句话:让你的 Node / 静态站点"永远在线"


2. 本文目标

  1. 了解 PM2 核心能力
  2. 用一条命令把 React 单页应用跑在 3000 端口
  3. 配置 ecosystem 文件,实现"可重复、可回滚"的部署
  4. 开机自启 + 日志轮转,达到线上最低可维护标准

3. 环境准备

项目 版本
OS OpenCloudOS / CentOS 8+
Node 22.11.0(已预装)
构建产物 react-app/build/ 目录已存在

4. 一条命令体验 PM2

bash 复制代码
cd /www/wwwroot/react-app
pm2 serve build 3000 --spa --name "react-app"
  • --spa:所有 404 重定向到 index.html,支持 React-Router
  • --name:进程别名,方便后续管理

成功后会看到:

text 复制代码
[PM2] Serving /www/wwwroot/react-app/build on port 3000
┌────┬─────────────┬────────────┬──────┬──────┬────────┬───┬────────┬───┐
│ id │ name        │ namespace  │ mode │ pid  │ status │ ↑ │ cpu    │ mem │
├────┼─────────────┼────────────┼──────┼──────┼────────┼───┼────────┼───┤
│ 0  │ react-app   │ default    │ fork │ xxxx │ online │ 0 │ 0%     │ 32M │
└────┴─────────────┴────────────┴──────┴──────┴────────┴───┴────────┴───┘

浏览器访问 http://<服务器IP>:3000 即可看到 React 页面。


5. 核心概念图解(Mermaid)

5.1 PM2 架构一览

start/reload CLI PM2 Daemon Process Container 1 Process Container 2 ... Log File dump.pm2 systemd

5.2 静态 SPA 流程

用户 Nginx(可选) PM2 serve build/index.html 80/443 3000 SPA 模式 200 + React 页面 用户 Nginx(可选) PM2 serve build/index.html


6. 把"命令"升级成"代码"------ecosystem 文件

在项目根新建 ecosystem.config.js

js 复制代码
module.exports = {
  apps: [{
    name: "react-app",
    script: "serve",
    args: "-s build -l 3000",
    instances: 1,
    exec_mode: "fork",
    env: { NODE_ENV: "production" },
    log_date_format: "YYYY-MM-DD HH:mm:ss Z",
    out_file: "./logs/combined.log",
    error_file: "./logs/combined.log",
    merge_logs: true
  }]
};

启动/重载:

bash 复制代码
pm2 start ecosystem.config.js
pm2 reload ecosystem.config.js        # 0 中断更新

7. 日志切割 & 磁盘保护

bash 复制代码
pm2 install pm2-logrotate
pm2 set pm2-logrotate:max_size 50M
pm2 set pm2-logrotate:retain 7

50 MB 自动切,保留 7 份,再也不怕磁盘爆。


8. 开机自启(systemd)

bash 复制代码
pm2 save                           # 保存当前列表
pm2 startup systemd                # 生成 systemd 服务
# 按提示执行
systemctl enable pm2-root

重启机器后 pm2 ls 仍在,进程自动拉回。


9. 日常值班 6 大宝命令

任务 命令
看列表 pm2 ls
实时日志 pm2 log react-app --lines 50
资源监控 pm2 monit
平滑重载 pm2 reload react-app
停止并删除 pm2 delete react-app
保存现场 pm2 save

10. 小结 & 下一步

  1. 你已拥有可重复部署的 ecosystem 文件
  2. 日志切割 + 开机自启,达到线上最低可维护标准
  3. 下一步:
    • Nginx 反向代理 80/443
    • 接入 CI/CD(GitLab/GitHub Actions)一条 pm2 reload 完成上线
    • 使用 pm2-io-apm 接入 Web 监控 & 邮件/钉钉告警

11. 一键 cheatsheet(保存即可)

markdown 复制代码
pm2 start app.js -i max      # 集群模式
pm2 reload api               # 平滑重启
pm2 monit                    # 资源面板
pm2 install pm2-logrotate    # 日志轮转
pm2 save && pm2 startup      # 开机自启

🎉 至此,PM2 入门完成!把这篇 Markdown 丢进仓库,团队其他成员也能 3 分钟跑起同样的环境。 Happy shipping!


以我之思,借AI之力

相关推荐
不简说21 分钟前
JS 代码技巧 vol.1 — 10 个让代码少写 30% 的小套路
前端·javascript·面试
Hilaku25 分钟前
为什么业务型前端容易遭遇中年危机?
前端·javascript·程序员
এ慕ོ冬℘゜34 分钟前
深度解析 JavaScript:赋予 Web 灵魂的“全栈语言”
开发语言·前端·javascript
iCOD3R35 分钟前
Skill - 3秒生成精美GitHub主页
前端·程序员·ai编程
爱勇宝42 分钟前
《道德经》第5章:生产环境不相信眼泪
前端·后端·架构
掘金者阿豪1 小时前
LEFT JOIN 凭空消失的背后,是优化器偷偷帮你做了决定
前端·后端
HackTwoHub1 小时前
AntiDebug Mcp、AI逆向绕过前端,Hook 加密接口,抓取 Vue 路由漏洞,接入 MCP 让 AI 自动化挖掘前端漏洞
前端·vue.js·人工智能·安全·web安全·网络安全·系统安全
Mr_凌宇1 小时前
AI 应用工程进阶扩展学习笔记 二
前端·面试
Hyyy1 小时前
Git Worktree 完全讲解
前端·后端·面试
葡萄城技术团队2 小时前
AI 不会淘汰电子表格,反而会让电子表格成为 AI 操作系统
前端·人工智能