如何在生产服务器上开发React并实现修改实时生效？

方法一：用React自带的开发服务器（推荐，适用于create-react-app创建的项目） #

React官方脚手架create-react-app自带的开发服务器支持热重载，修改代码后自动刷新页面，完全不用手动执行build。

具体步骤： #

1. 进入服务器上的React项目根目录，启动开发服务器：
   npm start
   默认会在3000端口启动服务，但此时只能在服务器本地访问。

2. 让开发服务器允许外部访问：
   默认开发服务器只绑定localhost，需要修改启动命令，让它监听服务器的公网IP或所有网卡：
   HOST=0.0.0.0 PORT=3000 npm start
   这样你就能通过http://服务器公网IP:3000直接访问项目，修改代码后浏览器会自动刷新显示最新内容。

3. （可选）通过Nginx反向代理用域名访问：
   如果不想直接暴露3000端口，可配置Nginx反向代理：

• 打开Nginx配置文件（通常在/etc/nginx/conf.d/或/etc/nginx/sites-available/目录下）
• 添加或修改server块：

server {
    listen 80;
    server_name 你的域名;

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

• 重启Nginx生效：sudo systemctl restart nginx
  之后直接访问域名就能看到实时更新的项目内容。

方法二：用webpack-dev-server（适用于自定义webpack配置的React项目） #

如果你的项目是手动配置webpack的，可通过webpack-dev-server实现热重载：

1. 安装依赖：
   npm install webpack-dev-server --save-dev
2. 在webpack配置文件中添加devServer配置：

module.exports = {
  // ...其他已有配置
  devServer: {
    static: './dist', // 对应你的静态资源目录
    hot: true, // 开启热重载
    host: '0.0.0.0', // 允许外部访问
    port: 3000 // 自定义端口
  }
};

3. 在package.json的scripts中添加启动命令：

"scripts": {
  "dev": "webpack-dev-server --mode development"
}

4. 启动开发服务器：npm run dev，后续访问方式和方法一一致。

注意事项 #

• 开发服务器仅用于开发环境，绝对不能用于生产环境，性能和安全性都不符合生产要求。
• 如果服务器有防火墙，需要开放对应的端口（比如3000），Ubuntu系统可执行ufw allow 3000。
• 确保服务器上已安装完整的项目依赖，先执行npm install避免启动报错。

内容的提问来源于stack exchange，提问作者Lukáš Ježek