1. 准备打包项目

使用maven打包springboot项目为.jar文件得到springboot-0.0.1-SNAPSHOT.jar

打包vue项目

npm install -g @vue/cli安装Vue CLI

在项目根目录下，运行npm run build命令来构建项目得到一个dist文件夹

将打包好的文件及数据库中的表结构文件通过远程仓库中转至docker虚拟机

在虚拟机拉取镜像，并将docker12-2的内容复制（cp 命令）到我的部署项目my-project下，其中dist.zip解压到vue目录下，.jar文件和.sql文件在my-project下。

2. 准备前端所需文件

在vue目录下创建 Nginx 配置文件nginx.conf

events {

    worker_connections  1024;

}

http {

    include       mime.types;

    default_type  application/octet-stream;

    server {

       listen       80;

        # 指定前端项目所在的位置

        location / {

            root /usr/share/nginx/html;

            index index.html index.htm;

            try_files $uri $uri/ /index.html;

        }

        error_page   500 502 503 504  /50x.html;

        location = /50x.html {

            root   html;

        }

      

        location /api {

        # 添加api后缀

            rewrite ^/api/(.*) /$1 break;

            proxy_pass http://my-springboot:8080;

        }

    }  

}

注意：路径与后端保持一致

location /api ：用于匹配所有以/api开头的请求URL

Nginx：在每个部署目标前设置一个反向代理，将所有对某个特定域名或子域名的请求转发到相应的部

3. 准备后端所需文件

在my-project目录下创建Dockerfile文件

# 使用官方 OpenJDK 作为基础镜像

FROM openjdk:20

EXPOSE 8080

# 将 jar 文件添加到镜像中的工作目录

ADD springboot-0.0.1-SNAPSHOT.jar app.jar

RUN bash -c 'touch /app.jar'

ENTRYPOINT ["java","-jar", "/app.jar"]

4. 创建docker-compose.yml文件

在my-project目录下创建dcoker-compose.yml文件，注意：数据库文件挂载在数据卷中，第一次构建MySQL时自动挂载，减少每一次重新构建mysql容器时都要进入容器添加表。

version: '3'  # 指定 Docker Compose 文件的版本  

services:  

  mysql:  

    image: registry.cn-hangzhou.aliyuncs.com//mysql:8.0.40   

    container_name: mysql8  

restart: always  

working_dir: /code  

    volumes:  # 挂载卷  

      - "./mysql/data:/var/lib/mysql"    

      - "./mysql/conf/:/etc/mysql/my.cnf"    

      - "./docker_demo.sql:/docker-entrypoint-initdb.d/docker_demo.sql"  

    environment:   

      - "MYSQL_ROOT_PASSWORD=lily1212"    

      - "MYSQL_DATABASE=docker_demo"   

      - "TZ=Asia/Shanghai"    

    ports:  

      - "3306:3306"    

    networks:  

      - my-bridge-network  

  springboot:  

    image: my-springboot-image    

    build: .    

    container_name: my-springboot   

    restart: always   

    networks:  

      - my-bridge-network   

    ports:  

      - "8080:8080"   

    depends_on:  

      - mysql  

  vue:  

image: nginx

container_name: my-vue  

    restart: always    

    ports:  

      - "81:80"   

    volumes:  # 挂载卷  

      - "./vue/nginx.conf:/etc/nginx/nginx.conf"   

      - "./vue/dist/:/usr/share/nginx/html/"    

    depends_on:  

      - springboot   

    networks:  

      - my-bridge-network    

networks:  

  my-bridge-network:  

driver: bridge  

5.启动 Docker Compose

在 `my-project` 目录下运行以下命令来启动服务：

docker-compose up

6.验证应用

打开浏览器并访问 `http://localhost:81` 或 `http://192.168.88.3:81` 来查看前端页面。

打开浏览器并访问 `http://192.168.88.3:8080/api/members` 来查看所有成员信息、验证后端。

7. 停止和删除服务

如果需要停止并删除所有服务，可以运行：

docker-compose down