环境准备

• CentOS 7.x，ip 192.168.62.130
• 基于 SpringBoot 的后端服务一个，端口号 8081
• 基于 Vue 的前端工程

说明：这个后端服务是对 MySQL 一张单表 Metadata（实体类）的 CRUD 操作。前端即页面上点击实现增删改查。

第一步：Docker 环境搭建

参考博文：Docker 安装与配置

第二步：Docker 部署后端 jar 服务

（1）后端项目打包

将基于 Spring Boot 的后端服务使用 Maven 打包。有很多种方式：

• 可以在控制台直接：mvn clean package [-Dmaven.test.skip=true|-DskipTests] ，可选的两种方式跳过打包时的测试（前提是你的操作系统了配置好 Maven 的环境变量）
• 在 IDEA 的 Maven 可视化面板里点击即可，也可在上方勾选跳过测试的图标（绿色的闪电⚡）
• 在项目的 pom 文件的 <properties> 下配置 <skipTests>true</skipTests>。（这是因为 spring-boot-maven-plugin 插件集成了maven-surefire-plugin 插件，会自动运行 junit test）

（2）准备 Dockerfile 文件

在项目的根路径下新建 deploy 文件夹，里面新建 Dockerfile 文件，这里准备了一个最简的：

# 基础镜像
FROM openjdk
# 作者信息
LABEL maintainer="2466267753@qq.com"
# 开放端口
EXPOSE 8081
# 将 ams-0.0.1-SNAPSHOT.jar 复制到 docker 中，并重命名为 ams.jar
ADD ams-0.0.1-SNAPSHOT.jar ams.jar
# 容器执行命令
ENTRYPOINT ["java", "-jar", "ams.jar"]

取出打包后的位于 /target 目录下的 jar 包，放到 Dockerfile 同一目录下。在 IDEA 里配置好 SSH 连接 CentOS，然后打开可视化的 Docker 工具，我们采用可视化的操作制作并启动镜像。具体步骤可参考：IDEA 发布 SpringBoot 项目到 Docker。项目启动后可在 IDEA 里 Docker 工具的端口绑定处绑定一个对外端口 8081 > 18081。

第四步：Docker 搭建 Nginx 环境

Docker 部署 Nginx 的步骤如下：

# 拉取镜像
docker pull nginx

# 创建 Nginx 容器，因为要拷贝一些文件以及设置挂载目录，需要先启动一个nginx容器
docker run -di --name nginx -p 80:80 nginx

# 创建宿主机目录，用于存放挂载文件
mkdir docker-nginx

# 将容器内的配置文件拷贝到宿主机新建的文件夹内，并重命名
docker cp nginx:/etc/nginx /opt/docker-v-data/docker-nginx
# 重命名为 conf
mv nginx/ conf

# 这时候就可以将当前的容器停掉、删除了
docker stop nginx
docker rm nginx

# 新建宿主机目录用于挂载前端文件
mkdir front
# 此时的文件结构为：
#  [root@bogon:/opt/docker-v-data/docker-nginx]# tree
#  .
#  ├── conf
#  │   ├── conf.d
#  │   │   └── default.conf
#  │   ├── fastcgi_params
#  │   ├── mime.types
#  │   ├── modules -> /usr/lib/nginx/modules
#  │   ├── nginx.conf
#  │   ├── scgi_params
#  │   └── uwsgi_params
#  └── front
#
#  3 directories, 7 files

# 启动我们要用的 nginx，命名为 mynginx，设置挂载目录（配置文件目录、前端文件挂载目录）
docker run -di --name mynginx -p 80:80 \\
		-v /opt/docker-v-data/docker-nginx/conf:/etc/nginx \\
		-v /opt/docker-v-data/docker-nginx/front:/usr/share/nginx/html \\
		nginx

到此，一个设置好挂载目录的 Nginx 容器便启动成功了。这时候在宿主机的

• /opt/docker-v-data/docker-nginx/conf 目录下：设置配置文件
• /opt/docker-v-data/docker-nginx/front 目录下：放前端 dist 文件夹

第五步：前端文件打包、部署

（1）前端配置

第一步：前端工程里添加一个文件：前端根目录 /config/prod.env.js，里面添加如下代码：

'use strict'
module.exports = {
    NODE_ENV: '"production"',
    BASE_URL: '"/api"'
}

第二步：在前端 axios 调用后端接口时，需要在路径最前方带上 /api，例如查询所有元数据的后端服务接口为

http://localhost:8081/metadata，原来在前端项目里我们需要写成 /metadata 即可，现在需要写成 /api/metadata。

（2）Nginx 部署前端、配置文件修改

npm run build 打包前端文件成一个 dist 文件夹，将这个文件传到 CentOS 的 /opt/docker-v-data/docker-nginx/front 目录下，即挂载目录。

修改宿主机 CentOS 的 /opt/docker-v-data/docker-nginx/conf/nginx.conf

user  nginx;
worker_processes  1;

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;

    server {
        listen       80;
        server_name  localhost;
        location / {
        	root /usr/share/nginx/html/dist/;
					index index.html;
					try_files $uri $uri/ /index.html;
        }
        location /api/ {
            # 注意这里不能写 localhost 或 127.0.0.1，因为 Nginx 也是部署在 Docker 上的，且都是采用
            # 的默认的 Bridge 网络模式，每个启动的容器都有自己 ip，类似于 172.17.0.x。如果写 localhost 或 127.0.0.1 本地			# 回环地址，会报错 502 错误。
            # 综上：此处需要写宿主机的 ip:宿主机暴露出的端口（docker ps 可看）
            # 或者写容器内的 ip:后端服务在容器内的端口（docker network inspect bridge 或 docker inspect 容器ID|名称 均可看）
          proxy_pass <http://192.168.62.130:18081/;>
					proxy_set_header Host $host;
					proxy_set_header X-Real-IP  $remote_addr;
					proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
					proxy_set_header Product_Type 2;
        }
    }
    #gzip  on;
    include /etc/nginx/conf.d/*.conf;
}

（3）前端打包发布

npm run build 将前端打成一个 dist 文件夹，将其上传至 /opt/docker-v-data/docker-nginx/front 目录下，即发布成功。

第六步：重启 Nginx 容器

docker restart mynginx

# 查看日志
docker logs -f munginx