docker-compose本地部署前后端分离的项目

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