####
前后端项目部署-6， flask+Gunicorn+gevent+supervisor+nginx+redis+mysql+mongodb+vue，docker-compose部署
###
这一篇，主要是研究一下vue和flask结合起来，怎么使用docker部署，
其他的flask+Gunicorn+gevent+supervisor+nginx+redis+mysql+mongodb，docker-compose部署看上一篇，
这一篇主要研究vue，结合docker，flask，
###
目录
###
通过修改docker-compose.yml的配置，
先测试构建后端成功，
这一步很简单，就是flask+mysql+gunicorn来构建的，
第一步：
新建flask项目，添加接口代码
能成功运行项目
第二步：
添加gunicorn配置文件，
使用gunicorn能成功运行项目
第三步：
添加dockerfile文件，
第四步：
关联mysql，
添加mysql的dockerfile
第五步：
使用docker-compose，编排flask和mysql，
使用docker-compose build，构建，
使用docker-compose up，启动，
后端能正常访问，接口都能正常的浏览器访问，mysql相关的内容也能查出来，
####
然后测试构建前端成功，
第一步：
Vue CLI 创建一个 Vue 项目
第二步：
npm run serve
第三步：
添加代码，
第四步：
vue项目npm run build打包成dist目录
第五步：
Nginx 是一个高性能的 HTTP 和反向代理服务器，此处我们选用 Nginx 镜像作为基础来构建我们的vue应用镜像。
配置Nginx的dockerfile文件，
添加Nginx的配置文件
第六步：
使用docker-compose build，构建，
使用docker-compose up，启动，
前端能正常访问，但是接口相关的应该是不能访问的，
####
最后把前端和后端都放到一起，
第一步：
因为你的前端和后端，都是正常运行的了，
所以你需要使用docker-compose编排容器，包括三部分，flask，mysql，Nginx
第二步：
你需要注意Nginx配置里面添加 location api的内容，关联后端服务，
location /api/ { rewrite /api/(.*) /$1 break; proxy_pass http://172.17.0.2:8080; }
第三步，
使用docker-compose build，构建，
使用docker-compose up，启动，
这样前端后端都能访问了，
###
注意，Nginx起到的作用：
在整个的项目中，Nginx起到了关键的作用，
第一点，
Nginx通过挂载前端的静态文件，这样实际上只要不涉及接口，本身vue+Nginx，就是一个网站，只不过，页面都是静态的，只能展示
第二点，
Nginx转发请求到后端，这一点很重要，把前端和后端关联起来了，形成了一个整体，Nginx起到了转发的功能
整体的思路，就是把前端部署在nginx，通过匹配api进行转发到后端
###
注意，Nginx后续的优化-挂载和负载均衡
1，Nginx配置文件挂载
能不能每次修改配置文件后直接重启容器就能让新配置生效，答案当然是有。
在构建镜像的时候 不把 Nginx 配置复制到镜像中，而是直接挂载到宿主机上，每次修改配置后，直接重启容器即可。
看看原来的Nginx的dockerfile配置：
FROM nginx COPY dist/ /usr/share/nginx/html/ COPY nginx/default.conf /etc/nginx/conf.d/default.conf
将 COPY nginx/default.conf /etc/nginx/conf.d/default.conf 命令删除，Nginx 配置都通过挂载命令挂载在宿主机上。再看 COPY dist/ /usr/share/nginx/html/ 命令，如果每次构建的项目 dist/ 下的内容变动都需要重新走一遍构建新镜像再启动新容器的操作，因此这条命令也可以删除，使用挂载的方式来启动容器。
重新运行 Vue 应用容器
直接基于 Nginx 镜像来启动容器 vuenginxnew，运行命令：
docker run -p 3000:80 -d --name vuenginxnew --mount type=bind,source=$HOME/SelfWork/docker/vueclidemo/nginx,target=/etc/nginx/conf.d --mount type=bind,source=$HOME/SelfWork/docker/vueclidemo/dist,target=/usr/share/nginx/html nginx
此处运行的命令较长，如果每次重新输入难免麻烦，我们可以将完整的命令保存到一个 shell 文件 vueapp.sh 中，然后直接执行 sh vueapp.sh。
这样挂载启动，就是只要修改了配置文件就可以生效了，不需要构建了，
之前是
修改完了之后意识到一个问题：vueApp 容器是基于 vuenginxcontainer 这个镜像运行的，而在一开始构建镜像的时候是将 Nginx 配置 default.conf 直接构建进去了。因此如果需要修改 default.conf 还得再重新构建一个新的镜像，再基于新镜像来运行新的容器。
2，配置负载均衡
后端服务一般都是双机或者多机以确保服务的稳定性。我们可以再启动一个后端服务容器，并修改 Nginx 的配置来优化资源利用率，最大化吞吐量，减少延迟，确保容错配置。
修改一下 nginx/default.conf（新增 upstream ，修改 location /api/ 中的 proxy_pass）：
upstream backend { server 172.17.0.2:8080; server 172.17.0.3:8080; } …… location /api/ { rewrite /api/(.*) /$1 break; proxy_pass backend; }
####
问题：
1， docker容器之间怎么进行通信？
实际就是使用docker-compose编排容器的时候，就是默认在一个网络内的，
这个可以不用我们考虑，但是要知道这个原理，
2，docker部署需要用supervisor进行守护吗？
docker-compose 执行的时候能设置自动重启
所以我在这个里面，没有使用supervisor了，
3，镜像启动了拉不起来怎么办?怎么排除故障
我喜欢，docker-compose up启动容器，实际上，只要有问题，这个过程就是会报错的，可以清晰的看到报错日志，然后你就定位就行了，
最实用的办法，就是通过修改docker-compose，一步一步的排查，把每一部分分开构建，你就可以排除很多内容了，
#####