iView+SpringBoot 在 Docker 内构建工作流案例

前后端分离的情况下，使用目前非常流行的 Vue 作为前端框架，SpringBoot 作为后端框架，再利用 iView 的 Steps 组件和 Docker 容器技术，构建一个基础的工作流案例。

前言

先上案例源代码: liumapp/file-workflow

前端项目在 flow-ui 下，后端项目在 flow-service 下。

利用 Docker-compose 了将后端项目和前端项目部署在 Docker 下，因为 Vue 单独运行需要 nodejs 环境支持，所以在 Docker 下额外添加了 Nginx 进行前端项目的支持。

Nginx 的配置文件和日志及 www 目录部署在 nginx 目录下。

环境配置

直接上 docker-compose.yml 代码:

version: '2'

services:
  flow-service:
	container_name: flow-service
	restart: always
	image: liumapp/flow-service:v1.0.0
	ports:
	  - 2020:2020
	volumes:
	  - ./flow-service/pic:/pic
	networks:
	  - flow-net

liumapp/flow-service:v1.0.0 需要从 flow-service 下，利用 mvn 编译后生成，不能直接从 docker hub 中拉取，所以需要先运行./build-image.sh 安装镜像。

并且在 docker-compose down 之后，mvn 编译生成的 docker image 也不会自动删除，所以需要运行./rm-image.sh 进行手动删除。

  nginx:
	container_name: nginx
	restart: always
	image: nginx:1.13
	ports:
	  - 80:80
	  - 443:443
	volumes:
	  - ./nginx/conf/vhosts:/etc/nginx/conf.d
	  - ./nginx/logs:/var/log/nginx
	  - ./nginx/www/:/var/www/
	networks:
	  - flow-net
	  

配置 Nginx，并将 flow-ui 下的 vue 项目在 npm run build 之后，将 dist 下的内容拷贝到./nginx/www/flowui 下。

networks:
  flow-net:
	driver: bridge      

配置 docker 容器内的网络。

后端

后端代码部署在/flow-service 下，是一个标准的 springboot web 项目。

需要注意一点，前端上传的图像、文件信息是存放在/pic 下，但是这个/pic 目录，是表示 docker 容器内的 pic 目录，这个目录利用了 volumes 与./flow-service/pic 建立了映射关系。

所以前端上传的图片实际是存放在./flow-service/pic 下。

前端

前端代码部署在/flow-ui 下，是一个标准的 vue2.0 项目。

与后端交互的接口配置在/src/libs/util.js 下。

需要注意一点，如果对 flow-ui 进行了改动，重新编译后，如果需要在 docker 下运行最新的效果，需要将编译好的 dist 目录下的文件 copy 到/nginx/www/flowui 下。

如果不希望让前端项目在 docker 下运行，直接在宿主机的 nodejs 环境下启动也是可以的，并不需要做额外的改动，只需要在 docker-compose.yml 下，将 nginx 的相关配置注释掉即可（事实上不在意 80 端口被占用的话，不注释也是可以的）。

结尾

项目运行的效果，及源码都非常简单，在项目的 README 下都有直观的体现。