历经 15 天的硬核开发,Project Echo 终于迎来了最终交付。为了彻底解决“在我电脑上能跑”的环境依赖噩梦,今天我们将引入 Docker 和 Docker Compose。我们将编写多阶段构建的 Dockerfile,配置 Nginx 反向代理,并编排 Backend、Frontend、Redis 三大容器。只需一个 docker-compose up -d 指令,即可在任何服务器上拉起这套包含 RAG、VAD 和多模态交互的完整 AI 系统。


一、 项目进度:Day 15 完美收官

根据项目路线图,这是最后一块拼图。


二、 核心架构:容器化编排 (Orchestration)

在 Day 14,我们还得分别开两个终端跑 python server.py 和 npm run dev,还要单独开一个 Redis。这在生产环境是不可接受的。

Docker 的作用:把代码、环境、依赖全部塞进一个个“集装箱”里,保证在任何地方运行效果都一样。

部署架构图 (Architecture Diagram)


三、 实战 Part 1:后端容器化

1. 编写 Dockerfile.backend

在项目根目录下新建 Dockerfile.backend。
为了减小体积,我们使用 python:3.10-slim 基础镜像。

# 基础镜像
FROM python:3.10-slim

# 设置工作目录
WORKDIR /app

# 安装系统依赖 (ffmpeg 用于音频处理, build-essential 用于编译)
RUN apt-get update && apt-get install -y \
    ffmpeg \
    build-essential \
    && rm -rf /var/lib/apt/lists/*

# 复制依赖文件并安装
# (利用 Docker 缓存层,代码变动不影响依赖安装)
COPY requirements.txt .
RUN pip install --no-cache-dir -r requirements.txt

# 复制所有源代码
COPY . .

# 暴露端口
EXPOSE 8000

# 启动命令
CMD ["python", "server.py"]

2. 修改配置 (src/config/settings.py)

关键点:在 Docker 内部,不能用 localhost 连接 Redis,必须用 Redis 容器的服务名(我们稍后定义为 echo-redis)。

class Config:
    # ... 其他配置 ...
    
    # 优先读取环境变量,如果没有则回退到 localhost (本地开发用)
    # 在 docker-compose.yml 中我们会注入 REDIS_URL=redis://echo-redis:6379/0
    REDIS_URL = os.getenv("REDIS_URL", "redis://localhost:6379/0")

四、 实战 Part 2:前端容器化

前端 Vue 需要先编译成静态 HTML/CSS/JS 文件,然后用 Nginx 进行服务。

1. 编写 Dockerfile.frontend

在 echo-client 目录下(或者根目录,注意路径)新建 Dockerfile.frontend。

# --- Stage 1: Build (编译阶段) ---
FROM node:18 AS builder

WORKDIR /app
COPY echo-client/package*.json ./
RUN npm install

COPY echo-client/ .
# 这一步会生成 dist 文件夹
RUN npm run build

# --- Stage 2: Serve (运行阶段) ---
FROM nginx:alpine

# 把编译好的 dist 文件夹复制到 Nginx 目录
COPY --from=builder /app/dist /usr/share/nginx/html

# 暴露 80 端口
EXPOSE 80

# 启动 Nginx
CMD ["nginx", "-g", "daemon off;"]

五、 实战 Part 3:Docker Compose 编排

这是大结局的魔法时刻。我们将创建一个 docker-compose.yml 文件,把所有东西串起来。

文件:docker-compose.yml (放在项目根目录)

version: '3.8'

services:
  # 服务 1: 后端 API
  echo-backend:
    build:
      context: .
      dockerfile: Dockerfile.backend
    container_name: echo-backend
    ports:
      - "8000:8000"
    environment:
      # 注入环境变量
      - REDIS_URL=redis://echo-redis:6379/0
      # 记得把你的 .env 里的 Key 也填在这里,或者使用 env_file
      - DEEPSEEK_API_KEY=${DEEPSEEK_API_KEY}
      - BASE_URL=${BASE_URL}
    volumes:
      # 挂载 RAG 数据库,保证重启不丢失
      - ./data/chroma_db:/app/data/chroma_db
      # 挂载静态文件目录,保证生成的语音不丢失
      - ./static:/app/static
    depends_on:
      - echo-redis
    networks:
      - echo-network

  # 服务 2: 前端 Vue
  echo-frontend:
    build:
      context: .
      dockerfile: Dockerfile.frontend
    container_name: echo-frontend
    ports:
      - "80:80"
    depends_on:
      - echo-backend
    networks:
      - echo-network

  # 服务 3: Redis 数据库
  echo-redis:
    image: redis:latest
    container_name: echo-redis
    ports:
      - "6379:6379"
    volumes:
      # Redis 数据持久化
      - redis_data:/data
    networks:
      - echo-network

# 定义数据卷
volumes:
  redis_data:

# 定义网络
networks:
  echo-network:
    driver: bridge

🔐 环境变量小贴士

在根目录创建一个 .env 文件(Docker Compose 会自动读取):

DEEPSEEK_API_KEY=sk-xxxxxxx
BASE_URL=https://api.deepseek.com

六、 终极启动:一键部署

  1. 启动
    打开终端,在根目录执行:

    codeBash
    docker-compose up -d --build
    • --build: 强制重新构建镜像。

    • -d: 后台运行。

  2. 等待
    你会看到 Docker 疯狂刷屏,下载 Python、Node 环境,安装依赖... 这可能需要几分钟,喝杯咖啡吧 ☕。

  3. 验证

    • 访问前端:打开浏览器 http://localhost (无需加端口,默认80)。

    • 访问后端文档:打开 http://localhost:8000/docs。

如果一切顺利,你会看到那个熟悉的 Vue 聊天界面。但这一次,它不再依赖你的 VS Code,而是运行在独立的容器中。哪怕你把代码删了(别真删),只要容器在,服务就在!


七、 全剧终:回顾与展望

1. 我们做到了什么?

在 15 天前,我们还在纠结 Python 环境怎么配。
现在,我们拥有了一个:

  • ✅ 全栈架构:Vue3 + FastAPI + Redis + ChromaDB。

  • ✅ 超级大脑:集成 RAG 知识库与 Multi-Query 检索。

  • ✅ 多模态交互:支持 VAD 语音打断、STT 听觉、TTS 情感语音。

  • ✅ 生产级交付:完全 Docker 化,随时可以部署到阿里云/腾讯云。

2. 未来的路 (Roadmap 2.0)

AI 的世界没有终点。后期我还将尝试对这个项目进行更多的优化,例如:

  • 多模态视觉:给它装上眼睛(GPT-4o-mini Vision),让它看懂图片。

  • 数字人:接入 Live2D 或 UE5,让傲娇酱拥有虚拟形象。

  • Agent 能够:给它联网搜索的能力,甚至让它帮你写代码。

感谢你陪伴,这不仅是一个项目,它也是通往 AI 全栈工程师的入场券,后面我将继续从项目入手,继续深入讲解现代AI在实际项目中的运用,希望借助这种形式和大家共同学习成长。

Logo

有“AI”的1024 = 2048,欢迎大家加入2048 AI社区

更多推荐