dockerfile部署前后端(vue+springboot)-EW帮帮网

微信交流群：https://732903.hlcode.cn/?id=NK1fWUR

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

前言

本篇文章，用来记录如何将一个springboot+vue开发的项目部署到云服务器上。分别打包前后端为一个镜像，方便以后再次部署。

0.环境说明和准备

我们会有一台云服务器，并且在上面安装配置好了宝塔面板（很多提供商都提前装好的），然后安装好了docker工具。

登录并访问宝塔页面，我们先选择安装推荐设置：
在这里插入图片描述

在这里插入图片描述
环境安装好后，我们先要将项目打包。
不管是前端还是后端项目，都有多环境的配置，允许我们在不同的场景间切换配置，接下来，我们看看前后端分别如何完成多环境切换并且打包的。

1.前端多环境打包

1.1前端多环境设置

这里简单提一下前端如何进行多环境设置
前端对于vue项目来说，我们要使用多环境，就会为每个环境编写.env文件。然后在执行vue-cli的打包命令时额外通过–mode参数来指定要激活的环境。
然后在打包后的文件中，加载的数据就是对应的.env文件中的数据。

1.2打包

设置好多环境后，我们先使用vue-cli工具将项目打包，命令是vue-cli-service build，可以先在package.json文件中进行封装：
在这里插入图片描述

执行完成后会生成一个dist文件夹来存放我们打包好的文件。
打包时不指定mode则我们默认读取的是.dev.production这个环境配置文件。
然后我们可以得到打包后的dist文件夹

2.后端项目多环境配置以及打包

2.1后端多环境配置

这里也只是简单提一下：
大体来说就是，提供多个application-环境名，的配置文件来进行不同环境下的配置。
然后在主要配置文件(application.yml)下使用spring.profiles.active配置项目来指定当前启用的环境

2.2项目打包

我们使用maven打包
在这里插入图片描述

3.文件上传

打包好后，就可以将打包好的前端dist目录和后端jar包上传到服务器（FTP或其他工具都可以），这里使用宝塔面板的话直接使用它提供的上传功能即可。
在这里插入图片描述

4.后端镜像制作

4.1dockerfile编写

我们先制作后端的镜像，首先我们需要先拿到一个JDK的镜像作为基础镜像，这个JDK的版本要和项目需求的版本相符。
我们在与jar包同级的目录中创建dockerfile文件，并编写其内容如下

FROM openjdk:17
WORKDIR /app
//这里SPRING_ENV就是环境变量名，对应项目配置文件中${}中的内容，
//设置了一个默认值dev, 代表默认情况下以开发模式下的配置执行
ENV SPRING_ENV=dev
COPY myproject.jar /app
EXPOSE 9090
CMD ["java", "-jar", "myproject.jar"]

如果是在多环境下，要做到能够在运行容器时切换环境，那么需要使用环境变量
首先，在项目的配置文件中应该将激活环境的配置项的值修改为从环境变量获取
在这里插入图片描述

4.2构建镜像

然后我们使用docker build命令构建镜像
在这里插入图片描述
然后我们可以看到镜像构建完成：

4.3容器允许

下来就可以使用docker run命令来运行容器了，为了方便展示，使用-it参数让其展示运行效果在界面上：
docker run -it -p 9090:9090 --name bootproject myprojectimage:latest
在这里插入图片描述
至此，后端部署完成，然后去服务器防火墙配置中将9090端口放行即可。

5.前端镜像制作

5.1nginx配置文件

我们要使用nginx服务器部署项目，那么我们要先编写好nginx的配置文件。
我们在dist同级的目录下创建好nginx.conf文件（为了方便也可以在自己电脑中编写好后再上传到服务器），在里面配置好端口、项目路径、ip等。以下是这次的配置文件：

# nginx进程数
worker_processes  1;
# 事件区块
events {
# 单个进程最大连接数
    worker_connections  1024;
}
# 设定http服务器
http {
	#include：导入外部文件mime.types，将所有types提取为文件，然后导入到nginx配置文件中
    include       mime.types;
	 #默认文件类型
    default_type  application/octet-stream;
	#开启高效文件传输模式，sendfile指令指定nginx是否调用sendfile函数来输出文件，对于普通应用设为 on，如果用来进行下载等应用磁盘IO重负载应用，可设置为off，以平衡磁盘与网络I/O处理速度，降低系统的负载。注意：如果图片显示不正常把这个改成off。
    sendfile        on;
	#长连接超时时间，单位是秒
    keepalive_timeout  65;
	# 第一个Server区块开始，表示一个独立的虚拟主机站点
    server {
	 # 提供服务的端口，默认80
        listen       9528;
		# 提供服务的域名主机名
        server_name  localhost;
		#服务默认启动目录
		root   G:/nginx-1.26.2/html/dist;
		# 默认的首页文件，多个用空格分开
		index index.html;
        location / {
            
            try_files $uri $uri/ /index.html;
        }
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }
	server {
        listen       9529;
        server_name  localhost;
		root   G:/nginx-1.26.2/html/distdev;
		index index.html;

        location / {
            
            try_files $uri $uri/ /index.html;
        }
		 # 错误页面路由
		 # 出现对应的http状态码时，使用50x.html回应客户
        error_page   500 502 503 504  /50x.html;
		# location区块开始，访问50x.html
        location = /50x.html {
		# 指定对应的站点目录为html
            root   html;
        }
    }
}

这里我将不同环境打包生成的dist目录分别配置在两个server配置中，为其分配不同端口，server_name改为自己的服务器名
需要注意的是，对于vue项目而言，需要额外配置访问根路径时的文件匹配规则，也就是：

location / {
            
            try_files $uri $uri/ /index.html;
        }

5.2dockerfile文件编写

接下来，来编写dockerfile文件，内容如下
在这里插入图片描述

因为我们在nginx中分别为不同环境的项目包配置了不同的server所以这里也要暴露两个端口。
然后将项目目录和nginx配置文件分别放到指定位置（nginx的配置目录和项目目录）

5.3构建镜像

在这里插入图片描述

5.4容器运行

在这里插入图片描述

5.5测试

我访问服务器对应前端接口，发现页面错误
在这里插入图片描述
查看日志，报错信息如下：

表示发生了重定向循环
于是开始排查问题

我们可以使用 docker exec -i -t 容器id /bin/bash来与容器的linux进行交互
在这里插入图片描述
可以看到，使用该命令我们可以进入容器的linux系统中（每个容器都可以当作是一个小的linux系统）
然后我们分别进入存放项目文件和nginx配置文件的路径中查看，发现容器中并不存在我们的dist目录。
说明，我们本地的项目文件并没有被成功的放到容器中，于是通过docker cp命令在容器运行时手动复制项目文件到容器中，解决问题。
在这里插入图片描述

总结

本文章是对一个简单的项目部署流程的记录。现在有了前后端镜像后，可以进一步使用docker compose工具进行容器的批量运行，将前后端的部署工作也放到一起。

dockerfile部署前后端(vue+springboot)

文章目录

前言