微前端作为解决巨石应用模块化和降低技术框架变动风险的神器,我觉得是当下前端发展的一大方向,可以在未来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配置保证灵活性;再配合脚本解决多镜像维护繁琐的缺点【√】
- 有条件可以oss
脚本部署
脚本部署是指使用npm run xx的形式一个命令即可将前端静态资源推送至服务器的方式
大致思路:
- 使用node+inquirer编写交互式命令行脚本,像vueCli创建项目一样以伪可视化的形式一步一步指引使用人员进行部署操作。
- 通过ssh2-sftp-client插件将读node取到的本地文件上传至linux服务器。
- 将脚本启动命令文件改成.bat文件,可以实现在自己电脑上双击运行。
功能有:
- 使用node读写服务器配置文件,可通过交互式命令行以input框输入的形式创建新的服务器信息
- 通过交互式命令行以选择的形式,将前端打包好的文件按你所选要求部署至所选服务器
效果如下:
添加目标服务器信息
一键部署
缺点
- 需要在目标服务器上配好nginx服务及开机运行(无法带运行环境一起部署)
- 暂时无法向windows系统推送部署
- node读取文件路径虽然可配,但既然要配肯定需要知道微应用打包好的文件位置
- 需要知道服务器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的代码是功能完整且无错的
缺点
- 某一镜像下内容或nginx配置变动,需要重新生成此应用的镜像
此方案推荐指数:**
步骤
- 在项目根目录添加
docker-compose.yml
文件。通过docker-compose去调度每个子应用和node服务里面的Dockerfile
services:
# 服务端配置
wl-mfe.server:
container_name: wl-mfe.server
restart: always
build:
context: ./_server
dockerfile: Dockerfile
ports: