使用PM2+Nginx部署的Next.js应用上传文件后需重启才能访问的问题

核心原因 #

你使用PM2的**集群模式（exec_mode: cluster）**启动了4个应用实例，文件通过fs上传到服务器后，Next.js生产环境的静态资源路由是预加载生成的，新上传的文件不在初始构建的资源列表内，且集群内的多个独立进程无法自动同步感知到新文件的存在。只有重启PM2让所有进程重新加载应用后，才能识别到新上传的文件，这就是重启后问题解决的原因。

具体解决办法 #

1. 切换PM2为单实例模式（快速临时方案） #

如果应用并发压力不大，可以改成单实例的fork模式，避免多进程资源不同步的问题：

module.exports = {
  apps: [
    {
      name: "consumerapp",
      script: "npm",
      args: "start",
      autorestart: true,
      watch: false,
      exec_mode: "fork", // 修改为fork模式
      instances: 1, // 单实例运行
      ignore_watch: ["node_modules"],
      max_memory_restart: "1G",
      env: {
        NODE_ENV: "production",
      },
    },
  ],
};

修改后执行pm2 reload ecosystem.config.js即可生效。

2. 让Nginx直接处理上传文件访问（推荐生产方案） #

将上传文件的存储目录直接配置到Nginx，让Nginx直接返回这些文件，绕过Next.js应用，这样新上传的文件无需等待PM2重启就能被访问：

• 假设上传文件存储在/var/www/consumerapp/uploads，访问路径为https://你的域名/uploads/xxx.jpg
• 修改Nginx配置文件（通常路径为/etc/nginx/sites-available/你的域名.conf）：

server {
  # 保留原有其他配置...

  # 新增上传文件的路由规则
  location /uploads/ {
    root /var/www/consumerapp;
    expires 30d; # 可选：设置文件缓存有效期
    add_header Cache-Control "public, immutable";
  }

  # 原有Next.js反向代理配置
  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;
  }
}

修改后执行nginx -t验证配置合法性，无误后执行systemctl reload nginx生效。

3. 集群模式下动态刷新资源缓存（进阶方案） #

如果必须保留集群模式，可以在文件上传完成后，通过PM2 API给所有实例发送消息，触发静态资源缓存刷新：

• 安装PM2依赖：npm install pm2
• 在文件上传完成的代码中添加触发逻辑：

const pm2 = require('pm2');

pm2.connect((err) => {
  if (err) {
    console.error(err);
    process.exit(2);
  }

  // 向所有实例发送刷新静态资源的消息
  pm2.sendDataToProcessId('consumerapp', {
    type: 'refresh-static',
    data: {},
    topic: 'refresh'
  }, (err) => {
    pm2.disconnect();
    if (err) throw err;
  });
});

• 在Next.js应用中添加消息监听（比如在pages/_app.js或自定义服务器文件中）：

if (process.env.NODE_ENV === 'production') {
  process.on('message', (message) => {
    if (message.type === 'refresh-static') {
      // 在这里编写刷新静态资源缓存的逻辑，比如重新读取上传目录的文件列表
      // 若你用了自定义静态资源路由，在此更新对应的映射表
    }
  });
}

内容的提问来源于stack exchange，提问作者Muhammad Uzair