1.基础环境准备

首先我们需要的是完成前两篇文章中的准备工作，即在vmware中开启一个虚拟机，完成docker的下载以及数据库容器的运行操作；其次为了部署程序，我们还需要准备好前后端分离的一套程序。

2.程序的打包

2.1打包后端程序

首先是yml文件的配置，数据库的地址写第二节我们部署的地址即可，然后依次填写账号密码

datasource:
  #    数据库驱动
  driver-class-name: com.mysql.cj.jdbc.Driver
  #    url地址
  url:
  username: 
  password: 

 然后是文件系统的配置，需要注意的是要有windows系统的路径改写为linux系统的路径

#文件上传路径
aeimpc:
  path: D:\Image\ => #/home/Image/

 除此之外，其他的点本程序并没有涉及到。

然后是pom文件的相关配置，在有关mainClass的配置项目中，要把skip中的内容改为false或者直接删掉即可，如果不这样做，打jar包后运行会报错清单中没有主类。

 然后开始打包，在idea的右上角点击maven图标后先clean后package等待即可。验证jar包是否能够运行，在项目的target目录中，输入cmd后回车。

输入指令java -jar  (你打包的jar包名称).jar，发现项目成功启动。

2.2打包前端程序

 在这套项目中的跨域问题我是在前端解决的，即给所有的基础请求路径中都加上“api”，在配置文件中检测到路径中含有api的请求时再把请求转发到后端即可。

而在部署时，转发这一操作由nginx来实现，所以在前端程序中，转发代理这一操作注释掉即可。

  /*server: {
    host: '0.0.0.0', // 设置为 0.0.0.0 以允许局域网访问
    port: 5173, // 设置端口号（可选，如果不设置，默认是 5173
    proxy: {
      '/api': { //获取路径中包含/api的请求
        target: 'http://localhost:9091', //后台服务所在的源  10.13.164.71   192.168.31.177
        changeOrigin: true, //修改源
        rewrite: (path) => path.replace(/^\/api/, '') //api替换为''
      },
    }
  },*/
}
)

 新建终端输入npm run build 后等待打包完成即可。

3.部署程序

连接到第一篇文章中的虚拟机上（192.168.41.111）在整个操作中忘记了一个内容，就是在完成后端前端部署时给虚拟机打快照，这个很重要，大家在自己操作的时候不要忘记。

3.1部署后端程序

首先为jar包创建一个文件夹并将target目录放到这个文件夹内

[root@localhost /]# cd usr/
[root@localhost usr]# mkdir JavaProject
[root@localhost usr]# cd JavaProject/
 

 然后创建dockerfile文件，文件的内容如下，其中的************.jar是你自己的jar包名称，将这个Dockerfile文件拖入到项目的同级目录下。

#自动拉取镜像

FROM openjdk:8

#设置容器时区

ENV TZ=Asia/Shanghai

#作者

MAINTAINER www

#对外暴露的端口号

EXPOSE 9091

#将本地文件添加到镜像文件中

ADD ************.jar /************.jar

#运行的方式

ENTRYPOINT ["java","-jar","/************.jar"]

 注意：这个文件是没有后缀的，命名也必须与此处完全一致。

  

构建镜像docker build -t 镜像名:1.0 .，第一次速度较慢，因为要下载jdk8

docker images 查看所有镜像，可以看到一个是我们数据库的镜像，一个是helloworld的镜像，还有一个就是我们刚刚创建的镜像了。

接下来就是构建容器并运行，需要注意的是将docker内的文件系统与docker与宿主机上的文件系统进行挂载，先将我们项目的文件系统拖入到虚拟机中，然后执行命令运行容器。

docker run -d --name 容器名 -p 9091:9091 -v /home/Image/:/home/Image/ 镜像名:1.0

输入docker ps查看所有正在运行的镜像

输入指令docker logs -f -t --tail 100 容器id后查看容器运行日志，可以看到这个容器成功的启动了，即我们的后端程序部署成功了。

3.2部署前端程序 

前端程序使用nginx部署，nginx有三个重要的文件目录，即配置文件目录（conf）,日志文件目录（log），存放资源的目录（html），由于是在docker内运行，所以在docker构建之前需要将三个目录挂载好（直接在根目录下挂载即可）。

# 创建挂载目录

mkdir -p /nginx/conf

mkdir -p /nginx/log

mkdir -p /nginx/html

 在容器内拉取nginx镜像并运行，这样操作后docker内部的nginx容器内是含有这几个文件的，我们要把这些文件的内容移动到我们的挂载目录中。

docker run --name nginx -p 80:80 -d nginx

# 将容器nginx.conf文件复制到宿主机

docker cp nginx:/etc/nginx/nginx.conf /nginx/conf/nginx.conf

# 将容器conf.d文件夹下内容复制到宿主机

docker cp nginx:/etc/nginx/conf.d /nginx/conf/conf.d

# 将容器中的html文件夹复制到宿主机

docker cp nginx:/usr/share/nginx/html /nginx/

目前docker内部运行了一个nginx容器，宿主机上有一个nginx目录包含配置文件、日志文件、资源文件的内容，但问题是他们目前还并没有挂载起来。

所以，我们需要做的是删除当前的容器，通过创建新nginx容器的方式将他们挂载起来。

删除当前容器：docker rm -f nginx

在运行新容器之前，我们需要做的是将我们自己的配置文件内容以及资源文件放到宿主机的nginx文件中。首先是default.conf文件。

server {
    listen       80;
    listen  [::]:80;
    server_name  192.168.41.111;

    location / {
        root   /usr/share/nginx/html/dist;
        index  index.html index.htm;
        try_files $uri $uri/ /index.html;
    }

    location /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://192.168.41.111:9091/; 
    }

    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }
}

监听宿主机的80端口，server_name是后端服务所在的地址；root   /usr/share/nginx/html/dist;静态资源所在的地址，注意这里是docker内部的配置，docker拉取nginx镜像时会将他拉取到容器内部的/usr/share/目录下，这就是这里为什么不是根目录下的/nginx/html/dist的原因。  location /api/块在检测到含有api请求的路径时的转发操作。

再将打包好的dist文件移动到对应的文件夹中。

然后运行新容器，注意不要忘记挂载文件系统。

docker run \

-p 81:80 \

--name nginx \

-v /nginx/conf/nginx.conf:/etc/nginx/nginx.conf \

-v /nginx/conf/conf.d:/etc/nginx/conf.d \

-v /nginx/log:/var/log/nginx \

-v /nginx/html:/usr/share/nginx/html \

-d nginx:latest

 docker ps查看所有的容器，可以看到我们的前端容器，后端容器以及数据库容器全部运行成功了。

nginx配置文件在windows中的版本：

worker_processes  1;

events {
    worker_connections  1024;
}

http {
    include       mime.types;
    default_type  application/json;

    sendfile        on;
    
    keepalive_timeout  65;


    server {
        listen       18080;
        server_name  localhost;

 	   # 前端静态文件根目录（按你实际路径改）
        root   html/dist;
        index  index.html;

       # 所有路径都 fallback 到 index.html，解决刷新时404
        location / {
            try_files $uri $uri/ /index.html;
        }

        location /api {
            rewrite /api/(.*)  /$1 break;
            proxy_pass http://localhost:80;
        }
 	error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }
}

3.3测试 

输入虚拟机地址加上nginx容器监听的端口（81），配置文件中虽然监听的是80，但是在运行容器时指定该容器监听了81。

 点击登录，正常跳转页面

docker logs -f -t --tail 100 后端容器名查看后端容器的运行日志，可以看到后端容器正常运行并能能够处理前端请求。至此部署完毕了。