Docker部署：SpringBoot2.7 + Vue3.5前后端分离项目

Docker系列文章

---

---

前言

本文将介绍docker环境下部署SpringBoot + Vue3前后端分离项目。

---

一、Vue3前端项目部署

1.1 Dockerfile文件配置

# 部署到 Nginx
FROM nginx:latest

# 复制构建后的静态文件到 Nginx 默认目录
COPY ./html /usr/share/nginx/html

# 复制自定义 Nginx 配置（可选）
COPY ./conf/nginx.conf /etc/nginx/conf.d/default.conf

# 暴露 80 端口
EXPOSE 7701

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

1.2 前端项目打包

• Vue3项目执行npm run build命令生成dist文件
• 将打包好的dist文件上传至服务器
• nginx数据目录映射
• 执行构建镜像命令并运行容器

1.2 nginx文件目录

1.3 镜像构建与容器运行

1.3.1 构建镜像

docker build -t mis-admin-next:3.5.6 .

1.3.2 创建容器并运行

docker run -it --name mis-admin-next -p 7701:80 -e TZ=Asia/Shanghai -d mis-admin-next:3.5.6

1.4 项目运行演示

二、SpringBoot后端项目部署

2.1 Dockerfile文件配置

FROM openjdk:17

COPY mis-api-next-0.0.1-SNAPSHOT.jar /app.jar

CMD ["java","-jar","app.jar"]

2.2 项目打包上传

2.3 构建镜像与运行容器

2.3.1 构建镜像

2.3.2 运行容器

2.4 apifox接口测试

三、Docker Compose容器编排

提示：可以通过docker-compose.yml文件配置实现一键部署项目，实现思路都是一样的：

3.1 编写docker-compose.yml文件

version: '2.1'
services:

  app:
    build: ./ 
    container_name: mis-api-test
    ports:
      - 7700:7700
    depends_on:
      - mysql
      - redis
      - mongo
      - minio
      
  mysql:
    image: mysql:8.0.20
    container_name: mis-mysql
    ports:
      - 7001:3306
    environment: 
      MYSQL_ROOT_PASSWORD: abc123456
    volumes:
      - /root/finance/mysql-test/data:/var/lib/mysql 
      - /root/finance/mysql-test/conf:/etc/mysql/conf.d
      - /root/finance/mysql-test/logs:/etc/log/mysql

  redis:
    image: redis:6.0.10
    container_name: mis-redis
    ports:
      - 7002:6379
    volumes:
      - /root/finance/redis-test/conf:/usr/local/etc/redis
    command: redis-server /usr/local/etc/redis/redis.conf

  mongo:
    image: mongo:4.4.7
    container_name: mis-mongo
    ports:
      - 7003:27017
    volumes:
      - /root/finance/mongo-test/mongod.conf:/etc/mongo/mongod.conf 
      - /root/finance/mongo-test/data/db:/data/db
      - /root/finance/mongo-test/data/db:/var/log/mongodb
    environment:
      ME_CONFIG_MONGODB_ADMINUSERNAME: root
      ME_CONFIG_MONGODB_ADMINPASSWORD: abc123456
    command: --config /etc/mongo/mongod.conf

  minio:
    image: bitnami/minio:latest
    container_name: mis-minio
    ports:
      - 7004:9001
      - 7005:9000
    volumes:
      - /root/finance/minio-test/data:/bitnami/minio/data
    environment:
      - MINIO_ROOT_USER=root
      - MINIO_ROOT_PASSWORD=abc123456

3.2 一键启动与停止

• 启动服务：docker compose up -d
• 查看日志：docker compose logs -f
• 停止服务：docker compose down

3.3 命令演示