202326010

本项目包含 前端 (React + Vite) 和 后端 (FastAPI + Celery + PostgreSQL + MySQL + Redis)，推荐使用 Docker 进行本地开发和运行。

当前目录结构（简化版）：

• src/frontend：前端 React + Vite 工程
• src/backend：后端 FastAPI 工程
• docker-compose.yml：一键启动数据库、后端、前端的 Docker 编排文件

如何在 Docker 中进行前端开发

适合对 Node.js / Vite 不熟悉的同学，全部命令只需要在项目根目录执行。

1. 先安装好开发环境

• 必须安装：
  • Docker Desktop（Windows 建议开启 WSL2 后端）
  • git（用于拉取项目，可选）

安装完成后，确保终端可以执行：

docker --version
docker compose version

2. （推荐）只启动前端开发环境

如果你暂时只想改前端页面，不需要数据库和后端：

cd D:\Desktop\202326010   # 进入项目根目录
docker compose up frontend

启动成功后：

• 在浏览器访问 http://localhost:3000
• 修改本地 src/frontend 目录下的代码，页面会自动热更新（HMR）

停止开发：在终端中按 Ctrl + C 即可退出前端容器。

3. 启动「前端 + 后端 + 数据库」整体环境

如果需要调试前后端联动：

cd D:\Desktop\202326010
docker compose up

• 前端：http://localhost:3000
• 后端 API：http://localhost:8000

你也可以只启动部分服务，例如：

docker compose up backend postgres-meta mysql-user redis_client

4. 修改代码后的体验

前端和后端的代码目录都挂载到了容器中：

• 修改 src/frontend 下的文件 → 前端页面自动刷新
• 修改 src/backend 下的文件 → FastAPI + Celery 会自动重载（--reload）

不需要在容器里重新安装依赖或重启容器，非常适合开发。

5. 常见问题

• 端口被占用：
  • 如果 3000 或 8000 已被其他程序占用，可以修改 docker-compose.yml 中对应的端口映射（冒号左边的数字）。
• 前端打不开 / 白屏：
  • 确认终端中前端容器日志没有明显报错；
  • 如果你本地也安装了 Node，不要同时在本机直接运行 npm run dev 和 Docker 里的前端服务，否则容易端口冲突。

如果你对终端命令不熟，只要记住：进入项目目录，执行 docker compose up frontend，浏览器打开 http://localhost:3000 即可开始前端开发。