MikuMikuBeam项目中的端口配置修改指南

在开发基于MikuMikuBeam项目的应用时，开发者经常需要根据实际环境调整服务器和客户端的端口配置。本文将详细介绍如何修改前后端端口设置，以及需要注意的相关事项。

服务器端口修改

MikuMikuBeam项目的服务器默认运行在3000端口，修改方法如下：

1. 打开服务器主文件server/index.ts
2. 找到PORT变量定义处
3. 将默认值3000修改为目标端口号

需要注意的是，服务器端口修改后，前端代码中所有访问后端API的请求地址也需要相应调整，否则会导致前后端通信失败。

客户端端口修改

客户端端口可以通过修改Vite配置文件进行调整：

1. 打开项目根目录下的vite.config.ts文件
2. 在server配置项中添加或修改port属性
3. 设置所需的目标端口号

注意事项

1. 端口冲突问题：确保选择的端口未被其他服务占用，常用端口如8080、3000等容易被占用
2. 环境变量管理：建议将端口配置提取到环境变量中，便于不同环境下的灵活配置
3. 前后端协调：修改服务器端口后，必须同步更新前端请求地址中的端口号
4. 防火墙设置：如果部署在服务器上，确保新端口在防火墙规则中已开放

最佳实践

对于生产环境部署，建议：

1. 使用反向代理（如Nginx）处理端口映射
2. 将前端构建为静态文件，与API服务分离部署
3. 使用环境变量管理端口配置，而非硬编码
4. 为开发、测试和生产环境配置不同的端口方案

通过合理配置端口，可以确保MikuMikuBeam项目在不同环境下都能稳定运行，同时避免常见的端口冲突问题。