将springboot、vue前后端分离的项目部署到docker上

继上篇项目，记录一下在学习部署项目时的过程。
首先，将前端vue项目进行打包：
打包操作如下：在项目对应目录下输入npm run build

打包完成后，项目目录中会多了一个dist文件夹，如下：

后端部分，编写DockerFile文件和docker-compose.yml文件。
打开IDEA，创建DockerFile文件，其内容如下：

FROM java:8

EXPOSE 8888

ADD music_sys-0.0.1-SNAPSHOT.jar app.jar
RUN bash -c 'touch /app.jar'

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

然后编写docker-compose.yml文件，内容如下：

version: '3'

services:
  Nginx_client: # 服务名称
    image: Nginx:latest
    ports:
      - 80:80
    volumes:
      - /root/music/Nginx_client/html:/usr/share/Nginx/html
      - /root/music/Nginx_client/Nginx.conf:/etc/Nginx/Nginx.conf
    privileged: true  # 这个必须要，解决Nginx文件调用的权限问题
  Nginx_manage: # 服务名称
    image: Nginx:latest
    ports:
      - 81:81
    volumes:
      - /root/music/Nginx_manage/html:/usr/share/Nginx/html
      - /root/music/Nginx_manage/Nginx.conf:/etc/Nginx/Nginx.conf
    privileged: true  # 这个必须要，解决Nginx文件调用的权限问题
  MysqL:
    image: MysqL:8.0.17
    ports:
      - 3306:3306
    environment:
      - MysqL_ROOT_PASSWORD=root
  music_sys:
    image: music_sys:latest
    build:
      context: .
      dockerfile: DockerFile
    ports:
      - 8888:8888
    volumes:
      - /usr/local/ueditorUpload:/usr/local/ueditorUpload
    depends_on:
      - MysqL

然后将后端项目打成jar包，打包过程如下：

等待打包完成后，可以在target中看到一个.jar文件，如下图所示：

接着，连上服务器，根据docker-compose.yml中的挂着路径，创建相应的文件路径

然后将刚刚写的DockerFile和docker-compose.yml文件以及打好的jar包拖到music文件夹下

然后进入Nginx_client文件夹，创建html文件夹和编写Nginx.conf，Nginx.conf内容如下：

user root;
worker_processes  1;

events {
    worker_connections  1024;
}


http {
    include       mime.types;
    default_type  application/octet-stream;


    sendfile        on;

    keepalive_timeout  65;

    server {
        listen       80;
        server_name  localhost;

        location / {
            root  /usr/share/Nginx/html/client;
            try_files $uri $uri/ /client/index.html last;
            index  index.html index.htm;
        }

        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }

}

再接着将前端打包好的dist文件夹传到html目录下并改名为client，改成client是为了跟Nginx.conf中的文件路径相对于，也可以不改。

后端管理员vue项目同理。
这些文件部署好后，接着在music目录下执行docker-compose up -d 启动项目，在这个过程中，会自动拉取相应的镜像，需要耐心等待一段时间。等待拉取完成后，可以看到四个容器都已经启动。（这里需要注意，如果还没下载docker和docker-compose的，需要先下载）

接着，需要去Navicat连接上docker容器中的MysqL数据库，并创建到数据，然后将数据表导入创建好。

这个时候，就可以去浏览器访问项目了，首先，输入服务器地址：192.168.18.22，访问默认端口为80，所以启动的是client

然后再访问一下81端口：可以看到访问成功。

部署到此结束啦，有更简单方法的小伙伴可以在下面留言呀，共同学习共同进步。