如何为基于CRA的React应用配置多端口运行？

嘿，这个需求太实用了，尤其是模拟多设备测试的时候，我给你整理了几个简单易行的办法，保证每个端口的应用都有独立的localStorage和IndexedDB：

方法一：给每个端口单独配置启动脚本 #

Create React App支持通过PORT环境变量指定启动端口，我们可以直接在package.json里添加多个启动命令：

1. 基础配置（区分系统） #

在package.json的scripts字段里添加：

"scripts": {
  "start": "react-scripts start",
  "start:3000": "PORT=3000 react-scripts start",
  "start:4000": "PORT=4000 react-scripts start",
  "start:5000": "PORT=5000 react-scripts start",
  "start:6000": "PORT=6000 react-scripts start",
  // 其他原有脚本...
}

注意：上面的写法适用于Mac/Linux系统，如果是Windows系统，需要把PORT=xxx改成set PORT=xxx，比如：

"start:3000": "set PORT=3000 && react-scripts start"

2. 跨平台兼容方案（推荐） #

如果想让脚本在所有系统都能用，可以安装cross-env包来统一环境变量的设置：
首先安装依赖：

npm install cross-env --save-dev

然后修改脚本：

"scripts": {
  "start:3000": "cross-env PORT=3000 react-scripts start",
  "start:4000": "cross-env PORT=4000 react-scripts start",
  "start:5000": "cross-env PORT=5000 react-scripts start",
  "start:6000": "cross-env PORT=6000 react-scripts start",
}

之后你只需要在终端里运行对应的命令，比如npm run start:4000就能在4000端口启动应用了。

方法二：一键启动所有端口的实例 #

如果不想一个个开终端启动，可以用concurrently包同时运行多个启动命令：

1. 先安装依赖：

npm install concurrently --save-dev

2. 在package.json里添加一个整合脚本：

"scripts": {
  // 先保留上面的单个端口脚本
  "start:all": "concurrently \"npm run start:3000\" \"npm run start:4000\" \"npm run start:5000\" \"npm run start:6000\""
}

现在只需要运行npm run start:all，就能一次性启动所有端口的应用实例啦！

为什么这样能得到独立的存储？ #

浏览器的同源策略规定：域名、协议、端口三者只要有一个不同，就属于不同的源。虽然你的应用都运行在localhost，但端口不同，所以每个端口的应用都会拥有完全独立的localStorage和IndexedDB实例，完全满足你的多设备模拟需求。

小提示 #

• 每个实例都是独立的开发服务器，修改代码后所有实例都会自动热更新，不用手动重启
• 如果遇到端口被占用的提示，可以换个未被使用的端口，或者用命令杀掉占用端口的进程（比如Mac/Linux用lsof -ti:3000 | xargs kill -9，Windows用netstat -ano | findstr :3000找到PID后再taskkill /PID <PID> /F）

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