5.5 启动 nodeserver 容器
基于刚刚构建的 nodewebserver 镜像 启动一个名为 nodeserver 的容器来提供接口服务8080端口,并映射宿主的5000端口
docker run \ -p 5000:8080 \ -d --name nodeserver \ nodewebserver
查看当前docker进程
docker ps
可以发现 nodeserver 的容器也正常的运行起来。访问以下 http://localhost:5000/json 能访问到前面写的json数据
到目前为止,后端接口服务也正常启动了。只需最后把页面请求的接口转发到后端接口服务就能调通接口。
6. 跨域转发
想要将 vueApp 容器 上的请求转发到 nodeserver 容器上。首先需要知道 nodeserver 容器的ip
地址和端口,目前已知 nodeserver 容器内部服务监听在 8080 端口,还需要知道ip
即可。
6.1 查看 nodeserver 容器的 ip 地址:
查看容器内部 ip
有多种方式,这里提供两种:
- 进入容器内部查看
docker exect -it 02277acc3efc bash
cat /etc/hosts
- docker inspect [ containerId ] 直接查看容器信息:
docker inspect 02277acc3efc
在其中找到 Networks 相关配置信息:
记录下node服务容器对应的ip,一会儿配置nginx转发的时候会用到。
6.2 修改 nginx 配置
- Nginx 配置 location 指向 node 服务 default.conf (前端想要了解的Nginx,关于Nginx的配置已经 location 的具体写法可以参考(一文弄懂Nginx的location匹配))
- 添加一条重写规则,将 /api/{path} 转到目标服务的 /{path} 接口上。 在前面的nginx/default.conf文件中加入:
location /api/ { rewrite /api/(.*) /$1 break; proxy_pass http://172.17.0.2:8080; }
修改完了之后意识到一个问题:vueApp 容器是基于 vuenginxcontainer 这个镜像运行的,而在一开始构建镜像的时候是将 nginx配置 default.conf 直接构建进去了。因此如果需要修改 default.conf 还得再重新构建一个新的镜像,再基于新镜像来运行新的容器。
7. 改进
能不能每次修改配置文件后直接重启容器就能让新配置生效,答案当然是有。
在构建镜像的时候 不把 Nginx 配置复制到镜像中,而是直接挂载到宿主机上,每次修改配置后,直接重启容器即可。
7.1 修改 Dockerfile 文件
把 vueclidemo 项目下的 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/下的内容变动都需要重新走一遍构建新镜像再启动新容器的操作,因此这条命令也可以删除,使用挂载的方式来启动容器。
7.2 重新运行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
--mount type=bind,source={sourceDir},target={targetDir}
将宿主机的sourceDir 挂载到容器的 targetDir 目录上。
- 此处运行的命令较长,如果每次重新输入难免麻烦,我们可以将完整的命令保存到一个
shell
文件vueapp.sh
中,然后直接执行sh vueapp.sh
。
这样就能每次修改了nginx配置或者 重新构建了vue应用的时候,只需重启容器就能立马生效。 此时我们再访问 http://localhost:3000/api/json 能看到接口能正常返回,说明转发生效了。
至此接口服务的转发也调通了。
7.3 配置负载均衡
后端服务一般都是双机或者多机以确保服务的稳定性。我们可以再启动一个后端服务容器,并修改
nginx
的配置 来优化资源利用率,最大化吞吐量,减少延迟,确保容错配置。
基于前面 4.5 节的类似操作,新启动一个容器,并基于 5.1 节类似的操作,查看到 新容器的 IP (172.17.0.3)
修改一下 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; }
8. 写在后面
不习惯命令行的同学可以选用 Kitematic 来管理docker
容器的状态、数据目录和网络。所有对容量的操作都可以可视化的操作,这里就不做过多介绍了,有兴趣的同学可以自行体验下。
9 总结
docker提供了非常强大的自动化部署方式与灵活性,对多个应用程序之间做到了解耦,提供了开发上的敏捷性、可控性以及可移植性。本文以vue项目为例实现一个前后分离项目使用docker
部署的完整步骤,希望能给想要拥抱 docker 的同学带来一点帮助。