如何仅在局域网部署基于create-react-app开发的React Web应用？

嘿，我来帮你搞定这个问题！你之前用XAMPP部署PHP/MySQL项目很顺手，其实React应用的局域网部署流程也挺清晰的，毕竟create-react-app已经帮我们做好了生产构建的基础工作，下面一步步来：

第一步：构建生产版本代码 #

首先，你需要把开发中的React代码打包成生产环境的静态文件——这是部署的核心。在你的项目根目录打开终端，运行：

npm run build

这个命令会在项目根目录生成一个build文件夹，里面包含了所有优化后的HTML、CSS、JS、图片等静态资源，这就是我们要部署的内容。

第二步：选择部署方式（两种常用方案） #

方案1：用Node.js的serve快速部署（简单快捷） #

如果你已经装了Node.js，这个方案最省心：

• 先全局安装serve工具：

  npm install -g serve
  

• 然后在项目根目录运行命令启动服务器：

  serve -s build
  

  -s参数是为了处理React单页应用的路由问题（避免刷新页面出现404）。
• 启动后，终端会显示访问地址，比如http://localhost:3000，局域网内其他设备只要访问你的电脑局域网IP+端口就能打开应用，比如http://192.168.1.100:3000。
  • 怎么查自己的局域网IP？Windows用ipconfig，Mac/Linux用ifconfig或ip addr，找带“IPv4地址”的那一行。

方案2：用你熟悉的XAMPP部署 #

既然你习惯用XAMPP，完全可以用它来托管React的静态文件：

1. 打开XAMPP的htdocs目录（默认在C:\xampp\htdocs或/Applications/XAMPP/htdocs），新建一个文件夹（比如employee-db）。
2. 把build文件夹里的所有内容复制到这个新建的文件夹里。
3. 启动XAMPP的Apache服务，然后局域网内设备访问http://你的局域网IP/employee-db就能打开应用。

⚠️ 注意：如果你的React用了BrowserRouter（比如路由是/employees、/departments这种），直接用Apache会出现刷新页面404的问题。解决方法是在employee-db目录下新建一个.htaccess文件，内容如下：

Options -MultiViews
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.html [QSA,L]

这个配置会把所有非静态文件的请求都转发到index.html，让React路由来处理。

第三步：确保局域网能访问 #

• 检查你的电脑防火墙：要允许对应的端口（比如serve用的3000，Apache用的80）通过局域网访问，不然其他设备会连不上。
• 如果有后端API（比如和MySQL交互的接口），要确保后端也部署在局域网内，并且React代码里的API地址要改成后端的局域网IP（而不是localhost），这样其他设备才能正常调用接口。

小提示 #

• 用serve时可以自定义端口，比如serve -s build -l 8080就会用8080端口启动。
• 如果想让应用开机自启，可以把启动命令做成脚本（Windows用.bat，Mac/Linux用.sh），或者配置成系统服务。

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