Docker中使用Dockerfile的方式部署SpringBoot+Vue前后端分离的项目(若依前后端分离框架为例)

淩亂°似流年 2022-09-11 00:03 442阅读 0赞

# 场景 #

若依前后端分离版手把手教你本地搭建环境并运行项目：

[https://blog.csdn.net/BADAO\_LIUMANG\_QIZHI/article/details/108465662][https_blog.csdn.net_BADAO_LIUMANG_QIZHI_article_details_108465662]

在上面搭建起来SpringBoot+Vue前后端分离的项目后，如果要进行项目部署的话。

可以通过nginx部署前端代码并进行接口机请求映射，后台jar包单独启动，redis和mysql都要安装。具体流程可以参照下面

若依前后端分离版本，Windows下使用Nginx代理的方式进行部署(全流程，图文教程)：

[https://blog.csdn.net/BADAO\_LIUMANG\_QIZHI/article/details/108120070][https_blog.csdn.net_BADAO_LIUMANG_QIZHI_article_details_108120070]

如果要求用Docker镜像的方式怎样部署。

注：

博客：  
[https://blog.csdn.net/badao\_liumang\_qizhi][https_blog.csdn.net_badao_liumang_qizhi]  
关注公众号  
霸道的程序猿  
获取编程相关电子书、教程推送与免费下载。

# 实现 #

这里使用Dockerfile定制镜像的方式。

将redis和mysql使用单独的镜像，并在运行容器时指定密码。

将后台jar包基于jdk定制化镜像。

将前端dist包基于nginx定制化镜项。

1、docker中部署redis

CenOS7中使用Docker安装配置Redis(数据持久化与数据卷映射):

[https://blog.csdn.net/BADAO\_LIUMANG\_QIZHI/article/details/119823807][https_blog.csdn.net_BADAO_LIUMANG_QIZHI_article_details_119823807]

这里设置的其密码是123456，则在SpringBoot中连接redis的密码也是对应的123456

然后将系统对应的sql文件导入进入数据库即可，可以使用Navicat等工具连接后导入sql。

2、docker中部署mysql

Docker中部署mysql数据库:

[https://blog.csdn.net/BADAO\_LIUMANG\_QIZHI/article/details/99213563][https_blog.csdn.net_BADAO_LIUMANG_QIZHI_article_details_99213563]

需要注意的是这里在运行容器时要额外设置其忽略大小写，不然在jar包中连接数据库

后会提示找不到表，而此表是已经存在的。

解决方式：

启动时加上命令

--lower_case_table_names=1

完整命令

docker run -p 3306:3306 --name mysql -v /usr/local/docker/mysql/conf:/etc/mysql -v /usr/local/docker/mysql/logs:/var/log/mysql -v /usr/local/docker/mysql/data:/var/lib/mysql -e MYSQL_ROOT_PASSWORD=123456 -d mysql:5.7 --lower_case_table_names=1

3、Dockfile定制带jar包的镜像

此jar包打包时设置的redis和mysql的地址都是localhost

然后密码都是对应的运行容器时的密码。

CentOS7中使用Dockerfile部署后台jar包：

[https://blog.csdn.net/BADAO\_LIUMANG\_QIZHI/article/details/119818808][https_blog.csdn.net_BADAO_LIUMANG_QIZHI_article_details_119818808]

基于上面实现定制化带jar包的镜像。

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAQkFEQU9fTElVTUFOR19RSVpISQ_size_15_color_FFFFFF_t_70_g_se_x_16][]

注意两点：

一是Docker中使用Dockerfile定制化jar启动时:at sun.awt.FontConfiguration.getVersion(FontConfiguration.java:1264)：

[https://blog.csdn.net/BADAO\_LIUMANG\_QIZHI/article/details/120204615][https_blog.csdn.net_BADAO_LIUMANG_QIZHI_article_details_120204615]

要注意若依中登录页面时访问验证码时会提示这个错误。

一个是如果直接按照上面博客中启动的话，jar包里面请求连接redis和mysql的地址都是localhost时会找不到该地址。

需要在运行时给其指定网络

Docker使用了Linux的Namespaces技术来进行资源隔离，如PID Namespace隔离进程，Mount Namespace隔离文件系统，

Network Namespace隔离网络等。一个Network Namespace提供了一份独立的网络环境，包括网卡、路由、Iptable规则等都与其他的Network Namespace隔离。

host模式类似于Vmware的桥接模式，与宿主机在同一个网络中，但没有独立IP地址。一个Docker容器一般会分配一个独立的Network Namespace。

但如果启动容器的时候使用host模式，那么这个容器将不会获得一个独立的Network Namespace，而是和宿主机共用一个Network Namespace。

容器将不会虚拟出自己的网卡，配置自己的IP等，而是使用宿主机的IP和端口。

运行时指定网络为host

docker run -d -p 7777:7777 --net=host badaoserver

这里的7777就是SpringBoot指定的后台端口

4、Dockerfile定制基于nginx的前端镜像

CentOS中使用Docker+nginx部署Vue打包的dist项目：

[https://blog.csdn.net/BADAO\_LIUMANG\_QIZHI/article/details/119839732][https_blog.csdn.net_BADAO_LIUMANG_QIZHI_article_details_119839732]

基于上面将前端项目打成dist包，nginx的核心修改配置如下

server {
            listen       100;
            server_name  localhost;
    
     
    
            #charset koi8-r;
    
            #access_log  logs/host.access.log  main;
    
            location / {
                root   /usr/share/nginx/html;
                index  index.html index.htm;
            }
    
      location /prod-api/ {
     
                proxy_set_header Host $http_host;
          proxy_set_header X-Real-IP $remote_addr;
          proxy_set_header REMOTE-HOST $remote_addr;
          proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
          proxy_pass http://localhost:7777/;
            }

其中100是前端项目指定的端口。

需要注意的是在启动nginx容器时也要指定网络

docker run -d -p 100:100 --net=host badaofont

5、查看效果

将所有容器启动后将服务器上100端口开放

firewall-cmd --add-port=100/tcp --permanent
    firewall-cmd --reload

然后直接访问ip:100查看部署效果

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAQkFEQU9fTElVTUFOR19RSVpISQ_size_20_color_FFFFFF_t_70_g_se_x_16][]

如果有问题可以查看jar包的镜像的运行日志，这里是正常启动的

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAQkFEQU9fTElVTUFOR19RSVpISQ_size_20_color_FFFFFF_t_70_g_se_x_16 1][]

为了单独验证后台jar包是否启动成功，可以开放后台7777端口并单独访问验证码接口进行验证

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAQkFEQU9fTElVTUFOR19RSVpISQ_size_20_color_FFFFFF_t_70_g_se_x_16 2][]

[https_blog.csdn.net_BADAO_LIUMANG_QIZHI_article_details_108465662]: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/108465662
[https_blog.csdn.net_BADAO_LIUMANG_QIZHI_article_details_108120070]: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/108120070
[https_blog.csdn.net_badao_liumang_qizhi]: https://blog.csdn.net/badao_liumang_qizhi
[https_blog.csdn.net_BADAO_LIUMANG_QIZHI_article_details_119823807]: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/119823807
[https_blog.csdn.net_BADAO_LIUMANG_QIZHI_article_details_99213563]: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/99213563
[https_blog.csdn.net_BADAO_LIUMANG_QIZHI_article_details_119818808]: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/119818808
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAQkFEQU9fTElVTUFOR19RSVpISQ_size_15_color_FFFFFF_t_70_g_se_x_16]: /images/20220829/6c1933d969d84da08cdc2f33cb44f332.png
[https_blog.csdn.net_BADAO_LIUMANG_QIZHI_article_details_120204615]: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/120204615
[https_blog.csdn.net_BADAO_LIUMANG_QIZHI_article_details_119839732]: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/119839732
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAQkFEQU9fTElVTUFOR19RSVpISQ_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220829/9d936ba965d543d48ba61c99c3387925.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAQkFEQU9fTElVTUFOR19RSVpISQ_size_20_color_FFFFFF_t_70_g_se_x_16 1]: /images/20220829/6c2d140b45644c47abc1c88636d31194.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAQkFEQU9fTElVTUFOR19RSVpISQ_size_20_color_FFFFFF_t_70_g_se_x_16 2]: /images/20220829/c673784c6c28491ba54bee9a8c7bdbb3.png