当前位置：首页 > news >正文

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

news 2025/10/1 12:46:31

一、介绍

本文介绍通过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%2B8username: rootpassword: 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_ENVconst 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.0container_name: mysql8restart: unless-stoppedenvironment: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  # 初始化SQLnetworks:- 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: backendrestart: unless-stoppeddepends_on:- mysql8                            # 保证容器启动顺序environment:SPRING_DATASOURCE_URL: jdbc:mysql://mysql8:3306/file_upload?useUnicode=true&characterEncoding=utf8&useSSL=false&serverTimezone=Asia/Shanghai&allowPublicKeyRetrieval=trueSPRING_DATASOURCE_USERNAME: rootSPRING_DATASOURCE_PASSWORD: 123456TZ: 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:latestcontainer_name: nginxrestart: unless-stoppedports:- "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  # 保证后端启动后再启动Nginxnetworks:- app-networkprivileged: 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.htmlexpires 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;  # 传递真实客户端IPproxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;  # 传递代理链IPproxy_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