1. 搭建文件结构，大致结构如下：

project-root/
├── frontend/                  # 前端项目目录
│   ├── public/                # 静态资源
│   ├── src/                   # 前端源码
│   ├── Dockerfile             # 前端Docker构建文件
│   ├── nginx.conf             # Nginx配置文件（如需要）
│   └── package.json           # 前端依赖配置
│
├── backend/                   # 后端项目目录
│   ├── src/                   # 后端源码
│   ├── Dockerfile             # 后端Docker构建文件
│   ├── pom.xml/build.gradle   # Java项目依赖配置（如适用）
│   └── package.json           # Node.js项目依赖配置（如适用）
│
├── docker-compose.yml         # 多容器编排配置
├── .env                       # 环境变量文件
└── README.md                  # 项目说明文档
 

也可以像对前后端项目进行打包，在将其放入，大致结构如下：

project-root/
├── frontend/                  # 前端项目目录
│   ├── dist/                  # 前端打好的dist文件
│   ├── Dockerfile             # 前端Docker构建文件
│   └── nginx.conf             # Nginx配置文件（如需要）
│
├── backend/                   # 后端项目目录
│   ├── XXX.jar                # 打好的jar包
│   └── Dockerfile             # 后端Docker构建文件
│
├── docker-compose.yml         # 多容器编排配置
├── .env                       # 环境变量文件
└── README.md                  # 项目说明文档
 

2. 编写关键文件，本文以前后端已经完成初步打包的项目进行说明，前端部署到nginx中

        （1）前端Dockerfile：

# 获取nginx镜像
FROM nginx:alpine

# 删除默认的静态文件
RUN rm -rf /usr/share/nginx/html/*

# 将打包好的静态文件复制到容器内的 Nginx 静态文件目录
COPY dist/ /usr/share/nginx/html/

# 使用配置好的nginx.conf配置，用于定义后端服务位置
COPY nginx.conf /etc/nginx/conf.d/default.conf

# 暴露端口
EXPOSE 80

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

        （2）后端Dockerfile：

# 获取JDK21镜像
FROM eclipse-temurin:21-jdk

# 指定项目在容器中的工作目录
WORKDIR /app

# 将jar包布置到工作目录并重命名
COPY tgbot-api-0.0.1-SNAPSHOT.jar app.jar

# 暴露端口
EXPOSE 8080

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

        （3）nginx.conf文件：

server {
    # 监听端口
    listen 80;
    # 指定路由，如果只有一个server会使用唯一的那个
    # 所以，容器内部的server_name基本不起作用，主要用于前端与后端的CROD问题
    server_name localhost;
    root /usr/share/nginx/html;
    index index.html;

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

    # API 代理（反向代理）
    # 这里拦截/api开头的请求，转发到网络内的spring-backend服务
    location /api/ {
        rewrite ^/api/(.*)$ /$1 break;
        proxy_pass http://spring-backend:8080;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }
}

        （4）docker-compose文件：这个文件主要用于配置各个容器的相关参数，并将容器加入构建的网络中

# 文件格式版本
version: '3.8'

services:
  # MySQL 数据库
  mysql:
    # 容器版本
    image: mysql:8.0
    # 容器名称
    container_name: app-mysql
    # 配置账号密码
    environment:
      MYSQL_ROOT_PASSWORD:  ${MYSQL_ROOT_PASSWORD}
      MYSQL_DATABASE:  ${MYSQL_DATABASE}
    # 数据卷配置
    volumes:
      - mysql_data:/var/lib/mysql
      - ./mysql/init.sql:/docker-entrypoint-initdb.d/init.sql
    # 连接到自定义网络
    networks:
      - app-network
    # 自动重启策略
    restart: unless-stopped

  # Redis 缓存
  redis:
    image: redis:7-alpine
    container_name: app-redis
    volumes:
      - redis_data:/data
    networks:
      - app-network
    restart: unless-stopped

  # Spring Boot 后端
  backend:
    # 从dockerfile构建镜像
    build: ./backend
    container_name: spring-backend
    # 定义依赖，用于确定启动顺序
    depends_on:
      - mysql
      - redis
    networks:
      - app-network
    restart: unless-stopped

  # Vue 前端
  frontend:
    build: ./frontend
    container_name: vue-frontend
    ports:
    # 注意，一个项目可以只暴露一个前端接口给外部
      - "8081:80"
    # 先启动后端
    depends_on:
      - backend
    networks:
      - app-network
    restart: unless-stopped

volumes:
  mysql_data:
  redis_data:

networks:
  app-network:
    driver: bridge

        （5）.env文件，用于设置环境参数

# 主要用于配置上方的docker-compose中的参数，这里不多说明
DB_PASSWORD=your_secure_password
 

3. 将project-root文件夹上传到服务器中，或者上传到git再通过git拉取，并进入到project-root文件目录下，在确认前端所需的端口没有被占用后，执行以下代码

docker-compose up -d --build

4. 在服务器中对项目暴露的端口使用nginx或其他工具进行DNS域名配置，使得项目可以被访问。