如何在同一台电脑上运行两个相同的React应用实例？

方法1：启动时直接指定端口号 #

React项目默认使用3000端口，第二个实例只要换个端口就能启动：

• 第一个实例正常启动：npm start 或 yarn start（占用3000端口）
• 第二个实例指定端口启动：
  • Windows系统：set PORT=3001 && npm start
  • macOS/Linux系统：PORT=3001 npm start
    启动后分别访问http://localhost:3000和http://localhost:3001即可测试。

方法2：在package.json中配置多端口启动脚本 #

直接在项目的package.json里添加不同端口的启动命令，后续启动更方便：

"scripts": {
  "start": "react-scripts start",
  "start:3001": "PORT=3001 react-scripts start",
  "start:3002": "PORT=3002 react-scripts start"
}

Windows用户需要把脚本改成set PORT=3001 && react-scripts start。之后运行npm start和npm run start:3001就能同时启动两个实例。

方法3：通过.env文件配置端口（适合多场景复用） #

如果需要频繁切换多实例，可通过环境变量文件配置：

1. 安装cross-env包（解决跨系统环境变量兼容问题）：npm install cross-env --save-dev
2. 创建两个环境文件：
   • .env.instance1：写入PORT=3000
   • .env.instance2：写入PORT=3001
3. 在package.json添加对应脚本：

"scripts": {
  "start:instance1": "cross-env ENV_FILE=.env.instance1 npm start",
  "start:instance2": "cross-env ENV_FILE=.env.instance2 npm start"
}

运行npm run start:instance1和npm run start:instance2即可启动两个实例。

注意事项 #

• 确保两个实例连接的是同一个后端服务，这样才能实现即时聊天的交互测试
• 以上方法均适用于Create React App搭建的项目，自定义webpack配置的项目需修改devServer.port参数

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