# MagicPot Docker 部署指南

## 项目简介
MagicPot是一个卡通手绘风格的语音交互魔法锅游戏，已经Docker化便于部署。

## 快速开始

### 1. 构建Docker镜像
```bash
docker build -t magicpot-game .
```

### 2. 运行容器
```bash
docker run -d -p 8080:80 --name magicpot magicpot-game
```

### 3. 访问游戏
打开浏览器访问：http://localhost:8080

## Docker命令详解

### 构建镜像
```bash
# 基础构建
docker build -t magicpot-game .

# 指定标签版本
docker build -t magicpot-game:v1.0 .

# 查看镜像
docker images | grep magicpot
```

### 运行容器
```bash
# 后台运行（推荐）
docker run -d -p 8080:80 --name magicpot magicpot-game

# 前台运行（调试用）
docker run -p 8080:80 --name magicpot magicpot-game

# 自定义端口
docker run -d -p 3000:80 --name magicpot magicpot-game

# 运行后访问：http://localhost:3000
```

### 容器管理
```bash
# 查看运行中的容器
docker ps

# 查看所有容器
docker ps -a

# 停止容器
docker stop magicpot

# 启动容器
docker start magicpot

# 重启容器
docker restart magicpot

# 删除容器
docker rm magicpot

# 查看容器日志
docker logs magicpot

# 进入容器（调试用）
docker exec -it magicpot sh
```

## Docker Compose（可选）

创建 `docker-compose.yml` 文件：

```yaml
version: '3.8'

services:
  magicpot:
    build: .
    ports:
      - "8080:80"
    restart: unless-stopped
    container_name: magicpot-game
```

使用Docker Compose运行：
```bash
# 构建并启动
docker-compose up -d

# 停止
docker-compose down

# 查看日志
docker-compose logs
```

## 技术栈
- **Base Image**: nginx:alpine
- **Web Server**: Nginx
- **Frontend**: HTML5 + CSS3 + JavaScript
- **Features**: 语音识别、Canvas动画、粒子系统

## 配置说明

### Nginx配置
- 静态文件缓存：1年
- HTML文件缓存：1小时
- 启用Gzip压缩
- 安全头设置
- 支持音频文件(.mp3)

### 端口配置
- 容器内部端口：80
- 建议外部端口：8080（可自定义）

## 故障排除

### 常见问题

1. **端口被占用**
   ```bash
   # 检查端口使用情况
   netstat -an | grep :8080
   # 或使用其他端口
   docker run -d -p 3000:80 --name magicpot magicpot-game
   ```

2. **容器启动失败**
   ```bash
   # 查看详细错误信息
   docker logs magicpot
   
   # 检查容器状态
   docker ps -a
   ```

3. **游戏无法正常运行**
   - 确保浏览器支持Web Speech API
   - 检查麦克风权限设置
   - 尝试使用HTTPS（语音识别需要）

### 性能优化

1. **镜像大小优化**
   - 使用alpine版本nginx（已实现）
   - 清理不必要的文件（.dockerignore已配置）

2. **运行时优化**
   ```bash
   # 限制内存使用
   docker run -d -p 8080:80 -m 512m --name magicpot magicpot-game
   
   # 设置CPU限制
   docker run -d -p 8080:80 --cpus="1.0" --name magicpot magicpot-game
   ```

## 开发环境

如果需要在开发环境中运行：
```bash
# 本地开发（不使用Docker）
npm install
npm run dev

# 或使用Python
python -m http.server 8000
```

## 版本信息
- Docker Image: magicpot-game:latest
- Nginx Version: alpine
- Node.js Version: >=14.0.0（仅开发环境需要）