修改TTS-Generation-WebUI项目React UI默认端口的方法

在开发基于TTS-Generation-WebUI项目时，开发者经常需要修改默认端口以避免端口冲突或满足特定部署需求。本文将详细介绍如何修改该项目的React UI及相关服务的默认端口配置。

端口配置修改要点

TTS-Generation-WebUI项目涉及多个组件，每个组件都有独立的端口配置，需要统一修改才能确保系统正常运行。

1. 修改React UI前端端口

React UI前端默认运行在3000端口，可以通过以下两种方式修改：

方法一：修改package.json启动命令

"scripts": {
  "start": "next start -p 4201"
}

方法二：通过环境变量设置 在启动命令前设置PORT环境变量：

PORT=4201 npm start

或者Windows系统下：

SET PORT=4201 && npm start

2. 修改后端API服务端口

项目中的Gradio后端服务默认运行在4200端口，需要修改以下文件：

react-ui/src/pages/api/gradio/[name].tsx

const defaultBackend = "http://127.0.0.1:4200/";

3. 修改主配置文件端口

项目根目录下的tts-generation-webuiconfig.json文件包含了主服务端口配置：

{
  "server_port": 4200
}

端口修改注意事项

1. 端口冲突检查：修改前应确保新端口未被其他服务占用
2. 防火墙设置：如果启用了防火墙，需要放行新设置的端口
3. 多组件协调：确保前端、后端和主服务的端口配置相互匹配
4. 开发与生产环境：开发环境(dev)和生产环境(prod)可能需要不同的端口配置

最佳实践建议

1. 建议使用4000-5000范围内的端口，避免与常见服务冲突
2. 在团队开发环境中，建议将端口配置写入项目文档
3. 考虑使用环境变量来管理端口配置，便于不同环境的部署
4. 修改端口后，建议全面测试所有功能以确保服务间通信正常

通过以上配置修改，开发者可以灵活地调整TTS-Generation-WebUI项目的端口设置，满足各种开发和部署场景的需求。