React应用通过PM2启动时NODE_ENV始终显示development求助

核心误解：React环境变量的注入时机 #

React前端代码中的process.env.NODE_ENV是打包阶段静态注入的，而非运行时动态读取。也就是说：

• 执行npm run build时，React会自动将代码中的process.env.NODE_ENV替换为production，生成的build目录文件已经固化了这个值。
• 执行npm start是启动开发服务器，会以development模式实时编译代码，此时浏览器加载的是未打包的开发版本，自然显示development。

问题1：pm2 start npm -- start启动时显示development #

这个命令本质是执行npm start，也就是启动React的开发服务器，完全不是生产部署的正确方式。开发服务器用于本地开发调试，不适合生产环境，且会强制使用development模式编译代码，所以控制台必然显示development。

解决：永远不要用这个命令部署生产环境。

问题2：PM2配置启动serve仍显示development #

如果已经正确执行npm run build，但浏览器控制台还是显示development，请按以下步骤排查：

1. 确认build目录是最新的：重新执行npm run build，覆盖旧的build文件。
2. 清理浏览器缓存：强制刷新页面（Ctrl+Shift+R），避免浏览器加载旧的开发模式代码。
3. 确保PM2使用本地安装的serve：全局安装的serve可能无法读取PM2的环境变量，修改PM2配置文件指定本地serve路径：

// ecosystem.config.js
module.exports = {
  apps: [
    {
      name: 'my-react-app',
      script: './node_modules/.bin/serve', // 指向本地安装的serve
      args: ['-s', 'build'],
      instances: 1,
      autorestart: true,
      watch: false,
      max_memory_restart: '1G',
      env: {
        NODE_ENV: 'production',
      },
    },
  ],
};

4. 重启PM2：执行pm2 restart ecosystem.config.js，确保配置生效。

推荐生产部署方案 #

方案1：Nginx直接托管build目录（最稳定高效，优先推荐）

Nginx本身擅长静态文件托管，无需依赖Node服务：

1. 执行npm run build生成最新的build目录。
2. 配置Nginx的server块：

server {
    listen 80;
    server_name your-domain.com;

    root /path/to/your/react/app/build;
    index index.html;

    # 处理React单页路由刷新问题
    location / {
        try_files $uri $uri/ /index.html;
    }

    # 静态文件缓存优化
    location ~* \.(js|css|png|jpg|svg)$ {
        expires 30d;
        add_header Cache-Control "public, immutable";
    }
}

3. 重启Nginx：sudo nginx -s reload

方案2：PM2 + Express托管build目录（适合需要Node层扩展的场景）

serve是轻量工具，高并发下稳定性不足，用Express替代更可靠：

1. 安装Express：npm install express --save
2. 在项目根目录创建server.js：

const express = require('express');
const path = require('path');
const app = express();

// 托管build静态文件
app.use(express.static(path.join(__dirname, 'build')));

// 处理React路由
app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, 'build', 'index.html'));
});

const port = process.env.PORT || 3000;
app.listen(port, () => {
  console.log(`Server running on port ${port}`);
});

3. 修改PM2配置文件：

// ecosystem.config.js
module.exports = {
  apps: [
    {
      name: 'my-react-app',
      script: 'server.js',
      instances: 1,
      autorestart: true,
      watch: false,
      max_memory_restart: '1G',
      env: {
        NODE_ENV: 'production',
        PORT: 3000
      },
    },
  ],
};

4. 启动PM2：pm2 start ecosystem.config.js
5. 配置Nginx反向代理到3000端口（同方案1的Nginx配置，仅修改location块）：

location / {
    proxy_pass http://localhost:3000;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
}

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