📦开箱即用的微前端工程方案,基于 umi3.x + qiankun@next
🍳从实际中台项目孵化,精简的 开发→构建→部署 全流程应用方案
🧭Demo Site:microfe.herokuapp.com
先分别安装基座应用和子应用的依赖,文件结构如下:
Ming
|-- account/ ·········· 子应用 account
|-- car/ ·············· 子应用 car
|-- dist/ ············· 生产环境目录
|-- foundation/ ······· 基座应用
|-- home/ ············· 子应用 home
|-- Dockerfile
|-- app.js ············ hapi 驱动的简单后端路由
|-- package.json
先启动基座应用:
Ming/foundation > $ yarn start再启动对应的子应用
Ming/account > $ yarn start Ming/home > $ yarn start Ming/car > $ yarn start
应用默认运行于 http://localhost:8000
本地开发时,子应用运行在不同的端口,集中配置在基座应用的 config/config.dev.ts 中。
推荐 OSS 托管静态文件式部署子应用。
各个子应用应分别托管到 OSS 后,暴露自己的入口 index.html 路径给基座应用。从版本 1.1.0 开始,集中子应用配置项到
foundation/config/config.prod.ts:
const subApps = [ ... { name: 'account', microApp: 'account', entry: 'https://oss.myname.cloud.com/micro_subapp/account/index.html', path: 'account', title: '账户', wrappers: ['@/wrappers/brother'], routes: [ { path: '/account/login', title: '登录', }, ], }, ... ]
以上部署方式可以实现子应用单独开发、单独更新、甚至技术栈无关(子应用只需暴露符合 Single-SPA/qiankun 的生命周期方法)。
参考根目录 package.json 的 scripts,子应用和基座应用都打包进 /dist 后,
参考 app.js 简单处理静态文件与路由冲突导致的 404 问题即可部署。
Ming/dist > $ PORT=3000 node app.jsMing 将会运行在 http://localhost:3000
先取消注释 dist/Dockerfile 文件中的的端口(PORT)字段
Ming/dist > $ docker build -t vizards/ming . Ming/dist > $ docker run -p 12580:3000 -d vizards/ming
Ming 将会运行在 http://localhost:12580