Docker部署前后端项目完整教程

 目录

Docker基础概念

什么是Docker？

核心概念

Docker单独部署后端项目

2.1 准备工作

2.2 创建后端项目结构

2.3 编写Dockerfile

2.4 构建和运行后端容器

2.5 后端容器管理

Docker单独部署前端项目

3.1 前端项目结构

3.2 编写前端Dockerfile

3.3 配置nginx

3.4 创建.dockerignore文件

3.5 构建和运行前端容器

3.6 前端优化技巧

Docker Compose介绍

4.1 什么是Docker Compose？

4.2 Docker Compose的优势

4.3 Docker Compose文件结构

Docker Compose部署完整项目

5.1 完整项目架构

5.2 编写docker-compose.yml

5.3 环境变量配置

5.4 Nginx配置（生产环境）

5.5 Docker Compose命令详解

完整实战案例：从零到部署

6.1 项目初始化

6.2 后端项目设置

6.3 前端项目设置

6.4 数据库初始化

6.5 完整的docker-compose.yml

6.6 启动完整应用

项目验证与测试

7.1 服务健康检查

7.2 功能测试

7.3 性能测试

常见问题与解决方案

8.1 容器启动问题

8.2 网络连接问题

8.3 数据持久化问题

8.4 性能优化

8.5 监控和日志

部署到生产环境

9.1 生产环境准备

9.2 生产环境配置

9.3 CI/CD部署

9.4 监控和备份

9.5 安全加固

9.6 生产环境检查清单

总结

 

---

Docker基础概念

什么是Docker？

Docker是一个开源的容器化平台，它允许开发者将应用程序及其依赖项打包到一个轻量级、可移植的容器中。

核心概念

• 镜像(Image): 一个只读的模板，包含运行应用所需的所有内容
• 容器(Container): 镜像的运行实例，可以被启动、停止、删除
• Dockerfile: 用于构建镜像的文本文件，包含一系列指令
• 仓库(Repository): 用于存储和分发镜像的地方

---

Docker单独部署后端项目

2.1 准备工作

安装Docker

# Ubuntu/Debian
sudo apt update
sudo apt install docker.io docker-compose

# CentOS/RHEL
sudo yum install docker docker-compose

# 启动Docker服务
sudo systemctl start docker
sudo systemctl enable docker

验证安装

docker --version
docker-compose --version

2.2 创建后端项目结构

假设我们有一个Node.js后端项目：

backend/
├── package.json
├── package-lock.json
├── app.js
├── routes/
│   └── api.js
├── models/
│   └── user.js
└── Dockerfile

2.3 编写Dockerfile

Node.js后端Dockerfile示例

# 使用官方Node.js运行时作为基础镜像
FROM node:18-alpine

# 设置工作目录
WORKDIR /app

# 复制package.json和package-lock.json
COPY package*.json ./

# 安装项目依赖
RUN npm ci --only=production

# 复制项目文件
COPY . .

# 暴露端口
EXPOSE 3000

# 创建非root用户
RUN addgroup -g 1001 -S nodejs
RUN adduser -S nodejs -u 1001
USER nodejs

# 启动应用
CMD ["node", "app.js"]

Java Spring Boot后端Dockerfile示例

# 构建阶段
FROM maven:3.8.4-openjdk-17 AS build
WORKDIR /app
COPY pom.xml .
COPY src ./src
RUN mvn clean package -DskipTests

# 运行阶段
FROM openjdk:17-jre-slim
WORKDIR /app
COPY --from=build /app/target/*.jar app.jar
EXPOSE 8080
ENTRYPOINT ["java", "-jar", "app.jar"]

Python Django后端Dockerfile示例

FROM python:3.9-slim

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

# 设置工作目录
WORKDIR /app

# 安装系统依赖
RUN apt-get update \
    && apt-get install -y --no-install-recommends \
        postgresql-client \
    && rm -rf /var/lib/apt/lists/*

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

# 复制项目代码
COPY . /app/

# 收集静态文件
RUN python manage.py collectstatic --noinput

# 暴露端口
EXPOSE 8000

# 启动命令
CMD ["gunicorn", "--bind", "0.0.0.0:8000", "myproject.wsgi:application"]

2.4 构建和运行后端容器

构建镜像

# 进入后端项目目录
cd backend

# 构建Docker镜像
docker build -t my-backend:latest .

# 查看构建的镜像
docker images

运行容器

# 基本运行
docker run -d --name backend-container -p 3000:3000 my-backend:latest

# 带环境变量运行
docker run -d \
  --name backend-container \
  -p 3000:3000 \
  -e NODE_ENV=production \
  -e DB_HOST=localhost \
  -e DB_PORT=5432 \
  my-backend:latest

# 挂载数据卷
docker run -d \
  --name backend-container \
  -p 3000:3000 \
  -v /host/data:/app/data \
  my-backend:latest

2.5 后端容器管理

查看容器状态

# 查看运行中的容器
docker ps

# 查看所有容器
docker ps -a

# 查看容器日志
docker logs backend-container

# 实时查看日志
docker logs -f backend-container

容器操作

# 停止容器
docker stop backend-container

# 启动容器
docker start backend-container

# 重启容器
docker restart backend-container

# 删除容器
docker rm backend-container

# 进入容器
docker exec -it backend-container sh

---

Docker单独部署前端项目

3.1 前端项目结构

假设我们有一个React前端项目：

frontend/
├── package.json
├── package-lock.json
├── public/
│   ├── index.html
│   └── favicon.ico
├── src/
│   ├── App.js
│   ├── index.js
│   └── components/
├── .dockerignore
└── Dockerfile

3.2 编写前端Dockerfile

React项目Dockerfile（多阶段构建）

# 第一阶段：构建阶段
FROM node:18-alpine AS build

# 设置工作目录
WORKDIR /app

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

# 安装依赖
RUN npm ci --only=production

# 复制源代码
COPY . .

# 构建生产版本
RUN npm run build

# 第二阶段：生产阶段
FROM nginx:alpine

# 复制构建产物到nginx目录
COPY --from=build /app/build /usr/share/nginx/html

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

# 暴露端口
EXPOSE 80

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

Vue.js项目Dockerfile

# 构建阶段
FROM node:18-alpine AS build-stage

WORKDIR /app

# 复制依赖文件
COPY package*.json ./
RUN npm ci

# 复制源代码并构建
COPY . .
RUN npm run build

# 生产阶段
FROM nginx:stable-alpine AS production-stage

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

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

EXPOSE 80

CMD ["nginx", "-g", "daemon off;"]

3.3 配置nginx

nginx.conf配置文件

events {
    worker_connections 1024;
}

http {
    include       /etc/nginx/mime.types;
    default_type  application/octet-stream;

    # 启用gzip压缩
    gzip on;
    gzip_vary on;
    gzip_min_length 1024;
    gzip_types text/plain text/css text/xml text/javascript application/javascript application/xml+rss application/json;

    server {
        listen 80;
        server_name localhost;
        root /usr/share/nginx/html;
        index index.html;

        # 处理SPA路由
        location / {
            try_files $uri $uri/ /index.html;
        }

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

        # API代理（可选）
        location /api/ {
            proxy_pass http://backend-container:3000/api/;
            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;
        }
    }
}

3.4 创建.dockerignore文件

node_modules
npm-debug.log
.git
.gitignore
README.md
.env
.nyc_output
coverage
.nyc_output
.coverage
.coverage.*
.cache

3.5 构建和运行前端容器

构建前端镜像

# 进入前端项目目录
cd frontend

# 构建Docker镜像
docker build -t my-frontend:latest .

# 查看镜像大小
docker images my-frontend

运行前端容器

# 运行前端容器
docker run -d \
  --name frontend-container \
  -p 80:80 \
  my-frontend:latest

# 或者使用其他端口
docker run -d \
  --name frontend-container \
  -p 8080:80 \
  my-frontend:latest

3.6 前端优化技巧

减小镜像体积

# 使用更小的基础镜像
FROM node:18-alpine AS build
# 多阶段构建
FROM nginx:alpine AS production

# 删除不必要的文件
RUN rm -rf /usr/share/nginx/html/static/js/*.map
RUN rm -rf /usr/share/nginx/html/static/css/*.map

环境变量配置

# 在构建阶段传入环境变量
ARG REACT_APP_API_URL
ENV REACT_APP_API_URL=$REACT_APP_API_URL

# 构建时指定环境变量
# docker build --build-arg REACT_APP_API_URL=http://api.example.com -t my-frontend .

---

Docker Compose介绍

4.1 什么是Docker Compose？

Docker Compose是一个用于定义和运行多容器Docker应用程序的工具。使用YAML文件来配置应用程序的服务，然后通过一个命令就可以创建并启动所有服务。

4.2 Docker Compose的优势

• 简化多容器管理: 一个命令启动所有服务
• 环境一致性: 开发、测试、生产环境配置一致
• 服务依赖管理: 自动处理服务间的依赖关系
• 网络隔离: 自动创建独立的网络环境
• 数据持久化: 简化数据卷管理

4.3 Docker Compose文件结构

version: '3.8'

services:
  service1:
    # 服务配置
  service2:
    # 服务配置

networks:
  # 网络配置

volumes:
  # 数据卷配置

---

Docker Compose部署完整项目

5.1 完整项目架构

project/
├── docker-compose.yml
├── docker-compose.prod.yml
├── .env
├── backend/
│   ├── Dockerfile
│   ├── package.json
│   └── app.js
├── frontend/
│   ├── Dockerfile
│   ├── package.json
│   ├── nginx.conf
│   └── src/
├── database/
│   └── init.sql
└── nginx/
    └── nginx.conf

5.2 编写docker-compose.yml

开发环境配置

version: '3.8'

services:
  # 数据库服务
  database:
    image: postgres:13
    container_