当前位置：首页 > news >正文

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

news 来源：原创 2024/9/20 15:31:39

💥 该系列属于【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项目，如下：

600

配置好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

然后查看运行中的容器：