使用各种姿势舒服的部署微前端项目(上:打包与上传)

微前端作为解决巨石应用模块化和降低技术框架变动风险的神器,我觉得是当下前端发展的一大方向,可以在未来5-10年内保持生命力。
作者从2019年12月第一次使用qiankun框架落地微服务以来已经过去了一年多的时间,形成了、脚手架、工程结构设计、日常开发维护、性能优化、部署等一整套流程。
之前有两篇文章讲了qiankun的入门文章:
qiankun微前端实战看这篇就够了 - Vue项目篇:这篇文章编写的较早,大致在19年12月份当时qiankun还在1.x版本,现在关于微应用注册及应用间通信的部分已经和现版本不再合适,因此不再建议刚接触qiankun的同学阅读了
vue3.0&qiankun2.0极速尝鲜,微前端进阶实战!:这篇是基于qiankun2.0的入门文章,以及如何将1.0平滑升级至2.0版本,另外也探讨了主应用+n子应用的双端口配置方案
下面讲讲作者在部署上做的一系列方案探索(以下两种方案都更适合一个团队维护N个微应用的场景):

1 脚本部署
2 docker部署

  • 每个模块一个镜像【X】
  • 只使用一个nginx镜像,将前端代码和nginx配置全部通过挂载的方式引入【X】
  • 只使用一个nginx镜像,将前端代码copy至镜像内部,只将nginx配置挂载【√】
  • 每个模块一个镜像,主应用镜像使用挂载nginx配置保证灵活性;再配合脚本解决多镜像维护繁琐的缺点【√】
  1. 有条件可以oss

脚本部署

脚本部署是指使用npm run xx的形式一个命令即可将前端静态资源推送至服务器的方式

大致思路:
  1. 使用node+inquirer编写交互式命令行脚本,像vueCli创建项目一样以伪可视化的形式一步一步指引使用人员进行部署操作。
  2. 通过ssh2-sftp-client插件将读node取到的本地文件上传至linux服务器。
  3. 将脚本启动命令文件改成.bat文件,可以实现在自己电脑上双击运行。
功能有:
  1. 使用node读写服务器配置文件,可通过交互式命令行以input框输入的形式创建新的服务器信息
  2. 通过交互式命令行以选择的形式,将前端打包好的文件按你所选要求部署至所选服务器
效果如下:

添加目标服务器信息
添加目标服务器信息
一键部署
一键部署

缺点
  1. 需要在目标服务器上配好nginx服务及开机运行(无法带运行环境一起部署)
  2. 暂时无法向windows系统推送部署
  3. node读取文件路径虽然可配,但既然要配肯定需要知道微应用打包好的文件位置
  4. 需要知道服务器root或者有足够高权限的账号密码

其中node读写、inquirer命令行交互插件、ssh2-sftp-client将文件推送到服务器都是很成熟的插件,另外多个项目一键下载依赖、一键打包、一键部署脚本地址:多个微应用操作脚本,此外还可以继续优化,将拉取代码、打包、部署做到一起去,更适合非程序人员。

docker 部署

作者刚接触docker几天时间,如有不对之处,欢迎斧;更欢迎指点更多巧妙姿势。
既然是多个微应用,那直接来docker-compose吧。官方简介是这么介绍compose的:负责实现对 Docker 容器集群的快速编排
按docker文档将docker及docker-compose等相关配置都做好:(win版docker自带docker-compose,开启镜像加速即可;contos需要设置docker用户组、镜像加速、单独安装docker-compose等,都按上面官方简介文档操作即可)
docker自带前端运行环境,无需再面对在我这好好的在他那那会不能跑呢的尴尬局面

使用docker-compose将每个微应用都打包成一个镜像部署

此方案每次微应用内容变更或nginx配置变更之后都需要重新打包镜像,非常繁琐,即便是在docker内npm run build打包并将dist COPY 至镜像空间也依旧如此,且无法保证git pull的代码是功能完整且无错的

缺点
  1. 某一镜像下内容或nginx配置变动,需要重新生成此应用的镜像

此方案推荐指数:**

步骤
  1. 在项目根目录添加docker-compose.yml文件。通过docker-compose去调度每个子应用和node服务里面的Dockerfile
services:
  # 服务端配置
  wl-mfe.server:
    container_name: wl-mfe.server
    restart: always
    build: 
      context: ./_server
      dockerfile: Dockerfile
    ports:
      
  • 0
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值