Docker容器化部署实战指南：Django+Vue

对应的基础知识学习地址，我看了B站上一个博主的视频，介绍得非常详细，视频中详细介绍了什么是镜像、镜像如何下载、什么是容器、挂载卷、Dockerfile以及Docker Compose：https://www.bilibili.com/video/BV1THKyzBER6/?spm_id_from=333.1391.0.0

一、Docker基础概念

1.1 什么是Docker？

学会docker部署项目，首先需要了解一下docker中几个非常重要的概念：

镜像（Image）：指的是我们在Docker Hub上下载的一些模板，比如MySQL、Nginx这些，镜像下载好了之后会存储在我们Docker目录的一个文件中，我们需要创建容器来运行镜像。
容器（Container）：容器是镜像的运行实例，通过镜像创建的独立运行环境。
挂载卷：用于在容器和宿主机之间共享数据，实现数据的持久化。
Dockerfile：用于构建镜像的脚本文件
docker-compose：用于定义和运行多容器Docker应用的工具

部署前后端项目，主要是要去编写前端和后端对应的dockerfile文件，然后使用docker-compose将所有容器部署在同一network下。

1.2 Docker基本命令

下面是一些常见的docker指令

命令	描述
`docker --version`	查看Docker版本
`docker ps`	查看运行中的容器
`docker ps -a`	查看所有容器（包括停止的）
`docker images`	查看镜像
`docker stop <container_id>`	停止容器
`docker start <container_id>`	启动容器
`docker rm <container_id>`	删除容器
`docker rmi <image_id>`	删除镜像
`docker logs <container_id>`	查看容器日志
`docker exec -it <container_id> /bin/bash`	进入容器

二、项目结构说明

2.1 当前项目结构

以我当前项目在来进行一个讲解，我当前的项目结构是：

AgentProject/
├── backend/ # Django后端
│ ├── manage.py
│ ├── requirements.txt
│ ├── backend/
│ │ ├── settings.py
│ │ └── ...
│ └── ...
├── frontend/ # Vue 3前端
│ ├── package.json
│ ├── vite.config.ts
│ └── src/
│ └── ...
└── README.md

只需要在当前前后端分离项目下创建好对应的 dockerfile 文件和 docker-compose 文件即可，这两个文件的创建可以让ai模型根据项目直接进行生成。

AgentProject/
├── backend/
│ ├── Dockerfile # 后端Dockerfile
│ └── ...
├── frontend/
│ ├── Dockerfile # 前端Dockerfile
│ └── ...
├── docker-compose.yml # Docker Compose配置文件
├── .env # 环境变量文件
└── nginx/
└── nginx.conf # Nginx配置文件（可选）

三、Dockerfile编写

3.1 后端Dockerfile

创建文件：backend/Dockerfile

# 使用官方Python镜像作为基础镜像
FROM python:3.11.8-slim
# 设置工作目录
WORKDIR /app

# 设置环境变量
ENV PYTHONDONTWRITEBYTECODE=1
ENV PYTHONUNBUFFERED=1

# 安装系统依赖
RUN apt-get update && apt-get install -y \
    gcc \
    g++ \
    make \
    libpq-dev \
    pkg-config \
    default-libmysqlclient-dev \
    && rm -rf /var/lib/apt/lists/*

# 复制requirements文件
COPY requirements.txt /app/

# 安装Python依赖
RUN pip install --no-cache-dir -r requirements.txt

# 复制项目文件
COPY . /app/

# 暴露端口
EXPOSE 8000

# 启动命令
CMD ["python", "manage.py", "runserver", "0.0.0.0:8000"]

说明：每个项目文件不同，根据自己项目编写（可以使用ai工具进行编写）

FROM python:3.11.8-slim：使用Python 3.11.8的slim版本
WORKDIR /app：设置工作目录
ENV：设置环境变量
RUN apt-get update：安装系统依赖
COPY requirements.txt：复制依赖文件
RUN pip install：安装Python依赖
COPY . /app/：复制项目文件
EXPOSE 8000：暴露8000端口
CMD：启动Django服务器

3.2 前端Dockerfile

# 构建阶段
FROM node:22-alpine AS build-stage
# 设置工作目录
WORKDIR /app

# 复制package文件
COPY package*.json ./

# 安装依赖
RUN npm install

# 复制项目文件
COPY . .

# 构建项目
RUN npm run build

# 生产阶段
FROM nginx:1.26-alpine

# 复制nginx配置
COPY nginx.conf /etc/nginx/nginx.conf

# 从构建阶段复制构建产物
COPY --from=build-stage /app/dist /usr/share/nginx/html

# 暴露端口
EXPOSE 80

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

说明：每个项目文件不同，根据自己项目编写（可以使用ai工具进行编写）

多阶段构建：分为构建阶段和生产阶段，减小最终镜像大小
FROM node:22-alpine：使用Node.js 22的alpine版本
RUN npm install：安装依赖
RUN npm run build：构建项目
FROM nginx:alpine：使用nginx作为Web服务器
COPY --from=build-stage：从构建阶段复制构建产物

3.3 Nginx配置文件

user nginx;
worker_processes auto;
error_log /var/log/nginx/error.log warn;
pid /var/run/nginx.pid;

events {
    worker_connections 1024;
}

http {
    include /etc/nginx/mime.types;
    default_type application/octet-stream;
    types {
        application/javascript js mjs;
    }

    log_format main '$remote_addr - $remote_user [$time_local] "$request" '
                    '$status $body_bytes_sent "$http_referer" '
                    '"$http_user_agent" "$http_x_forwarded_for"';

    access_log /var/log/nginx/access.log main;

    sendfile on;
    tcp_nopush on;
    tcp_nodelay on;
    keepalive_timeout 65;
    types_hash_max_size 2048;
    client_max_body_size 20M;

    gzip on;
    gzip_disable "msie6";
    gzip_vary on;
    gzip_proxied any;
    gzip_comp_level 6;
    gzip_types text/plain text/css text/xml text/javascript
               application/json application/javascript application/xml+rss
               application/rss+xml font/truetype font/opentype
               application/vnd.ms-fontobject image/svg+xml;

    server {
        listen 80;
        server_name localhost;

        root /usr/share/nginx/html;
        index index.html;

        # 前端路由支持
        location / {
            try_files $uri $uri/ /index.html;
        }

        # 代理后端API
        location /api/ {
            proxy_pass http://backend:8000;
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header X-Forwarded-Proto $scheme;
        }

        # 静态资源缓存
        location ~* \.(js|mjs|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$ {
            expires 1y;
            add_header Cache-Control "public, immutable";
        }
    }
}

说明：

location /：处理前端路由，支持Vue Router
location /api/：代理后端API请求
gzip：启用gzip压缩
expires：静态资源缓

四、docker-compose.yml编写

创建文件：docker-compose.yml

version: '3.8'

services:
  # MySQL数据库
  mysql:
    image: mysql:8.0
    container_name: legal_assistant_mysql
    restart: always
    environment:
      MYSQL_ROOT_PASSWORD: ${MYSQL_ROOT_PASSWORD}
      MYSQL_DATABASE: ${MYSQL_DATABASE}
      MYSQL_USER: ${MYSQL_USER}
      MYSQL_PASSWORD: ${MYSQL_PASSWORD}
      TZ: Asia/Shanghai
    ports:
      - "3306:3306"
    volumes:
      - mysql_data:/var/lib/mysql
    networks:
      - legal_assistant_network
    healthcheck:
      test: ["CMD", "mysqladmin", "ping", "-h", "localhost"]
      timeout: 20s
      retries: 10

  # Milvus向量数据库
  milvus-standalone:
    image: milvusdb/milvus:v2.4.15
    container_name: legal_assistant_milvus
    restart: always
    environment:
      ETCD_ENDPOINTS: etcd:2379
      MINIO_ADDRESS: minio:9000
      MINIO_ACCESS_KEY: ${MINIO_ACCESS_KEY}
      MINIO_SECRET_KEY: ${MINIO_SECRET_KEY}
      MINIO_ACCESS_KEY_ID: ${MINIO_ACCESS_KEY_ID}
      MINIO_SECRET_ACCESS_KEY: ${MINIO_SECRET_ACCESS_KEY}
    command: ["milvus", "run", "standalone"]
    ports:
      - "19530:19530"
      - "9091:9091"
    volumes:
      - milvus_data:/var/lib/milvus
    networks:
      - legal_assistant_network
    depends_on:
      etcd:
        condition: service_started
      minio:
        condition: service_started

  # Milvus依赖：etcd
  etcd:
    image: quay.io/coreos/etcd:v3.5.5
    container_name: legal_assistant_etcd
    restart: always
    environment:
      - ETCD_AUTO_COMPACTION_MODE=revision
      - ETCD_AUTO_COMPACTION_RETENTION=1000
      - ETCD_QUOTA_BACKEND_BYTES=4294967296
      - ETCD_SNAPSHOT_COUNT=50000
      - ETCD_LISTEN_CLIENT_URLS=http://0.0.0.0:2379
      - ETCD_ADVERTISE_CLIENT_URLS=http://etcd:2379
      - ETCD_LISTEN_PEER_URLS=http://0.0.0.0:2380
      - ETCD_INITIAL_ADVERTISE_PEER_URLS=http://etcd:2380
      - ETCD_INITIAL_CLUSTER=etcd=http://etcd:2380
      - ETCD_NAME=etcd
    volumes:
      - etcd_data:/etcd
    networks:
      - legal_assistant_network

  # Milvus依赖：minio
  minio:
    image: minio/minio:RELEASE.2023-03-20T20-16-18Z
    container_name: legal_assistant_minio
    restart: always
    environment:
      MINIO_ACCESS_KEY: ${MINIO_ACCESS_KEY}
      MINIO_SECRET_KEY: ${MINIO_SECRET_KEY}
    ports:
      - "9000:9000"
      - "9001:9001"
    volumes:
      - minio_data:/minio_data
    networks:
      - legal_assistant_network
    command: server /minio_data

  # Django后端
  backend:
    build:
      context: ./backend
      dockerfile: Dockerfile
    container_name: legal_assistant_backend
    restart: always
    environment:
      - DATABASE_HOST=mysql
      - DATABASE_PORT=3306
      - DATABASE_NAME=${MYSQL_DATABASE}
      - DATABASE_USER=${MYSQL_USER}
      - DATABASE_PASSWORD=${MYSQL_PASSWORD}
      - SECRET_KEY=${DJANGO_SECRET_KEY}
      - DEBUG=${DJANGO_DEBUG}
      - MILVUS_URI=http://milvus-standalone:19530
      - EMBEDDING_MODEL_DIM=1024
      - DEEPSEEK_API_KEY=${DEEPSEEK_API_KEY}
      - OSS_ACCESS_KEY_ID=${OSS_ACCESS_KEY_ID}
      - OSS_ACCESS_KEY_SECRET=${OSS_ACCESS_KEY_SECRET}
      - OSS_BUCKET_NAME=${OSS_BUCKET_NAME}
      - OSS_ENDPOINT=${OSS_ENDPOINT}
    ports:
      - "8000:8000"
    volumes:
      - ./backend:/app
      - backend_media:/app/media
      - backend_logs:/app/logs
    networks:
      - legal_assistant_network
    depends_on:
      mysql:
        condition: service_healthy
      milvus-standalone:
        condition: service_started

  # Vue 3前端
  frontend:
    build:
      context: ./frontend
      dockerfile: Dockerfile
    container_name: legal_assistant_frontend
    restart: always
    ports:
      - "80:80"
    networks:
      - legal_assistant_network
    depends_on:
      - backend

volumes:
  mysql_data:
    driver: local
  milvus_data:
    driver: local
  etcd_data:
    driver: local
  minio_data:
    driver: local
  backend_media:
    driver: local
  backend_logs:
    driver: local

networks:
  legal_assistant_network:
    driver: bridge

说明：注意的是，需要编写对应的.env环境配置文件

services：定义5个服务（MySQL、Milvus、etcd、minio、backend、frontend）
volumes：定义数据卷，持久化数据
networks：定义网络，服务间通信
depends_on：定义服务依赖关系
environment：从.env文件读取环境变量

五、部署步骤

5.1 前置准备

1. 确认Docker已安装

docker --version

2. 确认Docker Compose已安装

docker-compose --version

3. 准备项目文件

确保以下文件已创建：

backend/Dockerfile
frontend/Dockerfile
frontend/nginx.conf
docker-compose.yml
.env

5.2 构建和启动

步骤1：启动所有服务

# 进入项目根目录
cd c:\Users\salute\PycharmProjects\AgentProject

# 启动所有服务（后台运行）
docker-compose up -d

# 查看服务状态
docker-compose ps

步骤2：初始化数据库

执行对应的数据库迁移操作：

# 进入后端容器
docker-compose exec backend bash

# 运行数据库迁移
python manage.py migrate

步骤3：验证部署

在浏览器中访问：

前端界面：http://localhost
后端API：http://localhost:8000
Django管理后台：http://localhost:8000/admin

进入前端界面，界面显示出来，此时我们的Docker部署基本上就完成了。后面可能会遇到一些端口冲突等问题，我们也可以通过AI工具进行解决。

总结：
本次大致流程就是这样。首先我们可以通过视频了解基本的概念，对于Docker容器化部署（单纯成功部署），只需要编写Dockerfile文件以及对应的docker-compose.yml文件即可，在docker-compose.yml文件目录下执行指令 `docker-compose up -d`，即可下载对应的镜像和容器，后续我们只需在容器中启动项目即可。