# LQAdminFront Docker 快速启动指南

## 🚀 快速开始

### 1. 构建镜像

```bash
# 进入前端项目目录
cd LQAdminFront

# 给构建脚本执行权限（Linux/Mac）
chmod +x build.sh

# 构建开发环境镜像
./build.sh -e dev

# 构建生产环境镜像
./build.sh -e prod -t v1.0.0
```

### 2. 运行容器

```bash
# 开发环境 (端口 3000)
docker-compose --profile dev up -d

# 测试环境 (端口 3001)
docker-compose --profile test up -d

# 生产环境 (端口 80)
docker-compose --profile prod up -d
```

### 3. 访问应用

- **开发环境**: http://localhost:3000
- **测试环境**: http://localhost:3001  
- **生产环境**: http://localhost

## 📁 文件说明

| 文件 | 说明 |
|------|------|
| `Dockerfile` | Docker 镜像构建文件 |
| `docker-compose.yml` | Docker Compose 配置 |
| `nginx.conf` | Nginx 服务器配置 |
| `docker-entrypoint.sh` | 容器启动脚本 |
| `build.sh` | 自动化构建脚本 |
| `.env.dev` | 开发环境配置 |
| `.env.test` | 测试环境配置 |
| `.env.prod` | 生产环境配置 |

## 🔧 环境配置

### 开发环境
- API地址: `http://localhost:8000`
- 调试模式: 开启
- 热重载: 支持

### 测试环境  
- API地址: `http://test-api.example.com`
- 调试模式: 开启
- 错误报告: 开启

### 生产环境
- API地址: `https://api.yourdomain.com`
- 调试模式: 关闭
- 性能优化: 开启

## 🛠 自定义配置

### 修改后端地址

```bash
# 方式1: 修改环境文件
vim .env.prod

# 方式2: 运行时指定环境变量
docker run -p 80:80 \
  -e VITE_API_BASE_URL=https://your-api.com \
  lqadmin-frontend:prod
```

### 修改应用标题

```bash
docker run -p 80:80 \
  -e VITE_APP_TITLE="您的应用名称" \
  lqadmin-frontend:prod
```

## 📊 监控和调试

```bash
# 查看容器状态
docker ps

# 查看容器日志
docker logs lqadmin-frontend-prod

# 进入容器调试
docker exec -it lqadmin-frontend-prod sh

# 健康检查
curl http://localhost/health
```

## 🔄 更新部署

```bash
# 1. 重新构建镜像
./build.sh -e prod -t v1.0.1

# 2. 停止旧容器
docker-compose --profile prod down

# 3. 启动新容器
docker-compose --profile prod up -d
```

## ❓ 常见问题

### Q: 容器启动失败？
A: 检查端口是否被占用，查看容器日志排查问题

### Q: API 请求失败？
A: 确认后端服务是否正常，检查 CORS 配置

### Q: 配置未生效？
A: 重新构建镜像，确保环境变量正确设置

更多详细信息请参考 [DOCKER_DEPLOYMENT.md](./DOCKER_DEPLOYMENT.md)