前言
先上案例源代碼: 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下都有直觀的體現。
閱讀更多 JAVA小酷 的文章
