(Docker Nginx) Spring boot+Vue 前后端分离部署 详细完整版

简述：Spring boot+Vue 前后端分离项目部署，主要采用docker容器部署方式。

Springboot项目部署：docker构建mysql环境+docker构建项目自身环境。

Vue项目：使用docker启动nginx服务器方式代理部署。

1.SpringBoot项目部署

项目使用mysql8.0作为数据源，所以部署时需要使用docker构建mysql环境及项目自身环境。

1.1.mysql容器

1.1.1.拉取镜像

docker pull mysql:8.0.22 #pull成功之后通过 docker images查看

1.1.2.运行容器

docker container run --name mysql8.0.22 -p 3306:3306 -v /$mysql8.0.22/data:/var/lib/mysql -e MYSQL_ROOT_PASSWORD=123456 -d mysql:8.0.22

连接出现1251错误时：

#1.进入容器
docker exec -it mysql8.0.22 /bin/bash
#2.连接mysql服务器进行配置修改
use mysql;
alter user 'root'@'%' identified with mysql_native_password by '123456';
flush privileges;

1.2.项目容器

首先将项目进行打包：mumu-0.0.1-SNAPSHOT.jar

1.2.1.Dockerfile文件

FROM openjdk:11.0-jre
VOLUME /tmp
COPY mumu-0.0.1-SNAPSHOT.jar mumu.jar
RUN bash -c "touch /mumu.jar"
EXPOSE 8081
ENTRYPOINT ["java","-jar","mumu.jar","--spring.datasource.url=jdbc:mysql://192.168.18.170:3308/nms8000?createDatabaseIfNotExist=true&autoReconnect=true&useUnicode=true&characterEncoding=utf8&serverTimezone=Asia/Shanghai"]

解释：
FROM openjdk:11.0-jre：项目jdk运行环境，Dockerfile可以通过FROM指令直接获取它的状态，也就是在容器中java是已经安装的，接下来通过自定义的命令来运行Spring Boot应用。
VOLUME：指向了一个/tmp的目录，由于Spring Boot使用内置的Tomcat容器，Tomcat默认使用/tmp作为工作目录。效果就是在主机的/var/lib/docker目录下创建了一个临时文件，并连接到容器的/tmp。
将项目的jar文件作为app.jar添加到容器
RUN：表示在新创建的镜像中执行一些命令，然后把执行的结果提交到当前镜像。这里使用touch命令来改变文件的修改时间，Docker创建的所有容器文件默认状态都是“未修改”。这对于简单应用来说不需要，不过对于一些静态内容（比如：index.html）的文件就需要一个“修改时间”。
EXPOSE：容器向外暴露的端口，用于容器生成时和主机某端口进行映射 必要
ENTRYPOINT：容器应用启动命令 参数设定 
# 注意： ENTRYPOINT 配置相关ip地址时，localhost或者127.0.0.1会被指向当前容器，例如：如果你需要连接本机中的mysql服务器，你必须把ip换成本机ip而不是localhost

1.2.2.生成镜像

$ docker image build -t mumu .
# 或者
$ docker image build -t mumu:0.0.1 .
解释：
-t参数用来指定 image 文件的名字，后面还可以用冒号指定标签。如果不指定，默认的标签就是latest。最后的那个点表示 Dockerfile 文件所在的路径
image创建成功可以通过 docker image ls / docker images 来查看新生成的docker image信息

1.2.3.运行容器

docker container  run --name mumu -p 8081:8081 \
-v /opt/jar/springBootDocker/logs:/home/nms/sunam/docker-volumes/mumu \
-it -d mumu:0.0.1 /bin/bash

解释
 run: 容器启动命令
--name 自定义容器命名
-d 程序后台启动
-v /opt/jar/boot-docker/logs:/log 应用日志 数据卷的方式存储，将容器中的/log文件夹挂载到本机中的/opt/jar/boot-docker/logs
-p 8081:8081 用主机(前面)端口映射容器中(后面)的端口
-it参数：容器的 Shell 映射到当前的 Shell，然后你在本机窗口输入的命令，就会传入容器
mumu:0.0.1 image名称 （如果有标签提供标签，默认是 latest 标签）
/bin/bash  容器启动以后，内部第一个执行的命令。这里是启动 Bash，保证用户可以使用 Shell

到此，springboot项目采用docker方式运行部署结束。

2.Vue项目部署

2.1.项目打包

npm run build

DONE Build complete. The dist directory is ready to be deployed.
执行完成之后会在项目目录下生成文件夹dist，之后我们将该文件夹进行nginx代理部署即可

其他开发中使用到的命令(本人后端开发，对vue使用不是很了解，顺带记录下)：
1.vue ui #启动在线项目可视化管理
2.npm run serve #启动vue项目
3.vue add element #项目添加element插件依赖
4.vue add axios #项目添加axios插件依赖

2.2.nginx部署

使用docker容器方式运行nginx服务器。

1.2.1.代理概念

• 正向代理

  代理client端，隐藏了client进行隐藏：由于一些原因客户端不能直接访问目标服务器，于是客户端将请求发送给中间代理服务器，由中间代理服务器向目标服务器发起请求，并将请求到的数据返回给客户端。在这个过程中，目标服务器并不知道客户端姓甚名谁，因为它收到的只是中间代理服务器的请求。此时，客户端和中间代理服务器是一个整体，客户端对目标服务器是隐藏的。

• 反向代理

  代理server端，对server端进行隐藏：比如一个基本的微服务系统，会有网关转发模块和多种业务模块，我们通过在网关层进行路由配置，不同路由前缀访问到后端不同的业务模块，并对客户端只暴露网关的端口，比如客户端可以通过ip:9999/user/**访问用户模块信息，通过ip:9999/order/** 访问订单模块信息，对于客户端来说，只是访问了网关服务9999，对于用户模块和订单模块是不知道的。此时，网关层扮演的就是服务反向代理。

1.2.2.拉取镜像

docker pull nginx #命令默认latest，也可自己指定版本

1.2.3.运行容器

对于nginx服务器，重要的两个操作是：

• 配置页面访问资源，配置路径：/usr/share/nginx/html

• 修改nginx.conf文件，配置具体代理策略

所以我们在配置启动nginx容器的时候，需要将对应的目录及文件进行宿主机挂载，方便后续更新资源及操作

启动命令：

$ docker run -d --name nginx -p 80:80 \
-v $NGINX/html:/usr/share/nginx/html \
-v $NGINX/log:/var/log/nginx \
-v $NGINX/nginx.conf:/etc/nginx/nginx.conf \
-d nginx
# 注意：这种方式是读取宿主机下的资源及配置进行启动，所以要求“$NGINX/html”及“$NGINX/nginx.conf”文件有效，否者容器会启动失败，可以先进行目录及文件不挂载方式运行，将nginx中的“/etc/nginx/nginx.conf”配置文件拷贝出来。
# 拷贝命令：
docker cp nginx:/etc/nginx/nginx.conf . 
docker cp nginx.conf nginx:/etc/nginx/nginx.conf #将nginx.conf拷进容器

1.2.4.资源及代理配置

• 将vue打包后的dist文件目录上传到服务器对应目录下“$NGINX/html”

• nginx.conf文件配置

  user  nginx;
  worker_processes  auto;
  
  error_log  /var/log/nginx/error.log notice;
  pid        /var/run/nginx.pid;
  
  
  events {
      worker_connections  1024;
  }
  
  
  http {
      include       /etc/nginx/mime.types;
      default_type  application/octet-stream;
  
      log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                        '$status $body_bytes_sent "$http_referer" '
                        '"$http_user_agent" "$http_x_forwarded_for"';
  
      access_log  /var/log/nginx/access.log  main;
  
      sendfile        on;
      #tcp_nopush     on;
  
      keepalive_timeout  65;
  
      #gzip  on;
      server {
          listen       80;#监听端口
          server_name  localhost;
  
          location / {
              root   /usr/share/nginx/html/dist;#资源目录 dist为vue打包编译后的目录
              index  index.html index.htm;
          }
          location /mumu/ {
              proxy_pass http://localhost:8081/;#8081为springboot项目容器暴露的端口
              proxy_read_timeout 6000s;
              proxy_set_header   Host    $host:$server_port;
              proxy_set_header   X-Real-IP   $remote_addr;
              proxy_set_header   X-Forwarded-For  $proxy_add_x_forwarded_for;
              client_max_body_size 1024M;
          }
      }
      include /etc/nginx/conf.d/*.conf;
  }
  

• nginx容器重启

  docker restart nginx

2.3.访问测试

• 访问"ip:8081/test"可以访问到springboot项目test接口

• 访问"ip:80"可以直接访问到vue默认页面

• 访问"ip:80/mumu/test"可以访问到springboot项目test接口