如何在局域网部署React+Node（Express）前后端服务？

一、React前端部署步骤 #

• 生成生产构建包：在React项目根目录执行 npm run build，生成的build文件夹包含所有编译好的静态资源（已适配homepage: "./"的相对路径配置）。
• 托管静态资源：
  • 轻量方案（serve工具）：全局安装npm install -g serve，然后在项目根目录运行 serve -s build -l 3000（3000为前端端口，可自定义），局域网内设备通过http://你的局域网IP:3000访问前端。
  • 稳定方案（Nginx）：将build文件夹内的所有文件复制到Nginx的html目录，修改Nginx配置文件监听指定端口（如3000），设置根目录指向静态资源路径，重启Nginx即可。

二、Node(Express)后端部署步骤 #

• 修改监听地址：确保后端入口文件的监听地址为0.0.0.0（而非localhost），这样局域网内其他设备才能访问，示例代码：

  const express = require('express');
  const app = express();
  
  // 配置中间件、接口路由等逻辑
  app.get('/api/data', (req, res) => {
    res.json({ message: '局域网后端数据' });
  });
  
  app.listen(8080, '0.0.0.0', () => {
    console.log('后端服务运行在 http://你的局域网IP:8080');
  });
  

• 安装生产依赖：在后端项目根目录执行 npm install --production，仅安装生产环境所需依赖。
• 启动后端服务：
  • 直接启动：node app.js（假设入口文件为app.js）。
  • 进程管理（推荐）：全局安装npm install -g pm2，运行 pm2 start app.js --name backend-service，服务将后台稳定运行，可通过pm2 status查看状态。

三、跨域与请求地址适配 #

• 开发环境的package.json代理仅在本地有效，生产环境需调整axios请求地址：
  • 全局配置axios的baseURL为后端局域网地址：

    import axios from 'axios';
    axios.defaults.baseURL = 'http://你的局域网IP:8080';
    

  • 或通过Nginx反向代理消除跨域：在Nginx配置中添加请求转发规则，示例：

    server {
      listen 3000;
      root /path/to/react/build;
      index index.html;
    
      # 转发所有/api开头的请求到后端
      location /api {
        proxy_pass http://你的局域网IP:8080;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
      }
    }
    

    此时前端axios请求/api/xxx会自动转发到后端，无需修改baseURL。

四、多页面路由适配 #

• 若使用React Router的BrowserRouter，部署后刷新页面会出现404，需配置静态服务 fallback 到index.html：
  • 使用serve工具时，-s参数已自动处理该问题。
  • 使用Nginx时，在配置中添加：

    location / {
      try_files $uri $uri/ /index.html;
    }
    

• 若使用HashRouter，无需额外配置，哈希路由可直接被静态服务处理。

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