在Replit上搭建React+Flask前后端分离架构的问题咨询

一、配置同时启动前后端 #

Replit支持通过自定义启动脚本实现前后端同时启动，无需反复切换环境，步骤如下：

1. 确保项目为前后端分离结构，根目录下分别有backend（存放Flask代码）和frontend（存放React代码）两个子目录。
2. 在项目根目录创建start.sh启动脚本，内容如下：

# 安装并启动Flask后端（后台运行）
cd backend
pip install -r requirements.txt
python app.py &

# 安装并启动React前端
cd ../frontend
npm install
npm start

3. 修改根目录的.replit文件，指定运行该脚本：

run = "./start.sh"
language = "bash"

保存后点击Replit的「Run」按钮，即可自动同时启动前后端服务。

二、解决0.0.0.0的端口冲突问题 #

0.0.0.0是Replit要求的绑定地址（否则服务无法对外访问），只要前后端使用不同端口就不会引发冲突：

• Flask端：在app.py中指定自定义端口（比如5001）：

if __name__ == "__main__":
    app.run(host="0.0.0.0", port=5001)

• React端：在frontend/package.json的启动脚本中指定端口（比如3001）：

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

两个服务绑定不同端口后，即可正常对外提供服务。

额外注意事项 #

• Replit免费版资源有限，同时运行两个服务可能出现短暂卡顿，建议精简依赖包；
• 启动脚本中的&符号用于让Flask后台运行，确保React启动命令能正常执行；如果后台运行不稳定，可替换为nohup python app.py > /dev/null 2>&1 &。

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