【DockerFile+Nginx+DockerCompose】前后端分离式项目部署(docker容器化方式)

一、介 绍

**本文介绍通过Dockerflie + docker-compose的方式，****将基于Vue+SpringBoot+MySQL的文件上传系统项目部署到Linux环境下的Nginx上，****实现在Windows系统访问指定服务器地址的项目，通过数据卷挂载实现容器与宿主机的访问操作，**下面将详细介绍实现方式。

二、步 骤

1. docker 与 docker compose 安装

首先确定Linux系统里安装了docker和docker-compose

安装步骤: https://blog.csdn.net/2401_84926677/article/details/152282454

2. 生产环境配置

后端：

application-prod.yml

spring:
  # 数据库配置 (生产环境需要修改)
  datasource:
    url: jdbc:mysql://192.168.1.129:3306/file_upload?useUnicode=true&characterEncoding=utf8&useSSL=false&serverTimezone=GMT%2B8
    username: root
    password: 123456 # 生产环境需要修改
    driver-class-name: com.mysql.cj.jdbc.Driver

  # 静态资源配置
  web:
    resources:
      static-locations: file:/prod/uploads/

# 文件存储目录
file:
  upload-dir: /prod/uploads

前端：

config/index.js

const env = process.env.NODE_ENV

const configs = {
  development: {
    apiBaseUrl: ''
  },
  production: {
    apiBaseUrl: ''
  }
}

export default configs[env] || configs.development

vite.config.js

// 根据环境变量设置不同的代理目标
const getProxyTarget = () => {
  if (process.env.NODE_ENV === 'production') {
    return 'http://192.168.1.129'
  }
  return 'http://localhost:8080'
}

请求发送地址修改

const response = await fetch(`${config.apiBaseUrl}/api/files/upload`

3. 后端项目打包

在后端项目路径的终端输入以下命令进行项目打包:

mvn clean package "-Dmaven.test.skip=true"

4. Dockerfile 编写

在后端项目根目录创建Dockerfile：

编写Dockerfile文件：

# 使用 JDK 17 镜像（轻量 alpine 版本）
FROM eclipse-temurin:17-jre-alpine

# 设置工作目录
WORKDIR /app

# 将打包好的 jar 包复制到容器中
COPY upload-0.0.1-SNAPSHOT.jar /app/app.jar

# 暴露端口
EXPOSE 8080

# 启动命令
ENTRYPOINT ["java", "-jar", "/app.jar"]

5. docker-compose.yml编写

在项目根目录创建 docker-compose.yml：

编写docker-compose.yml文件：

version: '3.7'

services:
  # MySQL 服务（增加时区配置，优化启动参数）
  mysql8:
    image: mysql:8.0
    container_name: mysql8
    restart: unless-stopped
    environment:
      MYSQL_ROOT_PASSWORD: 123456          # 数据库密码（与后端一致）
      MYSQL_DATABASE: file_upload         # 自动创建初始化数据库
      TZ: Asia/Shanghai                   # 时区配置（关键：解决时间差）
    ports:
      - "3306:3306"                       # 宿主机3306映射容器3306（外部可连接）
    volumes:
      - /opt/mysql-data:/var/lib/mysql    # 数据持久化（宿主机←→容器）
      - /opt/app/mysql/init.sql:/docker-entrypoint-initdb.d/init.sql  # 初始化SQL
    networks:
      - app-network
    #解决MySQL8启动慢、旧JDBC连接问题
    command: --default-authentication-plugin=mysql_native_password --innodb-use-native-aio=0

  # Spring Boot 后端服务
  backend:
    build: ./backend                      # 从./backend目录的Dockerfile构建镜像
    container_name: backend
    restart: unless-stopped
    depends_on:
      - mysql8                            # 保证容器启动顺序
    environment:
      SPRING_DATASOURCE_URL: jdbc:mysql://mysql8:3306/file_upload?useUnicode=true&characterEncoding=utf8&useSSL=false&serverTimezone=Asia/Shanghai&allowPublicKeyRetrieval=true
      SPRING_DATASOURCE_USERNAME: root
      SPRING_DATASOURCE_PASSWORD: 123456
      TZ: Asia/Shanghai                   # 时区配置（与系统时间一致）
    volumes:
      - /opt/prod/uploads:/prod/uploads   # 文件上传目录（宿主机←→容器）
      - /opt/app/backend/logs:/app/logs   # 后端日志挂载（方便排查问题）
    networks:
      - app-network
    # 等待10秒再启动后端，确保MySQL就绪
    command: sh -c "sleep 10 && java -jar /app/app.jar"

  # Nginx 前端服务
  nginx:
    image: nginx:latest
    container_name: nginx
    restart: unless-stopped
    ports:
      - "80:80"                           # 前端访问端口（宿主机80←→容器80）
    volumes:
      - /opt/app/nginx/nginx.conf:/etc/nginx/conf.d/default.conf
      - /opt/app/nginx/html:/usr/share/nginx/html  # 前端静态文件（Vue dist）
      - /opt/app/nginx/logs:/var/log/nginx         # Nginx日志挂载（排查访问问题）
    depends_on:
      - backend  # 保证后端启动后再启动Nginx
    networks:
      - app-network
    privileged: true  # 解决Nginx日志写入权限问题
    environment:
      TZ: Asia/Shanghai  # 时区配置

# 自定义网络：所有服务在同一网络，通过服务名互通（避免端口冲突）
networks:
  app-network:
    driver: bridge

6. Nginx 配置文件编写

创建 nginx.conf：

编写nginx.conf:

server {
    listen 80;
    server_name localhost;  # 生产环境可改为域名（如 www.xxx.com）

    # 1. 前端路由适配（解决Vue路由刷新404问题）
    location / {
        root /usr/share/nginx/html;  # 前端静态文件根目录
        index index.html;  # 默认首页
        try_files $uri $uri/ /index.html;  # 找不到文件时重定向到index.html
        expires 1d;  # 静态资源缓存1天（优化前端加载速度）
    }

    # 2. 反向代理后端API（/api开头的请求转发到backend容器）
    location /api/ {
        proxy_pass http://backend:8080;  # backend是docker-compose中后端容器服务名
        proxy_set_header Host $host;      # 传递真实请求主机名
        proxy_set_header X-Real-IP $remote_addr;  # 传递真实客户端IP
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;  # 传递代理链IP
        proxy_connect_timeout 30s;        # 连接超时时间
        proxy_read_timeout 60s;           # 读取超时时间
    }

    # 3. 日志配置（方便排查问题）
    access_log /var/log/nginx/access.log;  # 访问日志
    error_log /var/log/nginx/error.log;    # 错误日志
}

7. 前端项目打包

在前端项目路径的终端输入以下命令进行项目打包:

npm run build

生成dist文件

8. 数据库脚本导出

打开数据库软件(这里使用DataGrip)，导出数据库脚本文件

搜索框找到mysql的mysqldump.exe:

粘贴路径：

运行成功查看文件：

9. 服务器上创建目录结构

# 创建主应用目录
mkdir -p /opt/app/backend
mkdir -p /opt/app/nginx/html
mkdir -p /opt/app/mysql

# MySQL 数据持久化目录
mkdir -p /opt/mysql-data

# 文件上传目录（与 Spring Boot 配置一致）
mkdir -p /opt/prod/uploads

10. 上传文件到服务器

a.将jar包上传到服务器的/opt/app/backend目录下

拖进去后：

b. 将Dockerfile文件上传到服务器的/opt/app/backend目录下

拖进去后：

c. 将docker-compose.yml文件上传到服务器的/opt/app目录下

拖进去后：

d. 将Nginx 配置文件上传到服务器的/opt/app/nginx目录下

拖进去后：

e. 将前端 dist 目录下的所有文件上传到服务器的/opt/app/nginx/html下

拖进去后：

f. 将MySQL 初始化脚本上传到/opt/app/mysql下

11. docker-compose启动容器

a. 切换到docker-compose所在目录

cd /opt/app

b. 运行docker-compose

docker-compose up -d

c. docker-compose ps查看容器状态

12. windows系统中通过浏览器访问服务器地址和nginx端口

三、最终效果测试

1. 文件上传功能

文件上传成功！！！

2. 文件查看功能

文件正常查看！！！

3. 文件搜索功能

正常搜索！！！

4. 文件删除功能

文件删除成功！！！

四、服务器数据库数据显示

这里上传三张图片，连接192.168.1.129数据库显示新增的三张图片：

五、总结

至此，Dockerfile+docker-compose部署完成！！！