如何修改Firebase Emulator Hub的端口？配置被自动删除问题

我运行Firebase模拟器时，看到的端口信息如下：

┌────────────────┬────────────────┬─────────────────────────────────┐
│ Emulator       │ Host:Port      │ View in Emulator UI             │
├────────────────┼────────────────┼─────────────────────────────────┤
│ Authentication │ 127.0.0.1:9099 │ http://127.0.0.1:4000/auth      │
├────────────────┼────────────────┼─────────────────────────────────┤
│ Functions      │ 127.0.0.1:5001 │ http://127.0.0.1:4000/functions │
├────────────────┼────────────────┼─────────────────────────────────┤
│ Firestore      │ 127.0.0.1:8080 │ http://127.0.0.1:4000/firestore │
├────────────────┼────────────────┼─────────────────────────────────┤
│ Storage        │ 127.0.0.1:9199 │ http://127.0.0.1:4000/storage   │
└────────────────┴────────────────┴─────────────────────────────────┘
  Emulator Hub running at 127.0.0.1:4400
  Other reserved ports: 4500, 9150

通常可以在firebase.json里配置各模拟器的端口，示例如下：

"emulators": {
  "auth": {
    "port": 9099
  },
  "functions": {
    "port": 5001
  },
  ...
}

但这种方式没办法修改Emulator Hub的端口（我需要把4400端口留给Storybook使用）。我尝试过在配置里添加hub字段：

"emulators": {
  "hub": {
    "port": 4401
  },
  ...
}

但启动模拟器时，这个hub配置会被自动删除。

可行解决方案 #

要修改Emulator Hub的端口，需通过命令行参数指定，而非firebase.json配置：

• 启动模拟器时直接添加--hub-port参数：

  firebase emulators:start --hub-port 4401
  

• 若要默认使用指定端口，可在项目package.json的scripts中添加自定义命令：

  "scripts": {
    "emulators": "firebase emulators:start --hub-port 4401"
  }
  

之后运行npm run emulators即可用指定端口启动Hub及其他模拟器。

如果需要搭配其他参数（比如导入预设数据），可组合命令：

firebase emulators:start --hub-port 4401 --import ./emulator-data

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