67 lines
2.4 KiB
Markdown
67 lines
2.4 KiB
Markdown
# 萌芽漂流瓶（前后端分离版）
|
||
|
||
- `mengyadriftbottle-backend/`: Flask API（`/api`）+ 管理后台视图（`/admin`）。
|
||
- `mengyadriftbottle-frontend/`: React + Vite 单页应用，调用上述 API 并提供用户交互界面。
|
||
|
||
## 快速开始
|
||
|
||
### 后端
|
||
```cmd
|
||
cd mengyadriftbottle-backend
|
||
python -m venv .venv
|
||
.venv\Scripts\activate
|
||
pip install -r requirements.txt
|
||
python app.py
|
||
```
|
||
服务器默认监听 `http://localhost:5002`，所有公开接口挂载在 `http://localhost:5002/api`。
|
||
|
||
### 前端
|
||
确保后端已运行后启动 Vite：
|
||
```cmd
|
||
cd mengyadriftbottle-frontend
|
||
npm install
|
||
npm run dev
|
||
```
|
||
此命令会在 `http://localhost:5173` 打开 React 界面，所有 `/api/*` 请求会被代理到本地 Flask 服务。
|
||
|
||
### 自定义配置
|
||
在 `mengyadriftbottle-frontend` 下创建 `.env` 覆盖默认地址：
|
||
```
|
||
VITE_API_BASE_URL=http://your-domain/api
|
||
VITE_ADMIN_URL=https://your-domain/admin/login
|
||
```
|
||
|
||
后端使用根目录的 `templates/`（管理后台视图）和 `static/`（样式文件），数据文件（`bottles.json`、`config.json` 等）现已迁移至 `mengyadriftbottle-backend/` 目录，所有前端页面由 React 单页应用提供。
|
||
|
||
### 轻量后台
|
||
|
||
- 访问 `http://localhost:5002/admin?token=shumengya520`（或自定义 `DRIFT_BOTTLE_ADMIN_TOKEN`）即可查看/删除漂流瓶列表。
|
||
- 旧版登录后台依然可通过 `http://localhost:5002/admin/login` 使用。
|
||
|
||
## Docker 部署
|
||
|
||
若希望以单一容器运行前后端，可使用根目录提供的 `Dockerfile`：
|
||
|
||
1. 构建镜像：
|
||
```cmd
|
||
cd e:\Python\前后端分离项目\萌芽漂流瓶
|
||
docker build -t mengyadriftbottle:latest .
|
||
```
|
||
2. 创建持久化目录（宿主机）：
|
||
```bash
|
||
mkdir -p /shumengya/docker/storage/mengyadriftbottle
|
||
```
|
||
3. 运行容器（对外暴露 6767 端口，并挂载数据目录）：
|
||
```bash
|
||
docker run -d \
|
||
--name mengyadriftbottle \
|
||
-p 6767:6767 \
|
||
-v /shumengya/docker/storage/mengyadriftbottle:/app/mengyadriftbottle-backend \
|
||
mengyadriftbottle:latest
|
||
```
|
||
|
||
容器内会：
|
||
- 使用 `serve` 在 6767 端口提供构建后的前端静态文件。
|
||
- 使用 `gunicorn` 在 5002 端口运行 Flask API（前端通过 `VITE_API_BASE_URL` 访问 `http://localhost:5002/api`）。
|
||
- 将 `/app/mengyadriftbottle-backend` 作为数据目录，因此挂载即可让 `bottles.json` 等文件持久化在宿主机 `/shumengya/docker/storage/mengyadriftbottle`。
|