如何使用PM2在单个AWS EC2实例上运行多个ReactJS/NextJS应用

一、准备应用部署包 #

• 本地分别打包两个应用：
  • React（create-react-app）：执行npm run build生成build文件夹
  • NextJS：执行npm run build生成.next文件夹
• 将两个应用的打包文件+package.json分别传到EC2实例的独立目录，比如/var/www/main-app（主应用）和/var/www/cms-app（CMS应用）
• 进入每个应用目录，安装生产依赖：npm install --production

二、用PM2管理多个应用 #

PM2支持同时管理多个进程，核心是给每个应用指定唯一名称和端口：

1. 确保EC2已安装PM2（没装的话执行npm install pm2 -g）
2. 启动主应用（端口3000）：
   • React应用：先装serve工具npm install -g serve，再执行pm2 start serve --name "main-app" -- -s build -l 3000
   • NextJS应用：pm2 start npm --name "main-app" -- run start -- -p 3000
3. 启动CMS应用（端口3001）：
   • React应用：pm2 start serve --name "cms-app" -- -s build -l 3001
   • NextJS应用：pm2 start npm --name "cms-app" -- run start -- -p 3001
4. 验证进程状态：执行pm2 status，能看到两个应用分别运行在3000、3001端口
5. 设置开机自启：
   • 执行pm2 startup，复制输出的命令并执行（给PM2添加系统服务）
   • 执行pm2 save，保存当前进程列表，确保重启EC2后自动恢复应用

三、配置Nginx反向代理（对应你提供的配置） #

Nginx负责把外部请求转发到对应端口的应用，按以下步骤操作：

1. 编辑Nginx默认配置文件，路径一般是/etc/nginx/sites-available/default
2. 替换为你提供的配置：

location /api {
    proxy_pass http://localhost:8000;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection 'upgrade';
    proxy_set_header Host $host;
    proxy_cache_bypass $http_upgrade;
}

location / {
    proxy_pass http://localhost:3000;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection 'upgrade';
    proxy_set_header Host $host;
    proxy_cache_bypass $http_upgrade;
}

location /cms {
    proxy_pass http://localhost:3001;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection 'upgrade';
    proxy_set_header Host $host;
    proxy_cache_bypass $http_upgrade;
}

3. 验证配置合法性：sudo nginx -t，提示test is successful则继续
4. 重启Nginx生效：sudo systemctl restart nginx

四、测试与维护 #

• 访问验证：
  • 打开EC2公网IP/绑定域名，根路径/会加载主应用（3000端口）
  • 访问域名/cms会加载CMS应用（3001端口）
• 常用PM2命令：
  • 重启单个应用：pm2 restart main-app
  • 查看应用日志：pm2 logs cms-app
  • 停止应用：pm2 stop cms-app
  • 删除应用进程：pm2 delete main-app

注意事项 #

• 端口冲突：确保两个应用用不同端口（不要和Nginx、后端服务等端口重复）
• EC2安全组：只开放80（HTTP）、443（HTTPS，如需）端口，3000/3001无需对外暴露（Nginx会内部转发）
• 静态资源：如果是React应用，确保serve工具正确指向build文件夹；NextJS会自动处理静态资源

内容的提问来源于stack exchange，提问作者Omkar Jadhav