[手把手系列之]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匹配


相关文章
|
22天前
|
数据采集 监控 JavaScript
在 Vue 项目中使用预渲染技术
【10月更文挑战第23天】在 Vue 项目中使用预渲染技术是提升 SEO 效果的有效途径之一。通过选择合适的预渲染工具,正确配置和运行预渲染操作,结合其他 SEO 策略,可以实现更好的搜索引擎优化效果。同时,需要不断地监控和优化预渲染效果,以适应不断变化的搜索引擎环境和用户需求。
|
9天前
|
人工智能 API 数据安全/隐私保护
使用 Docker 一键免费部署 63.8k 的私人 ChatGPT 网页应用
NextChat 是一个可以在 GitHub 上一键免费部署的私人 ChatGPT 网页应用,支持 GPT3、GPT4 和 Gemini Pro 模型。该项目在 GitHub 上获得了 63.8k 的 star 数。部署简单,只需拉取 Docker 镜像并运行容器,设置 API Key 后即可使用。此外,NextChat 还提供了预设角色的面具功能,方便用户快速创建对话。
60 22
使用 Docker 一键免费部署 63.8k 的私人 ChatGPT 网页应用
|
8天前
|
JavaScript 前端开发
如何在 Vue 项目中配置 Tree Shaking?
通过以上针对 Webpack 或 Rollup 的配置方法,就可以在 Vue 项目中有效地启用 Tree Shaking,从而优化项目的打包体积,提高项目的性能和加载速度。在实际配置过程中,需要根据项目的具体情况和需求,对配置进行适当的调整和优化。
|
20天前
|
SQL 关系型数据库 数据库
国产数据实战之docker部署MyWebSQL数据库管理工具
【10月更文挑战第23天】国产数据实战之docker部署MyWebSQL数据库管理工具
60 4
国产数据实战之docker部署MyWebSQL数据库管理工具
|
10天前
|
运维 开发者 Docker
Docker Compose:简化容器化应用的部署与管理
Docker Compose:简化容器化应用的部署与管理
|
10天前
|
Docker 微服务 容器
使用Docker Compose实现微服务架构的快速部署
使用Docker Compose实现微服务架构的快速部署
23 1
|
21天前
Vue3 项目的 setup 函数
【10月更文挑战第23天】setup` 函数是 Vue3 中非常重要的一个概念,掌握它的使用方法对于开发高效、灵活的 Vue3 组件至关重要。通过不断的实践和探索,你将能够更好地利用 `setup` 函数来构建优秀的 Vue3 项目。
|
21天前
|
JavaScript 测试技术 UED
解决 Vue 项目中 Tree shaking 无法去除某些模块
【10月更文挑战第23天】解决 Vue 项目中 Tree shaking 无法去除某些模块的问题需要综合考虑多种因素,通过仔细分析、排查和优化,逐步提高 Tree shaking 的效果,为项目带来更好的性能和用户体验。同时,持续关注和学习相关技术的发展,不断探索新的解决方案,以适应不断变化的项目需求。
|
22天前
|
消息中间件 Linux RocketMQ
在Red Hat Enterprise Linux 9上使用Docker快速安装并部署
通过以上步骤,你可以在Red Hat Enterprise Linux 9上使用Docker快速安装并部署RocketMQ。这种方法不仅简化了安装过程,还提供了一个灵活的环境来管理和扩展消息队列系统。RocketMQ作为一款高性能的分布式消息系统,通过Docker可以实现快速部署和高效管理。
53 2
|
10天前
|
前端开发 开发者 Docker
深入探索Docker Compose:简化多容器应用的部署
深入探索Docker Compose:简化多容器应用的部署
36 0