[手把手系列之]Docker 部署 vue 项目(下)

简介: Docker 作为轻量级虚拟化技术,拥有持续集成、版本控制、可移植性、隔离性和安全性等优势。本文使用Docker来部署一个vue的前端应用,并尽可能详尽的介绍了实现思路和具体步骤,以方便有类似需要的同学参考。

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 配置



  • 添加一条重写规则,将 /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 的同学带来一点帮助。


参考资源


docker 官网

nginx 官网

docker 从入门到实践

Kitematic user guide

前端想要了解的Nginx

一文弄懂Nginx的location匹配


相关文章
|
10天前
|
Ubuntu Linux 开发工具
docker 是什么?docker初认识之如何部署docker-优雅草后续将会把产品发布部署至docker容器中-因此会出相关系列文章-优雅草央千澈
Docker 是一个开源的容器化平台,允许开发者将应用程序及其依赖项打包成标准化单元(容器),确保在任何支持 Docker 的操作系统上一致运行。容器共享主机内核,提供轻量级、高效的执行环境。本文介绍如何在 Ubuntu 上安装 Docker,并通过简单步骤验证安装成功。后续文章将探讨使用 Docker 部署开源项目。优雅草央千澈 源、安装 Docker 包、验证安装 - 适用场景:开发、测试、生产环境 通过以上步骤,您可以在 Ubuntu 系统上成功安装并运行 Docker,为后续的应用部署打下基础。
docker 是什么?docker初认识之如何部署docker-优雅草后续将会把产品发布部署至docker容器中-因此会出相关系列文章-优雅草央千澈
|
22天前
|
关系型数据库 应用服务中间件 PHP
实战~如何组织一个多容器项目docker-compose
本文介绍了如何使用Docker搭建Nginx、PHP和MySQL的环境。首先启动Nginx容器并查看IP地址,接着启动Alpine容器并安装curl测试连通性。通过`--link`方式或`docker-compose`配置文件实现服务间的通信。最后展示了Nginx配置文件和PHP代码示例,验证了各服务的正常运行。
48 3
实战~如何组织一个多容器项目docker-compose
|
2月前
|
JavaScript 前端开发
如何在 Vue 项目中配置 Tree Shaking?
通过以上针对 Webpack 或 Rollup 的配置方法,就可以在 Vue 项目中有效地启用 Tree Shaking,从而优化项目的打包体积,提高项目的性能和加载速度。在实际配置过程中,需要根据项目的具体情况和需求,对配置进行适当的调整和优化。
|
1月前
|
Java 应用服务中间件 Docker
将基于 Spring 的 WAR 应用程序部署到 Docker:详尽指南
将基于 Spring 的 WAR 应用程序部署到 Docker:详尽指南
38 2
|
2月前
|
关系型数据库 MySQL Java
【Docker最新版教程】一文带你快速入门Docker常见用法,实现容器编排和自动化部署上线项目
Docker快速入门到项目部署,MySQL部署+Nginx部署+docker自定义镜像+docker网络+DockerCompose项目实战一文搞定!
|
2月前
|
Java Linux Docker
什么是 Docker?如何将 Spring Boot 应用程序部署到 Docker?
什么是 Docker?如何将 Spring Boot 应用程序部署到 Docker?
57 3
|
2月前
|
机器学习/深度学习 数据采集 Docker
Docker容器化实战:构建并部署一个简单的Web应用
Docker容器化实战:构建并部署一个简单的Web应用
|
2月前
|
持续交付 开发者 Docker
掌握Docker容器化技术,加速软件开发与部署
掌握Docker容器化技术,加速软件开发与部署
59 0
|
5月前
|
运维 Java Devops
阿里云云效操作报错合集之部署docker时遇到报错,该怎么办
本合集将整理呈现用户在使用过程中遇到的报错及其对应的解决办法,包括但不限于账户权限设置错误、项目配置不正确、代码提交冲突、构建任务执行失败、测试环境异常、需求流转阻塞等问题。阿里云云效是一站式企业级研发协同和DevOps平台,为企业提供从需求规划、开发、测试、发布到运维、运营的全流程端到端服务和工具支撑,致力于提升企业的研发效能和创新能力。
|
运维 Kubernetes 前端开发
【云原生】阿里云服务器部署 Docker Swarm集群
阿里云服务器 一键部署 Docker Swarm 集群!
700 0
【云原生】阿里云服务器部署 Docker Swarm集群