Docker手动在虚拟机上部署前端、后端和数据库

 💥 该系列属于【SpringBoot基础】专栏，如您需查看其他SpringBoot相关文章，请您点击左边的连接

目录

一、项目准备

二、MySQL数据库部署

三、SpringBoot后端部署

四、Vue前端部署

---

一、项目准备

准备数据库、前端项目、后端项目。

准备一个连接服务器的客户端，后续使用的是MobaXterm。

准备好linux虚拟机。

准备好已经安装的docker。

二、MySQL数据库部署

通过docker安装mysql之前，首先要进行本地目录的挂载。

在虚拟机上创建本地目录：

mkdir /root/mysql
mkdir /root/mysql/data
mkdir /root/mysql/conf
mkdir /root/mysql/init

创建成功： 

准备好自己的conf和init，自己的conf目录下有hm.cnf文件：

自己的init目录下有hmall.sql文件：

然后将自己的conf和init移动到挂载目录下：

 然后在创建mysql容器的时候实现数据目录、配置文件、初始化脚本的挂载：

password改成自己的

docker run -d \
  --name mysql \
  -p 3306:3306 \
  -e TZ=Asia/Shanghai \
  -e MYSQL_ROOT_PASSWORD=wangjx17 \
  -v /root/mysql/data:/var/lib/mysql \
  -v /root/mysql/conf:/etc/mysql/conf.d \
  -v /root/mysql/init:/docker-entrypoint-initdb.d \
  mysql:8.0.26

此时的data目录下，已经有新的数据库了：

可以在mysql客户端，如navicat中查看hmall数据库的所有表单信息，不过要提前建立连接，主机填上虚拟机的IP地址：

可以在navicat中查看虚拟机上的mysql的数据库信息：

 至此，数据库部署完毕。

三、SpringBoot后端部署

准备一个springboot项目，如下：

配置好jdk和maven环境后，点击clean再package

 可以看到在hm-service中生成了一个target目录和Dockerfile，且在target目录下面有一个hm-service.jar：

然后在虚拟机的root目录下，创建一个hmallDemo目录，方便管理：

mkdir hmallDemo

随后将Dockerfile和hm-service.jar拖拽到hmallDemo下：

创建hmall镜像：

docker build -t hmall .

查看创建成功的镜像：

docker images

 然后创建并运行容器：

--network mynet可选，把容器添加到自定义网络

docker run -d --name hm -p 8080:8080 --network mynet hmall

然后查看运行中的容器：

docker ps

观察hmall的日志：

docker logs -f hm

可以看出来Spring项目启动成功了： 

通过浏览器访问：

四、Vue前端部署

准备好vue项目，将它打包成html文件夹，并用nginx.conf进行配置。

• html是静态资源目录，我们需要把hmall-portal以及hmall-admin都复制进去

• nginx.conf是nginx的配置文件，主要是完成对html下的两个静态资源目录做代理

 nginx.conf如下：

worker_processes  1;

events {
    worker_connections  1024;
}

http {
    include       mime.types;
    default_type  application/json;

    sendfile        on;
    
    keepalive_timeout  65;

    server {
        listen       18080;
        # 指定前端项目所在的位置
        location / {
            root /usr/share/nginx/html/hmall-portal;
        }

        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
        location /api {
            rewrite /api/(.*)  /$1 break;
            proxy_pass http://hm:8080;
        }
    }
    server {
        listen       18081;
        # 指定前端项目所在的位置
        location / {
            root /usr/share/nginx/html/hmall-admin;
        }

        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
        location /api {
            rewrite /api/(.*)  /$1 break;
            proxy_pass http://hm:8080;
        }
    }
}

可以看出来有两个端口，分别为前台portal和后台admin。

把整个nginx目录上传到虚拟机的/root目录下：

然后创建nginx容器并完成两个挂载：

• 把/root/nginx/nginx.conf挂载到/etc/nginx/nginx.conf

• 把/root/nginx/html挂载到/usr/share/nginx/html

由于需要让nginx同时代理hmall-portal和hmall-admin两套前端资源，因此我们需要暴露两个端口：

• 18080：对应hmall-portal

• 18081：对应hmall-admin

命令如下：

docker run -d \
  --name nginx \
  -p 18080:18080 \
  -p 18081:18081 \
  -v /root/nginx/html:/usr/share/nginx/html \
  -v /root/nginx/nginx.conf:/etc/nginx/nginx.conf \
  --network mynet \
  nginx

然后查看运行中的容器：

docker ps

查看日志输出

docker logs -f hm

打开浏览器，可以看见成功部署了：

点击搜索：

因此前后端和数据库均部署成功。