如何本地测试React+Python前后端Web应用，无需重复构建Docker镜像？

一、前端（React JS）本地运行 #

• 先确认本地装了Node.js和npm/yarn，这是React运行的基础
• 进入前端代码所在目录（如果前后端分目录存放，找到对应前端文件夹）
• 第一次运行或依赖变更时，安装依赖：npm install
• 启动本地开发服务器：npm start，默认会在http://localhost:3000启动，支持热重载——修改代码后页面自动刷新，不用手动重启

二、后端（Python）本地运行 #

• 确保本地装了Python3和pip
• 进入后端代码目录
• 推荐创建虚拟环境避免依赖冲突：
  • 创建：python3 -m venv venv
  • 激活：
    • macOS/Linux：source venv/bin/activate
    • Windows：venv\Scripts\activate
• 安装后端依赖：如果有requirements.txt，直接执行pip install -r requirements.txt；如果没有，去看原来的Dockerfile，把里面pip install命令后的包列出来，自己新建一个requirements.txt再安装
• 启动后端服务：
  • 如果是Flask框架：flask run --reload（--reload开启热重载，改代码自动重启）
  • 如果是FastAPI框架：uvicorn main:app --reload
  • 普通Python脚本：比如入口是app.py，就执行python app.py
    注意记下后端运行的端口，比如默认Flask是5000，FastAPI是8000

三、解决跨域问题 #

前端在3000端口，后端在其他端口，浏览器会有跨域限制，两种解决方法选其一：

方法1：React开发服务器代理 #

在前端项目的package.json里加一行：

"proxy": "http://localhost:5000"

把地址换成你的后端实际端口，重启前端服务后，前端发起的请求（比如fetch('/api/data')）会自动转发到后端对应地址

方法2：后端配置跨域支持 #

• Flask：先装flask-cors，然后在代码里加：

  from flask_cors import CORS
  app = Flask(__name__)
  CORS(app)  # 测试环境可以直接全开，生产环境再限制具体域名
  

• FastAPI：先装fastapi-cors，然后配置：

  from fastapi.middleware.cors import CORSMiddleware
  app = FastAPI()
  app.add_middleware(
      CORSMiddleware,
      allow_origins=["http://localhost:3000"],
      allow_credentials=True,
      allow_methods=["*"],
      allow_headers=["*"],
  )
  

四、验证代码修改 #

• 前端：改完代码，开发服务器自动刷新页面，直接看效果
• 后端：开了热重载的话，改完代码服务自动重启；没开的话手动重启一下就行

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