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

目录

一、项目准备

二、MySQL数据库部署

三、SpringBoot后端部署

四、Vue前端部署

一、项目准备

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

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

准备好linux虚拟机。

准备好已经安装的docker。

二、MySQL数据库部署

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

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

<code>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改成自己的

<code>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目录，方便管理：

<code>mkdir hmallDemo

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

创建hmall镜像：

<code>docker build -t hmall .

查看创建成功的镜像：

<code>docker images

 然后创建并运行容器：

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

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

然后查看运行中的容器：

docker ps

观察hmall的日志：

<code>docker logs -f hm

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

通过浏览器访问：

四、Vue前端部署

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

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

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

 nginx.conf如下：

<code>

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容器并完成两个挂载：

把<code>/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

查看日志输出

<code>docker logs -f hm

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

点击搜索：

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