VanceFeedback 前后端分离部署教程

本教程将指导您如何使用 Docker 分别部署 VanceFeedback 的前端和后端服务。

📋 目录

部署架构
系统要求
快速开始
详细配置
独立部署
常见问题
部署方式对比

🏗️ 部署架构

分离部署方案包含两个独立的 Docker 容器：

┌─────────────────┐         ┌─────────────────┐
│   前端容器      │         │   后端容器      │
│   Nginx:Alpine  │────────▶│   Node:Alpine   │
│   端口: 3020    │  API请求 │   端口: 3030    │
└─────────────────┘         └─────────────────┘
        │                           │
        │                           │
        ▼                           ▼
   用户浏览器                   数据库存储

优势：

✅ 前后端独立部署和扩展
✅ 方便配置 CDN 和负载均衡
✅ 更灵活的资源分配
✅ 便于团队分工维护

💻 系统要求

Docker 20.10 或更高版本
Docker Compose 1.29 或更高版本
至少 2GB 可用内存
至少 5GB 可用磁盘空间

检查 Docker 版本：

docker --version
docker-compose --version

🚀 快速开始

方式一：使用 Docker Compose（推荐）

这是最简单的部署方式，一条命令即可启动前后端服务。

1. 进入项目目录

cd /path/to/VanceFeedback

2. （可选）配置环境变量

# 复制环境变量示例文件
cp .env.example .env

# 编辑 .env 文件，配置数据库等信息
# 如果不配置，系统将在首次访问时进入设置向导
notepad .env  # Windows
# 或
vim .env      # Linux/Mac

3. 启动服务

# 构建并启动所有服务（后台运行）
docker-compose -f docker-compose.separated.yml up -d --build

# 如果只想启动，不重新构建
docker-compose -f docker-compose.separated.yml up -d

4. 访问应用

前端界面: http://localhost:3020
后端 API: http://localhost:3030/api/status

5. 查看日志

# 查看所有服务日志
docker-compose -f docker-compose.separated.yml logs -f

# 只查看后端日志
docker-compose -f docker-compose.separated.yml logs -f backend

# 只查看前端日志
docker-compose -f docker-compose.separated.yml logs -f frontend

6. 停止服务

# 停止服务但保留容器
docker-compose -f docker-compose.separated.yml stop

# 停止并删除容器（数据卷不会被删除）
docker-compose -f docker-compose.separated.yml down

# 停止并删除容器和数据卷（谨慎使用！）
docker-compose -f docker-compose.separated.yml down -v

⚙️ 详细配置

环境变量说明

编辑 .env 文件或在 docker-compose.separated.yml 中配置：

后端配置

变量名	说明	默认值	必填
`PORT`	后端服务端口	3030	否
`DB_TYPE`	数据库类型：`sqlite` 或 `mysql`	sqlite	否
`DB_HOST`	MySQL 主机地址	-	使用 MySQL 时必填
`DB_PORT`	MySQL 端口	3306	否
`DB_USER`	MySQL 用户名	-	使用 MySQL 时必填
`DB_PASS`	MySQL 密码	-	使用 MySQL 时必填
`DB_NAME`	MySQL 数据库名	vancefeedback	否
`ADMIN_USER`	初始管理员用户名	-	否（首次启动可选）
`ADMIN_PASS`	初始管理员密码	-	否（首次启动可选）

使用 SQLite（默认）

无需配置数据库变量，系统会自动在 server/data/feedback.db 创建数据库。

示例配置：

PORT=3030

使用 MySQL

示例配置：

PORT=3030
DB_TYPE=mysql
DB_HOST=host.docker.internal  # 访问宿主机的 MySQL
DB_PORT=3306
DB_USER=vancefeedback
DB_PASS=your_secure_password
DB_NAME=vancefeedback
ADMIN_USER=admin
ADMIN_PASS=admin123456

提示：在 Docker 容器中访问宿主机服务，Windows 和 Mac 使用 host.docker.internal，Linux 使用 172.17.0.1 或创建网络桥接。

修改端口

如果需要修改默认端口，编辑 docker-compose.separated.yml：

services:
  backend:
    ports:
      - "8080:3030"  # 将后端映射到宿主机的 8080 端口
    environment:
      - PORT=3030    # 容器内部端口保持不变
  
  frontend:
    ports:
      - "8090:3020"  # 将前端映射到宿主机的 8090 端口

数据持久化

数据卷配置已在 docker-compose.separated.yml 中设置：

volumes:
  - ./server/data:/app/server/data      # SQLite 数据库文件
  - ./server/config:/app/server/config  # 配置文件

数据保存在宿主机的 ./server/data 和 ./server/config 目录中，即使删除容器也不会丢失。

🔧 独立部署

如果需要在不同服务器上部署前端和后端，或使用 Kubernetes 等编排工具：

后端独立部署

1. 构建后端镜像

docker build -f Dockerfile.backend -t vancefeedback-backend:latest .

2. 运行后端容器

docker run -d \
  --name vancefeedback-backend \
  -p 3030:3030 \
  -e PORT=3030 \
  -e DB_TYPE=sqlite \
  -v $(pwd)/server/data:/app/server/data \
  -v $(pwd)/server/config:/app/server/config \
  --restart unless-stopped \
  vancefeedback-backend:latest

使用 MySQL 的示例：

docker run -d \
  --name vancefeedback-backend \
  -p 3030:3030 \
  -e PORT=3030 \
  -e DB_TYPE=mysql \
  -e DB_HOST=192.168.1.100 \
  -e DB_PORT=3306 \
  -e DB_USER=vancefeedback \
  -e DB_PASS=your_password \
  -e DB_NAME=vancefeedback \
  -e ADMIN_USER=admin \
  -e ADMIN_PASS=admin123456 \
  --restart unless-stopped \
  vancefeedback-backend:latest

前端独立部署

前提：修改 nginx 配置

如果后端不在同一台服务器，需要修改 nginx.conf 文件：

# 修改第 16 行
location /api/ {
    proxy_pass http://your-backend-server:3030;  # 改为实际的后端地址
    # ... 其他配置保持不变
}

1. 构建前端镜像

docker build -f Dockerfile.frontend -t vancefeedback-frontend:latest .

2. 运行前端容器

docker run -d \
  --name vancefeedback-frontend \
  -p 3020:3020 \
  --restart unless-stopped \
  vancefeedback-frontend:latest

跨服务器部署示例

服务器 A（后端）：

# IP: 192.168.1.100
docker run -d \
  --name vancefeedback-backend \
  -p 3030:3030 \
  -e PORT=3030 \
  -v /data/vancefeedback/data:/app/server/data \
  -v /data/vancefeedback/config:/app/server/config \
  vancefeedback-backend:latest

服务器 B（前端）：

修改 nginx.conf：

location /api/ {
    proxy_pass http://192.168.1.100:3030;
    # ...
}

重新构建并运行：

docker build -f Dockerfile.frontend -t vancefeedback-frontend:latest .
docker run -d \
  --name vancefeedback-frontend \
  -p 3020:3020 \
  vancefeedback-frontend:latest

🔍 常见问题

1. 前端无法连接后端 API

症状：页面加载正常，但无法获取数据，控制台显示网络错误。

解决方案：

使用 Docker Compose：确保两个服务在同一网络中，服务名称正确（backend）
独立部署：检查 nginx.conf 中的 proxy_pass 地址是否正确
防火墙：确保后端端口（3030）未被防火墙阻止
测试后端：访问 http://后端地址:3030/api/status 确认后端正常

2. 端口被占用

症状：启动时提示 "port is already allocated"

解决方案：

# 查看端口占用
# Windows
netstat -ano | findstr :3020
netstat -ano | findstr :3030

# Linux/Mac
lsof -i :3020
lsof -i :3030

# 停止占用端口的进程或修改 docker-compose.separated.yml 中的端口映射

3. 数据库连接失败

症状：后端日志显示 "Failed to initialize DB"

解决方案：

检查 MySQL 服务是否运行
验证数据库用户名、密码、主机地址是否正确
确保数据库已创建（或有创建权限）
从容器内测试连接：

docker exec -it vancefeedback-backend sh
# 安装 mysql 客户端测试（如果需要）

4. 权限问题

症状：无法写入数据库文件或配置文件

解决方案：

# 确保数据目录有写权限
chmod -R 755 server/data server/config

# 或者修改目录所有者
chown -R 1000:1000 server/data server/config

5. 镜像构建失败

症状：npm install 失败或超时

解决方案：

# 使用国内镜像源（修改 Dockerfile）
RUN npm config set registry https://registry.npmmirror.com/
RUN npm install

# 或者在宿主机预先下载依赖
npm install
# 然后再构建 Docker 镜像

6. 初次访问进入设置向导

这是正常现象。如果不想每次都手动配置：

配置环境变量（ADMIN_USER, ADMIN_PASS, DB_*）启动容器
或首次手动配置后，配置会保存在 server/config/db_config.json
下次启动时会自动读取配置

📊 部署方式对比

分离部署 vs 合并部署

特性	分离部署	合并部署
容器数量	2个（前端 + 后端）	1个
前端端口	3020	-
后端端口	3030	3000
资源消耗	稍高	较低
扩展性	⭐⭐⭐⭐⭐ 可独立扩展	⭐⭐⭐ 整体扩展
部署复杂度	中等	简单
CDN支持	⭐⭐⭐⭐⭐ 前端可直接接入CDN	⭐⭐⭐ 需要反向代理
负载均衡	⭐⭐⭐⭐⭐ 前后端可独立负载均衡	⭐⭐⭐ 整体负载均衡
适用场景	生产环境、高流量、团队协作	开发测试、小流量、快速部署

什么时候使用分离部署？

✅ 推荐使用分离部署：

生产环境部署
预期流量较大，需要独立扩展前后端
需要使用 CDN 加速前端资源
前后端团队分工明确
需要灵活的负载均衡策略

✅ 推荐使用合并部署：

开发和测试环境
个人项目或小团队
流量较小，资源有限
追求部署简单快速

📚 其他资源

生产部署建议

使用 HTTPS：配置 SSL 证书（推荐使用 Let's Encrypt）
反向代理：在前端容器前加一层 Nginx/Caddy 处理 SSL 和域名
数据备份：定期备份 server/data 和 server/config 目录
监控日志：配置日志收集和监控（如 ELK、Grafana）
资源限制：在 Docker Compose 中配置 CPU 和内存限制
安全加固：
- 更改默认端口
- 使用强密码
- 定期更新镜像
- 配置防火墙规则

性能优化

前端优化：
- 启用 Nginx gzip 压缩（已配置）
- 配置静态资源缓存（已配置）
- 使用 CDN 分发前端资源
后端优化：
- 使用 MySQL 而非 SQLite（大流量场景）
- 配置数据库连接池
- 启用 Redis 缓存（需自行扩展）
容器优化：
- 使用 Alpine 镜像（已使用）
- 多阶段构建减小镜像体积（已实现）
- 配置健康检查

🙋 获取帮助

如有问题，请：

查看容器日志：docker-compose -f docker-compose.separated.yml logs -f
检查配置文件是否正确
参考常见问题章节
提交 Issue 到项目仓库

祝您部署顺利！ 🎉

FilesExpand file tree

DEPLOY_SEPARATED.md

Latest commit

History

DEPLOY_SEPARATED.md

File metadata and controls

VanceFeedback 前后端分离部署教程

📋 目录

🏗️ 部署架构

💻 系统要求

🚀 快速开始

方式一：使用 Docker Compose（推荐）

1. 进入项目目录

2. （可选）配置环境变量

3. 启动服务

4. 访问应用

5. 查看日志

6. 停止服务

⚙️ 详细配置

环境变量说明

后端配置

使用 SQLite（默认）

使用 MySQL

修改端口

数据持久化

🔧 独立部署

后端独立部署

1. 构建后端镜像

2. 运行后端容器

前端独立部署

前提：修改 nginx 配置

1. 构建前端镜像

2. 运行前端容器

跨服务器部署示例

🔍 常见问题

1. 前端无法连接后端 API

2. 端口被占用

3. 数据库连接失败

4. 权限问题

5. 镜像构建失败

6. 初次访问进入设置向导

📊 部署方式对比

分离部署 vs 合并部署

什么时候使用分离部署？

📚 其他资源

相关文件说明

生产部署建议

性能优化

🙋 获取帮助